面试题029-事件捕获,冒泡,委托

247 阅读2分钟

事件冒泡与事件捕获

这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。

1.事件冒泡

事件冒泡可以比喻成我敲击我笔记本键盘的的某个按键,同时相当于敲击了键盘区,同时相当于敲击了笔记本,也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。 因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是

p -> div -> body -> html -> document

2.事件捕获

与事件冒泡相反,事件会从最外层开始发生,直到最具体的元素。 上面的例子在事件捕获的概念下发生click事件的顺序应该是****

document -> html -> body -> div -> p

3.addEventListener

DOM2级事件”中规定的事件流同时支持了事件捕获阶段和事件冒泡阶段,而作为开发者,我们可以选择事件处理函数在哪一个阶段被调用。

addEventListener方法用来为一个特定的元素绑定一个事件处理函数,是JavaScript中的常用方法。addEventListener有三个参数:

 element.addEventListener(event, function, useCapture)

第三个参数是布尔值,默认false,false是事件冒泡,true是事件捕获,我们可以使用event.stopPropagation()来阻止冒泡,使用event.preventDefault()阻止默认行为

4.事件委托(事件代理)

事件委托,通常是利用事件冒泡的机制,通过监听一个父元素,来给不同的子元素绑定事件,减少监听次数,从而提升速度。点击了 li 后会冒泡到 ul ,此时就会触发绑定在 ul 上的点击事件,再利用 target 找到事件实际发生的元素,就可以达到预期的效果。使用事件代理的好处不仅在于将多个事件处理函数减为一个,而且对于不同的元素可以有不同的处理方法。