DOM事件相关

2023-04-21 52 阅读1分钟

一、事件委托

事件代理又叫事件委托，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

为什么要用事件委托：

减少内存消耗，提高性能
动态监听元素场景： 假如有一个<table>,里面有多个 <td>，我们的任务是在点击时高亮显示被点击的单元格 <td>。
假如在每一个<td>上添加监听事件，这样不仅会浪费内存(监听器数量增多)，而且添加新的 <td>时，还需要绑定事件，不够灵活。
而我们使用事件委托，可以在<td>的共同祖先<table>元素上设置一个“捕获所有”的处理程序。则很好的解决了这两个问题。

二、阻止默认动作

 let $a = document.querySelector("#a")[0];
 $a.onclick = function(e){
     alert("跳转已被阻止")
     e.preventDefault();
     //return false;//也可以
 }

三、阻止事件冒泡

使用event.stopPropagation()

<body onclick="alert(`the bubbling doesn't reach here`)">
<button onclick="event.stopPropagation()">Click me</button>
</body>