JS笔记 ( 二十六 ) 事件对象和事件委托

---

博主的 Github 地址

---

1. 事件对象

(1) 事件对象的定义

• 当触发一个事件时, 会产生一个事件对象, 会记录该事件的具体信息

(2) 事件对象的获取

• 两种方式: event 或者 window.event

(3) 事件源对象

• 定义: 事件源对象指的是真正触发该事件的对象, 即当冒泡发生时, 会获取其事件源元素
• 获取: event.target( Firefox 只有这个 ) 或 event.srcElement ( IE 只有这个 )

 
 

2. 事件委托

(1) 作用

• 有时候多重的嵌套关系或父子关系, 可以利用事件冒泡和事件源对象进行处理
• 典型的应用在于如果一个嵌套或父子关系的结构,
  子元素都需要绑定事件且实现的是同样的功能的时候,
  可以直接在父元素上进行绑定事件, 针对子元素的属性对函数进行修正

(2) 备注

• 关于事件冒泡请结合上篇文章一起看 click-> 事件处理模型和取消默认事件

(3) 优点

• 性能: 不需要循环所有元素一个个的去绑定事件
• 灵活: 当有新的子元素时不需要重新绑定事件

(4) 应用实例

• 最典型的应用算是在无序列表中, 示例将建立一个九宫格, 点击格子, 输出格子的内容

• 代码示例

• css 样式

	<style>
        ul {
            width: 96px;
            height: 96px;
            list-style-type: none;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        li {
            width: 30px;
            height: 30px;
            background-color: aqua;
            border: solid black 1px;
            float: left;
        }
    </style>

 

• js 事件

        var theBOX = document.getElementById('theBOX');

        function sayhi() {
            console.log(event.srcElement.innerHTML);
        }
        theBOX.addEventListener('click',sayhi,false);

 

• html 结构

	<ul id="theBOX">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
    </ul>

• 效果展示
  

• 触发事件
  任意点击格子后, 控制台会输出相应的格子的内容
  

• 备注:
  用这种事件委托的方式, 就不用一个个的去绑定 li 的事件了,
  因为点击 li 的时候, 最终都会因为冒泡模型而触发其父元素 ul 的点击事件,
  因此直接将事件绑定在 ul 即可, 这样做后面加上的新的 li 也能够触发该事件.