如何处理多个eventListener？

Question

我有两个这样的 div :

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

我想要他们中的一个点击

eventListener

：

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

触发知道 div 的 id 的选定对象。

Answer 1

你需要这个：

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

Answer 2

真的很简单。基本上，事件回调函数的上下文是被单击的实际 html 元素。所以“this”选择器是事件的实际来源。

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

Answer 3

循环遍历元素并向它们添加一个 onclick 事件。或者只是单独添加监听器。

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

Answer 4

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

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

HTML代码：

<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 中完成。