JavaScript事件代理中，有哪些细节容易被忽略导致问题？

本文共计1376个文字，预计阅读时间需要6分钟。

我们知道，如果给`form`中的`button`元素绑定事件，需要考虑它是否会触发`form`的`submit`行为。除此之外，其他情况下给`button`元素绑定事件，通常不需要担心这个事件会有非预期的副作用。

我们知道，如果给 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 上。