Add event listener
In order to add an event listener to an element, you can use the EventTarget.addEventListener() method. Yet, in some cases, adding a listener for every single element can be a bit of a performance hit. In these cases, you can use event delegation to add a single event listener to a parent element and then check if the event target matches the target you’re looking for.
Implementing a reusable function, on, that supports event delegation isn’t all that complicated. Apart from an element, an event and a callback function, we’ll need to pass an options object to the function.
This object will contain a target property, which will be used to check if the event target matches the target specified. If it does, we’ll invoke the callback by supplying the correct this context. If no target value is supplied, the event listener will be added to the element itself.
Additionally, EventTarget.addEventListener() expects an optional options object, which we can nest inside our own options object. This will allow us to further customize the event listener’s behavior.
代码实现
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('!');
on(document.body, 'click', fn);
// logs '!' upon clicking the `body` element
on(document.body, 'click', fn, { target: 'p' });
// logs '!' upon clicking a `p` element child of the `body` element
on(document.body, 'click', fn, { options: true });
// logs '!' upon clicking on the `body` element,
// but uses capturing instead of bubbling
on(document.body, 'click', fn, { target: 'p', options: { once: true} });
// logs '!' upon clicking a `p` element child of the `body` element,
// but only onceRemove event listener
Removing an event listener from an element is as easy as adding one, maybe even easier. You can use the EventTarget.removeEventListener() method to remove an event listener from an element.
Defining a reusable function, off, for listener removal is pretty simple. Our only concern is keeping the function signature consistent with the one we used for adding an event listener. This means we’ll need to pass the same arguments to the function.
One key element of the on function we defined previously is that it returns a reference to the custom delegator function. This means that we can use the returned value to remove the event listener via our new function.
使用样例
const off = (el, evt, fn, opts = false) =>
el.removeEventListener(evt, fn, opts);
const fn = () => console.log('!');
document.body.addEventListener('click', fn);
off(document.body, 'click', fn);
// no longer logs '!' upon clicking on the page
const delegatorFn =
on(document.body, 'click', fn, { target: 'p' });
off(document.body, 'click', delegatorFn);
// no longer logs '!' upon clicking a `p` element child of the `body` element
const delegatorFnCapturing =
on(document.body, 'click', fn, { options: true });
off(document.body, 'click', delegatorFnCapturing, { options: true });
// no longer logs '!' upon clicking on the page
// (capturing instead of bubbling example)Notes
These functions are written in a way that somewhat mimics jQuery’s on and off methods. They are not meant as a replacement, but rather as a way to use a similar syntax without having to include jQuery in your project.
翻译自：https://www.30secondsofcode.org/js/s/add-remove-event-listener
