事件捕获
- 事件捕获中，父级元素先触发，子集元素后触发
- 事件会从最外层开始，直到具体的元素，比如click的捕获过程document->html->body->div->p
事件冒泡
- 事件冒泡时，子元素先出发，父级元素后触发
- 元素自身事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递，就是冒到父元素，父元素相同事件也会一级级向外触发
- 默认情况下，所有事件处理程序都是在冒泡阶段注册的
- 如果想早捕获阶段注册事件，通过addEventListener来注册应用程序，并将第三个属性设置为true就可以了
事件捕获第一层第二层第三层 第二层 -> 第一层
// isCapture为true时，为事件捕获
// 打印 第一层 -> 第二层 -> 第三层
document.getElementById('item1').addEventListener('click', handleClick1, isCapture)
document.getElementById('item2').addEventListener('click', handleClick2, isCapture)
document.getElementById('item3').addEventListener('click', handleClick3, isCapture)" _ue_custom_node_="true">事件代理
- 事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
- 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数
- 减少内存消耗
实际应用
- 给ul下的li绑定点击事件，通过把事件绑定在ul上，来避免每一个li上绑定事件
item 1item 2item 3......item n
// 给父层元素绑定事件
document.getElementById('list').addEventListener('click', function (e) {
// 兼容性处理
var event = e || window.event;
var target = event.target || event.srcElement;
// 判断是否匹配目标元素
if (target.nodeName.toLocaleLowerCase === 'li') {
console.log('the content is: ', target.innerHTML);
}
})本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
