Javascript JS事件侦听器（性能）

我有一个包含10000个单元格（100行100列）的简单表，每个单元格都有click event listener。我没有注意到任何视觉性能问题。你能给我详细解释一下，为什么它对性能如此不利

另外，我知道事件冒泡，最好在

上添加一个事件侦听器：）

constclickhandler=（事件）=>{
console.log（事件）；
};
常量getTable=（rowsNum，columnsNum）=>{
让row=''；
让行=“”；
for（设i=0；i{
document.querySelector（'.table'）.innerHTML=getTable（100100）；
};
内表（）
表格，td{
边框：1px纯黑；
}
运输署{
宽度：5px；
高度：5px；
}

标题

…为什么它对性能如此不利

执行此操作时：

<td onclick="clickHandler(event)"></td>

速度明显加快：


constclickhandler=（事件）=>{
console.log（事件类型）；
};
常量getTable=（rowsNum，columnsNum）=>{
让row=''；
让行=“”；
for（设i=0；i{
const table=document.querySelector（'.table'）；
table.innerHTML=getTable（100100）；
table.querySelectorAll（“td”）.forEach（td=>{
td.addEventListener（“单击”，clickHandler）；
});
};
内表（）
表格，td{
边框：1px纯黑；
}
运输署{
宽度：5px；
高度：5px；
}

标题

…为什么它对性能如此不利

执行此操作时：

<td onclick="clickHandler(event)"></td>

速度明显加快：


constclickhandler=（事件）=>{
console.log（事件类型）；
};
常量getTable=（rowsNum，columnsNum）=>{
让row=''；
让行=“”；
for（设i=0；i{
const table=document.querySelector（'.table'）；
table.innerHTML=getTable（100100）；
table.querySelectorAll（“td”）.forEach（td=>{
td.addEventListener（“单击”，clickHandler）；
});
};
内表（）
表格，td{
边框：1px纯黑；
}
运输署{
宽度：5px；
高度：5px；
}

标题
对于DOM和您自己来说，一个事件处理程序的管理将更少，这对您来说更容易，对浏览器来说更高效

事件委派是模式的正确命名。它指的是使用冒泡处理DOM中更高级别的事件的过程。使用一个事件监听器，并在您实际希望触发它时过滤掉，这样更容易管理

如果忘记删除事件侦听器，可能会导致内存泄漏

David Walsh提供了一篇关于如何利用活动授权的文章。
对于DOM和您自己来说，一个事件处理程序的管理将更少，这对您来说更容易，对浏览器来说更高效

事件委派是模式的正确命名。它指的是使用冒泡处理DOM中更高级别的事件的过程。使用一个事件监听器，并在您实际希望触发它时过滤掉，这样更容易管理

如果忘记删除事件侦听器，可能会导致内存泄漏

David Walsh提供了一篇关于如何利用活动授权的文章。
嗯，我在点击后等待了四秒钟以获得一些响应。我不知道你为什么认为没有性能问题。嗯，我在点击后等待四秒钟以获得一些响应。我不确定您为什么认为没有性能问题。“如果您忘记删除事件侦听器，可能会导致内存泄漏。”在现代浏览器（以及IE9-IE11）中，大多数情况下都不是这样。“如果您忘记删除事件侦听器，可能会导致内存泄漏。”在现代浏览器（以及IE9-IE11）中，大多数情况下都不是这样。