点击javascript中的等效元素

Question

使用javascript相当于以下jquery代码？

$("#id").on("click",function(event){alert(event.target.id);});

我知道我可以使用以下代码

document.addEventListener('click', function(e) { alert(e.target.id)  }, false);

但我想将它限制在一个特定的id而不是整个文档。

Answer 1

要在由id选择的元素上附加事件处理程序，您可以执行以下操作：

document.getElementById('id').addEventListener('click', function(e) { 
   alert(e.target.id)  
}, false);

n.b。最后的false是来自MDN的可选参数bool for capture：

  

如果为true，则useCapture表示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到已注册的侦听器，然后再分派到DOM树中它下面的任何EventTarget。向上冒泡树的事件不会触发指定使用捕获的侦听器。

Answer 2

这样做

document.getElementById('id').addEventListener('click',
function(e) 
{
    alert(e.target.id);
}, false);

最后一个参数是useCapture。

参考 - W3SCHOOLS

true - 该函数在捕获阶段执行。

false - 该函数在冒泡阶段执行。的（默认）

现在无需担心所有浏览器中的可选。

Answer 3

按ID获取元素并附加事件列表

document.getElementById('id').addEventListener('click', function(e) { 
  alert(e.target.id) 
}, false);

最后使用boolean是可选的。一个布尔值，指定是在捕获阶段还是在冒泡阶段执行事件。

更多信息 - addEventListener

Answer 4

试试这个：

var id = document.getElementById("id");

id.addEventListener("click", function(e) {
    alert("hi");
},false);