Fatal编程技术网

Javascript 所有活动授权文件

javascript jquery html performance events

Javascript 所有活动授权文件,javascript,jquery,html,performance,events,Javascript,Jquery,Html,Performance,Events,目前我有350+项活动，如 $（document）.on（'click'，'removable init'，function（）{}） 我看到一个性能问题，一些点击事件延迟了几分之一秒。 但是我的整个网站是用ajax动态生成的 我想知道如何处理这类问题 例如，我的网站的流量让我们看看下面 ONLOAD <html> <head></head> <body> <div id="main"> <button id="clickm

目前我有350+项活动，如

$（document）.on（'click'，'removable init'，function（）{}）

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

我想知道如何处理这类问题

例如，我的网站的流量让我们看看下面

ONLOAD


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


单击：
#单击ME2


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


单击：
#另一次单击2


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


以上只是一个例子，说明点击事件是巨大的（350+），是在站点的不同部分动态创建的

因此，我想知道如何处理这些问题，而不使用授权来记录


有时，当屏幕上有很多元素时，关注文本框、下拉单击等反应很慢
一种解决方案可能是在创建新元素后绑定对新元素的单击

不必在页面加载上附加所有事件处理程序，您可以在现有元素的单击上创建元素，并在该元素上处理新单击的元素。大概是这样的：


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






JS:


$（函数（）{
$（“#clickme”）。在（'click'，函数（e）{
变量$anotherMain=$（''）；
$（'#main'）。追加（$anotherMain）；
//手柄点击anotherMain
$anotherMain.on（'click'，函数（e）{
变量$anotherMain2=$（''）；
$（'#main'）。追加（$anotherMain2）；
//手柄点击anotherMain
$anotherMain2.on（'click'，函数（e）{
//添加anotherMain3等。
});
})
})
});



创建新元素和绑定其单击的常见功能可以被拉出并重新使用。
一种方法是尽可能靠近对象：
$（“#main”）。on（'click'，'button'，function（）{}）
唯一能包含所有元素的最接近的东西是
#main
，它是文档/正文的子元素，因此我认为它不会对单击事件的分支网络产生太大影响。例如比如说，单击一次
#clickme2
一个
#clickme
的兄弟会追加一个
#另一个click4
，它单击一次追加一个
#另一个click3
？那么我怎么知道是否单击了另一个Click3呢？据我所知，问题是页面加载中没有元素，因此需要使用委派。但是，您正在动态地创建元素，此时，您拥有对已创建元素的引用，因此，您可以单击它进行绑定。

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



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



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



$(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.
            });
        })
    })
});