Question

好的，我有一个用JS创建的todo应用程序。我有一个addtodo函数，它在单击时添加项目，并为每个列表元素运行for循环，这些列表元素的类名为＆＃39; list＆＃39;，用于设置它们的样式。问题是，每当我添加待办事项列表时，for循环就会运行，我认为这些事件会为具有相同功能的现有项目添加多个事件侦听器。我在点击类名为＆＃39; thevalue＆＃39;的段落时尝试切换类的优先级功能。我的问题是事件监听器多次运行并取消切换。第一项运行一次，这是正确的，第二项运行，两次，第三项运行三次，如下所示。我将附上以下代码。如果你能解决我的问题，那将会很有帮助。

var theListPara = document.getElementsByClassName('thevalue');

if (theListPara[0]) {
    for (var i = 0; i < theListPara.length; i++) {
        theListPara[i].addEventListener("click", changePriority);
    }

    function changePriority() {
        var theClassName = this.parentElement.classList.contains('normal');

        if (theClassName) {
            this.parentElement.classList.toggle('high');
        }
    }
}

只要单击add todo，就会运行整行代码。

Answer 1

事件代表团是前进的方向。它的理念很简单，事件监听器附加到 static-parent-element 然后它分析冒泡的event.target。如果找到匹配，则可以执行所需的操作。

document.querySelector('.static-parent-element').addEventListener("click", function(e) {
    if(e.target && e.target.classList.contains('thevalue')) {
        // thevalue item found
        if (this.parentElement.classList.contains('normal')) {
            this.parentElement.classList.toggle('high');
        }
    }
});

Element.matches() API还可用于验证元素与给定选择器匹配。

如果指定的选择器字符串选择了该元素，则Element.matches()方法返回 true ;否则，返回 false 。

if(e.target.matches('.thevalue')){
}

Addeventlistener动态地添加到新添加的类

1 个答案: