event

Estimated reading time: 1 minute
  • Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired

addEventListener

target.addEventListener(type, listener[, options]);

var doc = document.getElementById('btn-me');

doc.addEventListener('click', (e) => {
  var test = document.getElementById('profile');
  test.style.color = 'green';
});

target & currentTarget

  • currentTarget return element which attached event handler
  • target retuen element which clicked element inside event handler attached element

currentTarget

mainArea.addEventListener('click', (e) => {
  let attachEle = e.currentTarget;
  attachEle.classList.toggle('boss');
  console.log(attachEle);
});

target

mainAreaTwo.addEventListener('click', (e) => {
  let clickTargetEle = e.target;
  clickTargetEle.classList.toggle('boss');
  console.log(clickTargetEle);
});
dom, js