每天一道面试题(3) - 你知道JS的事件机制吗

要注意, JS的事件机制和JS的事件运行机制是两个不同的问题

这个问题可以派生出如下几个问题

你了解JS的事件机制吗?

一个事件触发时, DOM2级事件规定分为捕获阶段 - 目标阶段 - 冒泡阶段三个阶段

我们可以使用DOM0级的规范onclick等事件直接驱动事件, 也可以通过DOM2级规范中的
addEventListener方法触发事件, 它可以控制是在事件捕获阶段还是在事件冒泡阶段调用事件处理程序.

onclick这种方法的弊端就是不能同时绑定多个事件, 使得代码必须耦合在一起

addEventListenert方法第一个参数填写事件名，第二个参数是事件处理函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序。true代表捕获阶段处理， false代表冒泡阶段处理。默认值false

好, 看下面这段代码在child被点击时打印出什么?

var parent = document.getElementById('mydiv')
parent.addEventListener(
    'click',
    function () {
        console.log('parent')
    },
    false
)
var child = document.getElementById('child')
child.addEventListener(
    'click',
    function () {
        console.log('child')
    },
    false
)

结果是

child
parent

因为是在冒泡阶段触发的, 所以先打印child, 后打印parent

那么看下面这段代码

var parent = document.getElementById('mydiv')
parent.addEventListener(
    'click',
    function (e) {
        e.stopPropagation()
        console.log('parent')
    },
    true
)
var child = document.getElementById('child')
child.addEventListener(
    'click',
    function (evt) {
        console.log('child')
    },
    true
)

parent

由于第三个参数是true表示是在事件捕获阶段触发, 所以先打印parent, 但是在parent事件执行函数中, 使用stopPropagation阻止了事件传播, 所以只打印parent

怎么阻止事件传播

所以, 这个问题的答案就是

e.stopPropagation()

很多人说这个函数是阻止事件冒泡, 其实不然, 它的准确说法是阻止事件传播

event.target 和event.currentTarget

• event.currentTarget始终是监听事件者
• 而event.target是事件的真正发出者

什么是事件委托?

由上面的描述可以知道, 点击子元素的时候也会触发父元素的事件, 那么就可以根据这个特性将事件绑定到父元素上, 根据event.target来定位到真正触发事件的元素, 从而进行统一处理, 这就是事件委托

事件委托是利用事件的冒泡原理来实现的

事件委托的优点

• 减少事件注册,节省内存，能够提升整体性能。
• 简化了dom节点更新时,相应事件的更新

react中的事件委托

在react中, onClick等事件其实不是直接绑定在元素上的, 而是通过事件冒泡的形式上冒泡到document上

所以在, react的事件中使用event.stopPropagation是无效的

react中的事件合成比较复杂, 下次再详细说