|
谈谈 JavaScript 中的事件委托时间：2020-11-22
为什么要进行事件委托？首先实现一个小功能：在单击 HTML 的按钮后，把消息输出到控制台。 为了实现这个小功能，你需要选择按钮，然后再用 <button id="buttonId">Click me</button>
<script>
document.getElementById('buttonId')
.addEventListener('click', () => console.log('Clicked!'));
</script>以上就是侦听单个元素（尤其是按钮）上事件的方式。 如果需要监听多个按钮上的事件呢？下面是一种可能的实现： <div id="buttons">
<button class="buttonClass">Click me</button>
<button class="buttonClass">Click me</button>
<!-- buttons... -->
<button class="buttonClass">Click me</button>
</div>
<script>
const buttons = document.getElementsByClassName('buttonClass');
for (const button of buttons) {
button.addEventListener('click', () => console.log('Clicked!'));
}
</script>按钮列表被迭代为 有没有更好的方法？ 幸运的是，如果我们使用“事件委托”模式的话，侦听多个元素上的事件只需要一个事件侦听器。 事件委托使用事件传播机制的细节。想要要了解事件委托的工作原理，应该先了解什么是事件传播。 事件传播当你单击下面 html 中的按钮时： <html> <body> <div id="buttons"> <button class="buttonClass">Click me</button> </div> </body> </html> 点击事件会触发多少个元素？毫无疑问，按钮本身会收到单击事件。而且所有按钮的祖先，甚至包括 点击事件的传播分三个阶段：
element.addEventListener(eventType, handler[, captureOrOptions]); 使你可以捕获来自不同阶段的事件。
通过下面的代码，你会侦听到在 document.body.addEventListener('click', () => {
console.log('Body click event in capture phase');
}, true);在这个 Codesandbox 演示中，单击按钮时，你可以在控制台中查看事件的传播方式。 那么事件传播是怎样帮助捕获多个按钮事件的呢？ 该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。 3.事件委托让我们用事件委托来捕获多个按钮上的点击： <div id="buttons"> <!-- Step 1 -->
<button class="buttonClass">Click me</button>
<button class="buttonClass">Click me</button>
<!-- buttons... -->
<button class="buttonClass">Click me</button>
</div>
<script>
document.getElementById('buttons')
.addEventListener('click', event => { // Step 2
if (event.target.className === 'buttonClass') { // Step 3
console.log('Click!');
}
});
</script>打开Codesandbox 演示，然后单击任意按钮，你会看到 事件委托的思想很简单。你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听 使用事件委托需要3个步骤： 步骤1：确定要监视事件的元素的父级元素在上面的例子中， 步骤2：把事件侦听器附加到父元素
步骤3：用 event.target 选择目标元素单击按钮时，将会用 // ...
.addEventListener('click', event => {
if (event.target.className === 'buttonClass') {
console.log('Click!');
}
});顺便说明一下， 现在，你可以看到事件委托模式的好处：事件委托仅需要一个事件侦听器，而不必像本文最初那样将侦听器附加到每一个按钮上。 总结当发生点击事件（或传播的任何其他事件）时：
该机制称为事件传播。 事件委托是一种有用的模式，因为你可以只需要用一个事件处理程序就能侦听多个元素上的事件。 使用事件委托需要三个步骤：
更多web前端开发知识，请查阅ots网络安全门户 ！！！ |
