如何处理多个事件侦听器

How to handle more than one eventListener?

本文关键字：事件 侦听器 处理 何处理      更新时间：2023-09-26

我有两个这样的div：

  <div id="sun"  > </div>  <div  id="thu" > </div>

我想一旦其中一个点击了eventListener：

document.getElementById(currentId).addEventListener("click",function(e){});

在知道div 的 ID 的情况下触发选定的一个。

你需要这个： 

function eventHandler(e) {
   //what needs to be done after user clicks the divs will come here
}
document.getElementById('sun').addEventListener("click", eventHandler, false);
document.getElementById('thu').addEventListener("click", eventHandler, false);

这真的很简单。基本上，事件回调函数的上下文是单击的实际 html 元素。因此，"this"选择器是事件的实际来源。 

document.getElementById(currentId).addEventListener("click",function(e){
        var id=this.getAttribute('id');
});

循环访问元素并向它们添加 onclick 事件。或者只是单独添加侦听器。

document.querySelectorAll("#sun, #thu").forEach(el =>
    el.onclick = () => {
        console.log(el.id) 
    }
);

我认为您正在为两个div寻找一个共同的事件处理程序。

如果是，那么您可以通过为两个div 提供公共类，然后通过类选择器注册事件处理程序来实现这一点，如下所示：

网页代码：

<div id="sun" class="myClass"> </div> 
<div id="thu" class="myClass" > </div>

Java脚本代码：

var classname = document.getElementsByClassName("myClass");
 for(var i=0;i<classname.length;i++){
        classname[i].addEventListener('click', event_handler_name, false);
    }

或

$('.myClass').click(event_handler_name);

jQuery为你做了循环部分，就像你需要在普通的javascript中做的那样。

相关文章：