事件冒泡:
当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级(只传递事件),一直到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;
事件捕获
事件捕获的顺序跟事件冒泡的顺序刚好相反
事件流
1-5捕获过程 5-6目标过程 6-10 冒泡过程
事件委托
事件委托,又叫事件代理,原理就是利用冒泡,只指定一个事件处理程序,用来管理某一类型的所有事件。
例子:前台代收快递的妹子