e.target meaning code example

Example 1: event target javascript

Using the event.target property together with the element.tagName property to find out which element triggered a specified event:

<body onclick="myFunction(event)">
<p>Click on any elements in this document to find out which element triggered the onclick event.</p>
<h1>This is a heading</h1>
<button>This is a button</button>
<p id="demo"></p>

<script>
function myFunction(event) { 
  var x = event.target;
  document.getElementById("demo").innerHTML = "Triggered by a " + x.tagName + " element";
}
</script>

Example 2: javascript .target

// Make a list
const ul = document.createElement('ul');
document.body.appendChild(ul);

const li1 = document.createElement('li');
const li2 = document.createElement('li');
ul.appendChild(li1);
ul.appendChild(li2);

function hide(evt) {
  // e.target refers to the clicked <li> element
  // This is different than e.currentTarget, which would refer to the parent <ul> in this context
  evt.target.style.visibility = 'hidden';
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);

Tags:

Html Example

Recent Posts