将侦听器附加到多个子元素 [英] Attach listener to multiple children elements

问题描述

我正在尝试摆脱页面中的jquery，并将某些功能重写为纯js. 有2个班级工作清单，其中包含几个li元素.每个li元素都应具有单击动作，以向其添加活动"类.在jquery中，它非常简单:

Im trying to get rid of jquery from my page and rewriting some functionalities to pure js. There are 2 lists with class work, containing few li elements. Each li element should have an action on click to add class 'active' to it. In jquery it is very simple:

$('.work li').on('click', function () {
            var that = $(this);
            that.parent().find('li.active').removeClass('active');
            $(this).addClass('active');
        })

在纯js中是否有更好的解决方案，而不是通过嵌套循环来完成类似的事情:

Is there a nicer solution in pure js rather than making something like this with nested loops:

    var lists = document.getElementsByClassName('work');
    for(var i=0; i<lists.length; i++){
       var children = lists[i].querySelectorAll('li');
       for(var j=0; j<children.length;j++){
        children[j].addEventListener();
       }
    }

推荐答案

有2个类作业列表，其中包含几个li元素.每个李 元素应点击一下，以向其添加活动"类.

There are 2 lists with class work, containing few li elements. Each li element should have an action on click to add class 'active' to it.

您可以通过将事件侦听器添加到querySelectorAll返回的所有li中来创建全部功能. querySelectorAll返回一个nodeList而不是一个数组，因此需要对其进行映射以进行迭代.但是，请注意，我们仍在迭代该集合.

You could create that entire functionality by adding an event listener to all lis returned by the querySelectorAll. The querySelectorAll returns a nodeList and not an array, so need to map it in order to iterate it. However, note that we are still iterating the set.

示例代码段 :

Example Snippet:

var lists = document.querySelectorAll(".work li"), 
    doSomething = function() {
        [].map.call(lists, function(elem) { elem.classList.remove("active") });
        this.classList.add("active");
    };
[].map.call(lists, function(elem) {
    elem.addEventListener("click", doSomething, false);
});

li { cursor: pointer; }
.active { background-color: yellow; }

<ul class="work"><li>One</li><li>Two</li><li>Three</li></ul>
<ul class="work"><li>Four</li><li>Five</li><li>Six</li></ul>

实际上，您还可以使用事件委托并仅在ul上添加事件侦听器，然后使用event.target来处理例程.这比在每个li上添加事件侦听器要好得多，以防它们很多.处理器的数量将与ul一样多.

In fact you could also use event delegation and add event listener only on the ul and then use the event.target to handle your routine. This is better than adding an event listener to each and every li, in case there are many of them. There will be only as many handlers as uls.

在纯js中是否有更好的解决方案，而不是像 带有嵌套循环

Is there a nicer solution in pure js rather than making something like this with nested loops

并非如此.无论如何，您都必须遍历元素集.是的，爵士乐方面更好.在避免循环方面更好，没有.在效率方面更好，是的.将上面的普通javascript代码与jQuery代码进行比较:

Not really. You have to iterate over the set of elements anyway. Nicer in terms of jazzy, yes. Nicer in terms of avoiding the loops, no. Nicer in terms of efficiency, well yes. Compare the above vanilla javascript code with the jQuery one in your question:

$('.work li').on('click', function () { // internally will iterate and add listener to each li
    var that = $(this);
    that.parent().find('li.active').removeClass('active'); // go to parent and then find li
    $(this).addClass('active');
});

.

这篇关于将侦听器附加到多个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！