Event listeners and event object

addEventListener

Anonymus function

button = document.querySelector('.btn');

button.addEventListener('click', function(e){
    console.log('Hello World');
    e.preventDefault();
});

Named function

button = document.querySelector('.btn');

button.addEventListener('click', onClick);

function onClick(e){
    console.log('Hello World');
    e.preventDefault();
}

Change button’s text on click

button = document.querySelector('.btn');

button.addEventListener('click', onClick);

function onClick(e){
    e.target.innerText = 'Hello';
}

clearTasks = document.querySelector('.clear-tasks');

clearTasks.addEventListener('click', onClick);

function onClick(e){
    let val;

    val = e;

    // Event target element

    val = e.target;
    val = e.target.id;
    val = e.target.className;
    val = e.target.classList;

    // Event typeof
    val = e.type;

    // Timestamp
    val = e.timeStamp;

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

    // Coords event relative to the element
    val = e.offsetY;
    val = e.offsetX;

    console.log(val);
}