javascript - 动态地将事件监听器添加到新添加的类中

Question

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

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');
        }
    }
}

只要单击“添加待办事项”，就会运行这整行代码。

Answer 1

事件委托(delegate)是前进的方向。它的原理非常简单，事件监听器附加到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 还可用于验证元素与给定选择器匹配。

The Element.matches() method returns true if the element would be selected by the specified selector string; otherwise, returns false.

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