事件流描述的是事件发生的时候会在元素节点之间按照特定的顺序进行传播,这个传播的过程就是DOM事件流。
三个阶段:
-
捕获阶段(从上到下寻找执行事件的元素)
-
目标元素阶段
-
冒泡阶段(从下到上)
注意:
js代码中只能执行捕获或者冒泡其中一个阶段。onclick和attachEvent只能得到冒泡阶段。addEventListener(type,function,true/false),如果第三个参数是true,则代表使用捕获顺序,false(默认)则使用冒泡顺序。- 捕获指的是先目标元素先为父元素,再为子元素。冒泡则相反。
- 实际开发中很少使用捕获,更关注事件冒泡。
- 有些事件没有冒泡:
onblur 、onfocus、onmouseover、onmouseleave注意:
事件委托
核心原理:给父节点设置事件监听,利用冒泡原理影响子节点,使子节点能够触发父节点的事件。
事件对象的target和this
//设置事件对象
node.addEventListener('event',fn(e){
console.log(e.target)
console.log(e.this)
})
//target 点击哪个节点,target就指向哪个节点,如果点击子节点触发事件,那么log输出 nodechildren
//this 绑点哪个节点 就指向哪个节点,即永远指向父节点node