55、js事件冒泡和事件委托·

目录

1. 事件冒泡

2、阻止事件冒泡

2.1. event.stopPropagation()方法 

2.2 event.target

3、addEventListener()方法（事件监听）：

4、事件委托

---

1. 事件冒泡

当一个元素上的事件被触发的时候，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到最上层的祖先元素。

例如：为这三层的标签都添加点击事件，当点击最里层的a标签时，会依次触发最里层的事件c、中间层的事件b、最外层的事件a。

第三个参数使用了默认的冒泡传递false

点击最里层标签<a> 后，打印（从里向外触发，并实现链接的跳转）：

1. 事件c被触发
2. 事件b被触发
3. 事件a被触发

2、阻止事件冒泡

1. event.stopPropagation()方法 ：阻止事件冒泡，但不会阻击默认行为（如不阻止超链接的跳转）。注意：IE用cancelBubble=true来阻止；
2. event.target：指向实际被单击的元素。通过event.target==this判断是否是被点击的元素，若是则执行相应的操作。
3. 在click后面加上 .stop：完整写法是 <span @click.stop="test2()">按钮1</span>。适用于vue中直接在标签中绑定click事件的情况。

2.1. event.stopPropagation()方法 

在c的点击事件中，将event.stopPropagation()方法放到 事件触发后调用的函数 最后一行，实现了只触发事件c，并且也实现了c的链接跳转。

只打印了：事件c被触发。并且跳转到了相应的链接

2.2 event.target

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是指向接受事件的目标DOM元素（实际被点击的元素）。

点击c，只触发了c事件。只打印了：事件c被触发，并且跳转到了百度。

3、addEventListener()方法（事件监听）：

语法：   element.addEventListener(event, function, useCapture);

第一个参数：监听的事件类型（如“click”或“mousedown”）

第二个参数：事件触发后调用的函数。

第三个参数：描述事件是冒泡传递（false）还是捕获传递（true）。该参数是可选的，默认冒泡传递（false）。

区分冒泡传递 和 捕获传递：

如果将<p>元素插入到<div>元素中，用户点击<p>元素，哪个元素的“click”事件先被触发呢？

1. 冒泡传递中，内部元素的事件会先被触发，然后再触发外部元素，即：<p>元素的点击事件先触发，然后会触发<div>元素的点击事件。
2. 捕获传递中，外部元素会先被触发，然后才会触发内部元素的事件，即：<div>元素的点击事件先触发，然后再触发<p>元素的点击事件。

4、事件委托

（1）含义

事件委托（event delegation）：又称事件代理，是javaScript中绑定事件的常用技巧。顾名思义，‘事件代理’就是把原本需要绑定的事件委托给父元素，让父元素负责事件监听。事件代理的原理是DOM元素的事件冒泡。

（2）事件委托的好处

1.减少事件数量，提高性能
2.预测未来元素，新添加的元素仍然可以触发该事件
3.避免内存外泄，在低版本的IE中，防止删除元素而没有移除事件，造成的内存溢出

（3）举例

点击li添加背景颜色，点哪个哪个有背景颜色。

普通做法：为每个li添加点击onclick函数

let oItems = document.querySelectorAll('li');
    let currentItem = oItems[0];
    for (let item of oItems){
        // item.onclick = change;
        item.onclick = function () {
            currentItem.className = '';
            this.className = 'selected';
            currentItem = this;
        }
    }

事件委托的做法：监听ul的点击，而不是直接监听li的点击，li将事件冒泡到它的父元素ul（利用了事件冒泡），再通过事件对象拿到当前被点击的元素, 只需添加一次onclick函数（添加到ul上）。

 let oUl = document.querySelector('ul');
    let oLi = document.querySelector('.selected');
    oUl.onclick = function (event) {
        event = event || window.event;//兼容所有浏览器
        oLi.className = '';
        let item = event.target;//event.target为当前点击的li
        item.className = 'selected';
        oLi = item;
    }