The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Event Delegation with RxJS

Event Delegation with RxJS

6:17
Event delegation is an extremely powerful technique. It allows you to use a single event handler to listen to events on any number of child elements. It also has the added benefit of working with dynamically added elements without even a single line of additional code. Libraries such as jQuery offer this feature right out of the box, but with RxJS and the `fromEvent` helper, we’ll need to utilise the `selector` function to achieve the same result. NOTE: The `element.closest` method shown in this video required a polyfill for older version of IE which can be found here https://github.com/jonathantneal/closest
Watch this lesson now
Avatar
egghead.io

Event delegation is an extremely powerful technique. It allows you to use a single event handler to listen to events on any number of child elements. It also has the added benefit of working with dynamically added elements without even a single line of additional code. Libraries such as jQuery offer this feature right out of the box, but with RxJS and the fromEvent helper, we’ll need to utilise the selector function to achieve the same result. NOTE: The element.closest method shown in this video required a polyfill for older version of IE which can be found here https://github.com/jonathantneal/closest

Avatar
Dmitry

Good example, but why just not filtering the event itself? like:

const wrapperEl = document.getElementById('wrapper');
const click$ = Rx.Observable.fromEvent(wrapperEl, 'click');

click$.filter((ev) => {
    return ev.target instanceof HTMLButtonElement;
  })

"closest" function will give you more logic than filtering exact target element.

Avatar
Michael Russell

Looks like the jsbin embedded needs a pro account to be viewable :/

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?