Click Event delegation from Parent to Child in React.js & Angular.js

Lily Lebec
Dec 6, 2017 · 2 min read

JQuery refers to Event Delegation as “the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated”. It allows us to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent and it analyzes bubbled events from its children components.

Each libraries have their own event delegation methods, we will look into React and Angular.

Click Event Delegation

The app presented above is simple, on our right we have a list of videos (ListVideo.jsx) made up of video entries (ListVideoEntry.jsx). Upon clicking on the title of a ListVideoEntry component, the VideoPlayer is updated with the selected video.

Handling Click events in React is similar to handling click events on the DOM elements. React provides the onClick event listener to which we pass an action to be executed when the click fires up. The event listener is provided as a props (object of properties) to the child component so that every instance is initialized with the event listener.

The App is the parent component passing down the onClick listener to its child component. Below is the code with comments.

Click Event Delegation

The scenario is exactly the same as above, the code is explaining all steps.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade