JavaScript Occasion.defaultPrevented

Whether or not you began with the previous on_____ property or addEventListener, you understand that occasions drive consumer experiences in fashionable JavaScript. Should you’ve labored with occasions, you understand that preventDefault() and stopPropagation() are ceaselessly 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 recent

When preventDefault is named on a given occasion, the defaultPrevented property will get toggled to true. Because of occasion propagation, the occasion bubbles upward with this defaultPrevented worth.

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

  • MooTools Flashlight Effect
  • MooTools Zebra Tables Plugin

    Tabular knowledge can oftentimes be boring, but it surely does not have to look that approach! With a small MooTools class, I could make tabular knowledge extraordinarily straightforward to learn by implementing “zebra” tables — tables with alternating row background colours. The CSS The above CSS is extraordinarily fundamental.


Leave a Reply

Your email address will not be published.