Question

是否可以使用事件委派只有一个addEventListener

＆＃13;

// Get  button

var btnAll = document.getElementById('btnAll');
var btnUrfa = document.getElementById('btnUrfa');
var btnRookies = document.getElementById('btnRookies');


// Listen for button click
btnAll.addEventListener('click', fetchAll);
btnUrfa.addEventListener('click', fetchUrfa);
btnRookies.addEventListener('click', fetchRookies);


function fetchAll() {
    $.getJSON('/fetchDataAll', function (data) {
        $("#show").empty();
        $.each(data.result, function () {
            $("#show").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataAll01', function (data) {
        $("#show01").empty();
        $.each(data.result, function () {
            $("#show01").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataAll1', function (data) {
        $("#show1").empty();
        $.each(data.result, function () {
            $("#show1").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });


    $.getJSON('/fetchDataAll11', function (data) {
        $("#show11").empty();
        $.each(data.result, function () {
            $("#show11").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });

}

function fetchRookies() {
    $.getJSON('/fetchDataRookies', function (data) {
        $("#show").empty();
        $.each(data.result, function () {
            $("#show").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataRookies01', function (data) {
        $("#show01").empty();
        $.each(data.result, function () {
            $("#show01").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataRookies1', function (data) {
        $("#show1").empty();
        $.each(data.result, function () {
            $("#show1").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });


    $.getJSON('/fetchDataRookies11', function (data) {
        $("#show11").empty();
        $.each(data.result, function () {
            $("#show11").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });

}
function fetchUrfa() {
    $.getJSON('/fetchDataUrfa', function (data) {
        $("#show").empty();
        $.each(data.result, function () {
            $("#show").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataUrfa01', function (data) {
        $("#show01").empty();
        $.each(data.result, function () {
            $("#show01").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

        });
    });

    $.getJSON('/fetchDataUrfa1', function (data) {
        $("#show1").empty();
        $.each(data.result, function () {
            $("#show1").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });


    $.getJSON('/fetchDataUrfa11', function (data) {
        $("#show11").empty();
        $.each(data.result, function () {
            $("#show11").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
                "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
                "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

        });
    });
}

////// gettting data on first load

$.getJSON('/fetchDataAll', function (data) {
    $("#show").empty();
    $.each(data.result, function () {
        $("#show").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
            "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
            "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

    });
});

$.getJSON('/fetchDataAll01', function (data) {
    $("#show01").empty();
    $.each(data.result, function () {
        $("#show01").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
            "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
            "<h3 style='color:#66FF13'>+" + this['scoreChange'] + " %</h3>");

    });
});

$.getJSON('/fetchDataAll1', function (data) {
    $("#show1").empty();
    $.each(data.result, function () {
        $("#show1").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
            "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
            "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

    });
});


$.getJSON('/fetchDataAll11', function (data) {
    $("#show11").empty();
    $.each(data.result, function () {
        $("#show11").append("<p style='color:#FFFFFF'>" + this['playerName'] + "</p>",
            "<p style='color:#FFFFFF'>" + this['teamName'] + "</p>",
            "<h3 style='color:#D0021B'>" + this['scoreChange'] + " %</h3>");

    });
});

＆＃13;

Answer 1

特别是在处理动态内容时，直接将事件处理程序绑定到新插入的元素会非常耗费资源，这会对您的运行时行为产生负面影响。

你可以做的是将事件处理程序绑定到一个共同的祖先元素（例如包装div甚至是document.body。你需要做的就是给每个必须激活的元素在您的活动中使用单独的类名来正确识别它们。

示例：

<body>
    <div class="clickactive">
        <img src="...">    
    </div>
    <!-- ... some more dynamic "clickactive" elements -->
</body>

在你的js中，你只需做这样的事情：

$(document.body).click(function(e){
    if ($(e.target).closest(".clickactive").length > 0){
       // handle your click on $(e.target).closest[0]
    }
}

那样，你

不必担心为每个新插入的元素反复应用事件处理程序
您只激活一个事件处理程序

然而，

缺点（特别是当绑定到正文时）：每次在绑定事件处理程序的元素中单击任何元素时，都会调用您的单击（当然，条件为false并且不执行该代码，但无论如何都要评估条件。所以最好的做法是绑定到最近的共同祖先。

如何使用事件委派减少`addEventListener`的数量。的JavaScript

1 个答案: