Click event in plain JavaScript

Question

How to know the id of current Html element when clicking on a Html element using plain JavaScript?

<div id="myId">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>

I would like to catch "myId" while I am clicking on the body of this div. That means I would like to get the ID of parent div when I click on First Div and Second Div .

My JS code is like below.

document.onclick = function(e) {
   alert(e.target.id)
}

Answer 1

event.currentTarget将是触发事件的dom元素。

Answer 2

You can do that in the following way:

 var div = document.getElementById('myId'); div.addEventListener('click', function(e){ console.log(this.getAttribute('id')) }); 

 <div id="myId"> <div> <h2>First Div</h2> </div> <div> <h2>Second Div</h2> </div> </div> 

Answer 3

You can do it like this in vanilla JS, register an event handler on the document and retrieve the id of the clicked element:

 document.addEventListener("click", function(e){ alert(e.srcElement.id); }); 

 <p id="paragraph1">First Paragraph</p> <button id="myButton">Click Me</button> 

Answer 4

You can just write a function:

function showid(elem) { 
    var id = elem.id
    console.log(id)
    alert(id)
}

And in your HTML code:

<div id="myId" onclick="showid(this)">
  <div>
    <h2>First Div</h2>
  </div>
  <div>
    <h2>Second Div</h2>
  </div>
</div>