CODEWITHSUNDEEP
javascriptdomdom-eventsevent-delegation
Scott Mitchell
Scott Mitchell

Reputation: 698

Native JS equivalent to jQuery delegation

What is the native implementation for event delegation on dynamically created dom elements?

I tried looking at the jQuery source but I can't follow the .on method.

Note: Currently I attach the event handlers after the dom elements are created, which seems pretty standard but I like the way jQuery .on handles dynamically created elements events with this syntax $( document ).on( "click", ".selector", handler );.

Upvotes: 20

Views: 8930

Answers (7)

Project Mayhem
Project Mayhem

Reputation: 529

Pure javascript code;

document.addEventListener("click", function (event) {
  if (event.target.classList.contains("yourClass1")) {
    //do something
  }
  if (event.target.classList.contains("yourclass2")) {
    //do something
  }
  if (event.target.id == "yourId") {
     //do something
  }
});

Upvotes: 0

Julesezaar
Julesezaar

Reputation: 3396

Instead of this JQuery

$(document).on('click', '.your-selector', function() {
    // do something
});

I use this often in pure javascript

document.addEventListener('click', function(e) {
    // e.target can be a sub element of the one we want
    const el = e.target ? e.target.closest('.your-selector') : null;
    if (el) {
        // do something
    }
});

Tip: "closest" in javascript includes the element itself in the first place, and then starts to go up in the DOM

Upvotes: 1

Endless
Endless

Reputation: 37806

Felt like doing some code golfing ;)

108 bytes (based on @Bergi)

(e,d,g,h,b)=>e.addEventListener(d,c=>{for(d=e,b=c.target;b!=d;)b.matches(g)?h.call(d=b,c,b):b=b.parentNode})

Working demo:

window.$on = (e,d,g,h,b)=>e.addEventListener(d,c=>{for(d=e,b=c.target;b!=d;)b.matches(g)?h.call(d=b,c,b):b=b.parentNode})

$on(document.body, 'click', '.clickable', (evt, matched) => {
  console.log(matched)
})
<div class="wrapper">
  <div class="not-clickable rect">
    not clickable
  </div>
  <div class="clickable rect">
    clickable
  </div>
  <div class="clickable rect">
    clickable
    <div class="child">child element</div>
  </div>
</div>

<style>
.rect {
  width: 100px;
  height: 100px;
  background: red;
  border: 1px solid;
  margin: 10px;
  float: left;
}

.child {
  background: gray;
}
</style>

Upvotes: 1

Emrah Tuncel
Emrah Tuncel

Reputation: 749

For example, we have such an html structure. 

<ul>
    <li>
        item 1
        <button class="btn-edit"><i class="fas fa-pencil"></i></button>
    </li>
    <li>
        item 3
        <button class="btn-edit"><i class="fas fa-pencil"></i></button>
    </li>
    <li>
        item 3
        <button class="btn-edit"><i class="fas fa-pencil"></i></button>
    </li>
</ul>

Note that there is an i tag inside the button.

If you want to capture exactly the right item for the Click event, you need a function like the one below.

function delegateClick(selector, callback){

    let selectorItems = document.querySelectorAll(selector);

    document.addEventListener('click', function(e){

        let clickedItems = e.path;

        for(let clickedItem of clickedItems){
            for(let selectorItem of selectorItems){
                if(clickedItem === selectorItem){

                    callback(clickedItem);

                }
            }
        }

    });
}

This offers a very similar use to jquery.

delegateClick('.btn-edit', (elm) => {

    //access the clicked DOM element
    elm;       

});

Upvotes: -1

Vaibhav Nigam
Vaibhav Nigam

Reputation: 1467

Event delegation can be achieved even without iterating through all ancestors of event target.

$(document).on("click", selector, handler);

can be written in NativeJS as:

document.addEventListener("click", event => {
  var el = document.querySelector(selector);
  if (el && el.contains(event.target)) {
    handler.call(el, event);
  }
});

Upvotes: 4

Data Crusader
Data Crusader

Reputation: 434

This should do it for you on a regular HTML element:

HTMLElement.prototype.on = function(event, selector, handler) {
    this.addEventListener(event, function(e) {
        let target = e.target;
        if (typeof(selector) === 'string') {
            while (!target.matches(selector) && target !== this) {
                target = target.parentElement;
            }

            if (target.matches(selector))
                handler.call(target, e);
        } else {
                selector.call(this, e);
        }
    });
};

Upvotes: 4

Bergi
Bergi

Reputation: 664444

What happens is basically this:

// $(document).on("click", <selector>, handler)
document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches(<selector>)) {
            handler.call(target, e);
            break;
        }
    }
}, false);

However, e.currentTarget is document when the handler is called, and e.stop[Immediate]Propagation() will work differently. jQuery abstracts over that (including call order) a lot.

I've used the .matches() method, which is not yet standard but already available under different names in modern browsers. You might use a custom predicate to test elements instead of a selector. And addEventListener is obviously not oldIE-compatible.

Upvotes: 30

Related Questions