JavaScript：在定义后添加onclick事件

Question

我有一个HTML元素，在其创建时已定义了onClick()事件。由于代码后面发生的事件，我需要添加而不是替换该`onClick()`事件。

项目中的HTML元素是在hyperscript中创建的。

在创建该元素的文件中：

            h('a.block-current',
            {
              onclick: ev => {
                this.clickResult();
              },
            },
            resultNode,
          ),

在另一个文件中，有一个变量控制用户创建的幻灯片。但是，有多个具有类名a.block的项目，我希望变量更新适用于它们所有。

我尝试了以下代码：

const results = document.querySelectorAll('a.block');
results.onClick() {
   ....
}

但这会覆盖先前定义的onClick事件。

- AkalUstat

Answer 1

您可以使用 addEventListener 来实现您需要的功能，具体操作如下：

const results = document.querySelectorAll('a.block');

/* Iterate nodes of "results" NodeList */
for(let result of results) {

    /* Add a new click handler to the current node in the selected node list */
    result.addEventListner('click', function(event) {

      console.log('New event listener added');
    });
}

这种添加事件处理程序的方法确实可以实现此操作——它将新的处理程序添加到特定类型（例如click）的事件中，使您能够在特定元素上拥有一个或多个特定类型的事件处理程序。

- Dacre Denny

---

那么，如果我稍后添加一个事件监听器，它不会覆盖 onClick 吗？ - AkalUstat

正确的做法是为该元素添加另一个事件处理程序。 - Dacre Denny