事件冒泡与事件委托笔记

1，事件冒泡：当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件

子元素在没有定义具体的click处理函数的时候，仍然可以冒泡触发父元素的click事件

只有相应的事件会发生事件冒泡，不想管的事件不受影响（注：由于click为鼠标的点击，所以同样会触发mousedown与mouseup等相关事件，同时发生冒泡）

阻止事件冒泡：在事件触发时，会传入一个相应的event对象，其中有一个stopPropagation（）可以阻止事件冒泡（IE中为cancleBubble=true）

2，事件委托：将子元素的事件通过冒泡的形式交给父元素来执行

事件委托可以在遍历每一个栏目的时候，减少DOM操作次数

让事件效果只有点击事件源才会触发，标准浏览器使用ev.target，IE浏览器用event.srcElement

例：只有点击li会触发事件，且每次只执行一次dom操作

上面这个例子是所有的li执行同样的效果，要是每个li被点击的效果都不一样，也可以优化：

例：

但是还有一个问题，当新添加节点时，新增的节点是没有事件的

例：window.onload = function(){
var oBtn = document.getElementById("btn");
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var num = 4;

//鼠标移入变红，移出变白
for(var i=0; i<aLi.length;i++){
aLi[i].onmouseover = function(){
this.style.background = 'red';
};
aLi[i].onmouseout = function(){
this.style.background = '#fff';
}
}
//添加新节点
oBtn.onclick = function(){
num++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*num;
oUl.appendChild(oLi);
};
}

解决办法：可以用函数将事件包起来，在新增节点之后调用，例：

再用事件委托，优化如下：

说明，当用事件委托时，不需要遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都在js里面执行，这样可以大大减少dom操作，这是事件委托的精髓。

再给一个场景 ul > li > div > p，当div占满li，p占满div，还是给ul绑定事件，需要判断点击的是否为li，代码如下：

<ul id="test">
        <li>
            <p>11111111111</p>
        </li>
        <li>
            <div>
                22222222
            </div>
        </li>
        <li>
            <span>3333333333</span>
        </li>
        <li>4444444</li>
    </ul>

解决办法，核心在于while循环，递归调用，也可以写成一个函数，用递归的方法来调用，同时用到冒泡原理，直到currentTarget为止，当当前的target为li时，就可以执行对应事件了

var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

总结：

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress

而mouseover和mouseout虽然也有事件冒泡，但在处理它们的时候，需要经常计算它们的位置，处理起来不太容易

不适合的就很多，比如focus blur等，本身没有冒泡属性

事件冒泡与事件委托笔记

猜你喜欢