JavaScript Occasion.defaultPrevented

Whether or not you began with the previous on_____ property or addEventListener, that occasions drive consumer experiences in trendy JavaScript. Should you’ve labored with occasions, that preventDefault() and stopPropagation() are incessantly used to deal with occasions. One factor you in all probability did not know: there is a defaultPrevented proptery on occasions!

Contemplate the next block of code:

// Particular to a hyperlink
const hyperlink = doc.querySelector('#my-link');
hyperlink.addEventListener('click on', e => e.preventDefault());

// A bigger doc scope
doc.addEventListener('click on', documentClickHandler);
perform documentClickHandler(occasion) {
    if (occasion.defaultPrevented) {// Utilizing the property
        // Do one factor if the clicking has been dealt with
    }
    else {
        // In any other case do one thing contemporary
    }
}

When preventDefault known as on a given occasion, the defaultPrevented property will get toggled to true. As a result of occasion propagation, the occasion bubbles upward with this defaultPrevented worth.

I have been dealing with occasions for 20 years and did not know this property existed till now. What’s nice about defaultPrevented is that it stays with the occasion with no need to trace monitor it globally!