所有事件委派到文档答案

【问题标题】：All Event Delegation to Document所有事件委派到文档
【发布时间】：2017-01-06 10:19:40
【问题描述】：

目前我有 350+ 个活动，例如

$(document).on('click','.removable-init',function(){});

我看到一个性能问题，一些点击事件延迟了几分之一秒。但是我的整个网站都是用 ajax 动态生成的。

我想知道如何处理这些问题。

以下是我网站的流程示例。

加载

<html>
<head></head>
<body>
<div id="main">
   <button id="clickme"></button>
   <button id="clickme2"></button>
</div>
</body>
</html>

点击： #clickme

 $('#main').append('<div id="anothermain"><button id="anotherclick"></button></div>');

点击： #clickme2

 $('#main').append('<div id="anothermain4"><button id="anotherclick4"></button></div>');

点击： #anotherclick

 $('#anothermain').append('<div id="anothermain2"><button id="anotherclick2"></button></div>');

点击： #anotherclick2

 $('#main').append('<div id="mainsibling"><button id="clicksibling"></button></div>');

点击： #anotherclick4

 $('#main').append('<div id="anothermain5"><button id="anotherclick2"></button></div>');

以上只是一个示例，表明点击事件是巨大的（350+）并且是在网站的不同部分动态创建的。

所以我想知道如何在不使用委托记录的情况下处理这些问题。 ?

当屏幕上有很多元素时，有时专注于文本框、下拉点击等反应很慢

【问题讨论】：

一种方法是尽可能靠近对象：$("#main").on('click','button',function(){});
唯一可以包含所有元素的最接近的东西是#main，它是文档/正文的孩子，所以我认为它不会有太大影响

标签： javascript jquery html performance events

【解决方案1】：

一种解决方案可能是在创建新元素后绑定对它的点击。

您可以在点击现有元素时创建元素，并自行处理对新点击元素的点击，而不是在页面加载时附加所有事件处理程序。像这样的：

<html>
<head></head>
<body>
<div id="main">
   <button id="clickme"></button>
</div>
</body>
</html>

JS：

$(function() {
    $("#clickme").on('click', function(e) {
        var $anotherMain = $('<div id="anothermain"><button id="anotherclick"></button></div>');
        $('#main').append($anotherMain);
        //handle click on anotherMain
        $anotherMain.on('click', function(e) {
            var $anotherMain2 = $('<div id="anothermain2"><button id="anotherclick2"></button></div>');
            $('#main').append($anotherMain2);
            //handle click on anotherMain
            $anotherMain2.on('click', function(e) {
                // add anotherMain3 and so on.
            });
        })
    })
});

可以提取和重复使用创建新元素和绑定其点击的常用功能。

【讨论】：

如果有点击事件的分支网络怎么办。例如。假设 onclick #clickme2 一个兄弟 #clickme 追加 #anotherclick4 哪个 onclick 追加 #anotherclick3 ？我怎么知道#anotherclick3 是否被点击？
据我了解，问题是您在页面加载时没有元素，因此您需要使用委托。但是，您正在动态创建元素，此时您拥有对创建元素的引用，因此，您可以绑定点击它。