事件冒泡、事件捕获、事件委托

338 阅读1分钟

事件冒泡:当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级(只传递事件),一直到window(小鱼吐泡泡)

例如:

<div id="parent">   <div id="children"></div></div>

var parent = document.querySelector('#parent')var children = document.querySelector('#children')parent.onclick = function () {  console.log('parent')}children.onclick = function () {  console.log('children')}

控制台输出结果:

children
parent

备注:点击事件给页面显示出来的位置是没关系的

取消事件冒泡

标准的W3C方式:

e.stopPropagation();

非标准的IE方式

e.cancelBubble = true;

阻止默认行为

return false;

事件捕获

事件捕获的顺序跟事件冒泡的顺序刚好相反

事件流

一个完整的js事件流从Window开始,最后回到Window的一个过程

1-5捕获过程  5-6目标过程  6-10 冒泡过程


事件委托

事件委托,又叫事件代理,原理就是利用冒泡,只指定一个事件处理程序,用来管理某一类型的所有事件。

例子:前台代收快递的妹子