JavaScript:在onlick事件定义后添加

Question

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

我正在处理的项目中的HTML元素是用hyperscript创建的。

在创建元素的文件中：

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

在另一个文件中，有一个控制用户创建幻灯片的变量。但是，有多个项的类名都是a.block，我希望变量update应用于所有这些项。

我已经尝试了以下代码：

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

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

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)的事件中，允许您在特定元素上拥有一个或多个特定类型的事件处理程序。