事件代理

Posted 2020-10-05

1.事件代理

　　事件代理是指在父元素上注册事件回调函数，若在父元素容器内的子元素触发了该事件，则在父元素上响应该事件。即父容器代理了在其容器内所有子元素的事件处理，优点是：1>减少了事件绑定（只需要在父容器上绑定事件）；2>动态变化的DOM结构仍然可以监听（父元素可以根据event.target.tagName 判断触发事件是哪个子元素）。

2.浏览器差异

　　火狐 & IE  ==>  事件捕获 & 事件冒泡 

　　首先得明白父元素以及其容器内的子元素是合成绘制到页面上来的，即它们是堆叠显示的。

       事件捕获

       事件的触发从windon根节点发出，不断地经过下级阶段知道目标节点。在到达目标节点的路径上所有注册过该事件的回调函数都会触发。

       事件冒泡

       事件的触发从目标节点发出，不断地通过上级节点（父节点）向上传递，在该过程中所经过的所有节点都会触发该事件，若注册过回调函数的节点，则该回调函数会执行。

3.设置事件冒泡或者捕获阶段触发

　　element.addEventListener(eventType,callBack,true | false)

　　第3个参数默认为false，表示事件在冒泡阶段调用事件处理函数；如果该参数为true，则表示在事件捕获阶段调用事件处理函数。事件冒泡的兼容性更好，在IE9 之前设置 element.attachEvent(eventType,callBack)，在IE9之后，可以设置 element.addEventListener(eventType,callBack,true|false);