Event Listeners & The Event Object

Event listener with anonymous function

document.querySelector('.clear-tasks').addEventListener('click',
function(e) {
  console.log('Hello World');

  //e.preventDefault();
});

- it is the event from the button

- 'e' is the event object

- 'e.preventDefault()' let the default behavior written in HTML does not make an effect

Event listener with named function

document.querySelector('.clear-tasks').addEventListener('click', onClick);

function onClick(e) {
	console.log('Clicked');
}

- this way of coding looks cleaner over anonymous function

★Event target element

- event target element is really important especially in 'event deligation'

- it is the element that event was happened

document.querySelector('.clear-tasks').addEventListener('click', onClick);

function onClick(e) {
  let val = e;
  
  // Event target element; the element that event was happened
  val = e.target;
  val = e.target.id;
  val = e.target.className;
  val = e.target.classList;
  e.target.innerText = 'Hello'; // change the button text content

  console.log(val);
}

Event Type

- e.type;

TimeStamp

- e.timeStamp;

Coordinates event relative to the window

- e.clientY;

- e.clientX;

Coordinates event relative to the element

- e.offsetY;

- e.offsetX;

document.querySelector('.clear-tasks').addEventListener('click', onClick);

function onClick(e) {
  let val = e;

  // Event type
  val = e.type;

  // TimeStamp
  val = e.timeStamp;

  // Coordinates event relative to the window
  val = e.clientY;
  val = e.clientX;

  // Coordinates event relative to the elemnent
  val = e.offsetY;
  val = e.offsetX;

  console.log(val);
}