JavaScript: Add an event listener to an element with the ability to use event delegation
JavaScript fundamental (ES6 Syntax): Exercise-95 with Solution
Write a JavaScript program to add an event listener to an element with the ability to use event delegation.
- Use EventTarget.addEventListener() to add an event listener to an element.
- If there is a target property supplied to the options object, ensure the event target matches the target specified and then invoke the callback by supplying the correct this context.
- Omit opts to default to non-delegation behavior and event bubbling.
- Returns a reference to the custom delegator function, in order to be possible to use with off.
Sample Solution:
JavaScript Code:
//#Source https://bit.ly/2neWfJ2
const on = (el, evt, fn, opts = {}) => {
const delegatorFn = e => e.target.matches(opts.target) && fn.call(e.target, e);
el.addEventListener(evt, opts.target ? delegatorFn : fn, opts.options || false);
if (opts.target) return delegatorFn;
};
const fn = () => console.log('!');
console.log(on(document.body, 'click', fn));
console.log(on(document.body, 'click', fn, { target: 'p' }));
console.log(on(document.body, 'click', fn, { options: true }));
Sample Output:
undefined undefined undefined
Flowchart:

Live Demo:
See the Pen javascript-basic-exercise-95-1 by w3resource (@w3resource) on CodePen.
Improve this sample solution and post your code through Disqus
Previous: Write a JavaScript program to move the specified amount of elements to the end of the array.
Next: Write a JavaScript program to pick the key-value pairs corresponding to the given keys from an object.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends
- Python Interview Questions and Answers: Comprehensive Guide
- Scala Exercises, Practice, Solution
- Kotlin Exercises practice with solution
- MongoDB Exercises, Practice, Solution
- SQL Exercises, Practice, Solution - JOINS
- Java Basic Programming Exercises
- SQL Subqueries
- Adventureworks Database Exercises
- C# Sharp Basic Exercises
- SQL COUNT() with distinct
- JavaScript String Exercises
- JavaScript HTML Form Validation
- Java Collection Exercises
- SQL COUNT() function
- SQL Inner Join