首页 | 编程 | Java

JavaScript 事件代理需要注意的地方

2020年09月08日 作者：前端小蜜蜂原文

我们知道，如果给 form 里面的 button 元素绑定事件，需要考虑它是否会触发 form 的 submit 行为。除此之外，其它场合给 button 元素绑定事件，你几乎不用担心这个事件会有什么非预期的附加效果，很自然地会这样写事件处理代码：

var button = document.querySelector('button')
button.addEventListener('click', function (e) {
 console.log('点击了按钮')
})

你之所以放心这么写，是因为这个 button 元素没有使用事件代理，即没有代理任何子元素的事件。

事件代理的意思是，你要为一个元素绑定事件，但你不是直接把事件绑定到这个元素自己身上，而是绑定到这个元素的父元素上。当子元素的某个事件（比如点击事件）触发时，它的父元素相同的事件也会触发（我们常说的事件冒泡），此时我们说父元素代理了子元素的事件。

举个例子，比如一个 button 元素中包含一个齿轮图标：

<button>
 <svg>
 <use xlink:href="#gear" rel="external nofollow" ></use>
 </svg>
</button>

当用户点击齿轮图标，必然要触发 click 事件，但你并不会直接绑定事件到 svg 或 use 元素上，而是绑定到它们的父元素 button 上。即：

document.querySelector('button').addEventListener('click', function (e) {
 console.log('点击了按钮')
})

这种情况，我们可以说，button 元素代理了它的所有子元素的 click 事件。

但是，出现这种事件代理的情况时，我们就得小心了。

为了更直观地说明问题，我们把“父”元素上升到顶层的 document 元素：

document.documentElement.addEventListener('click', function (e) {
 console.log('我被点击了')
})

只要网页中任意一个位置被点击了，都会触发绑定在 document 元素上的点击事件。​ 想要知道事件具体是发生在哪个元素上面，可以通过事件对象提供的 target 属性来判断。

document.documentElement.addEventListener('click', function (e) {
 console.log(e.target)
})

我们很容易知道事件具体是发生在哪个元素身上的。于是在上面的示例中，如果父元素 document 想在按钮被点击时做点什么事情，我们很自然地会这么写：

document.documentElement.addEventListener('click', function (e) {
 if (e.target.tagName === 'BUTTON') {
 console.log('按钮被点击了')
 }
})

这时问题就出现了，按钮即使被点击了 if 条件也不一定成立，即也不一定会输出“按钮被点击了”。因为用户在按钮上的某个位置点击了，根据用户点击的位置，e.target 可能是下面三种情况：

  • BUTTON 元素
  • SVG 元素
  • USE 元素

实际的情况是这样的：

综上，针对特定元素进行事件处理时，如果该元素有事件代理的情况，就要小心处理它所代理的子元素。

以上就是JavaScript 事件代理需要注意的地方的详细内容，更多关于JavaScript 事件代理的资料请关注来客网其它相关文章！

相关链接