Javascript 将Addeventlistener动态添加到新添加的类

好的，我有一个用JS创建的待办事项应用程序。我有一个addtodo函数，它可以在单击时添加项目，还可以为每个列表元素运行for循环，这些元素的类名为“list”，以设置它们的样式。问题是，每次我添加todo列表时，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');
        }
    }
}

var theListPara=document.getElementsByClassName（'thevalue'）；
如果（列表第[0]段）{
对于（变量i=0；i

---

每当单击AddTodo时，这整行代码都会运行。

事件委派是前进的方向。它的原理非常简单，事件监听器连接到静态父元素，然后分析冒泡的

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

API还可用于验证元素是否与给定选择器匹配

如果指定的选择器字符串将选择元素，则

Element.matches（）

方法返回true；否则，返回false

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