Is there any way to target two events together in addEventListener?

Question

I am trying to define some hover properties using JavaScript. So, I decided to go with "mouseenter" and "mouseleave" events for an element. Now, I have to call the same function for both the events in addEventListener.

So, is there any way of doing it like:

element.addEventListener("mouseenter" or "mouseleave", myfunc);

`['mouseenter', 'mouseleave'].forEach(type => element.addEventListener(type, myHandler));` — Peter Seliger, Aug 08 '23 at 12:23
Just a heads up, make sure your hover events are only progressive enhancement, otherwise you alienate nearly 60% of web users, if this concerns you. — Keith, Aug 08 '23 at 12:29

score 1 · Answer 1 · answered Aug 08 '23 at 12:24

Well if you need both events, then you should add two event listeners, so the syntax should look like this.

element.addEventListener("mouseenter", func);
element.addEventListener("mouseleave", func);

or

["mouseenter", "mouseleave"].forEach(event => {
  element.addEventListener(event, func);
})

It's the same thing

score 0 · Answer 2 · answered Aug 08 '23 at 12:23

Well you cannot use an "or" to add multiple listeners but you can create one function and add multiple listeners to it. Here is an example:

function myfunc() { 
  console.log("Event is called");
}

element.addEventListener("mouseenter", myfunc);
element.addEventListener("mouseleave", myfunc);

score -1 · Answer 3 · answered Aug 08 '23 at 12:29

-1

For this exact syntax you should override the addEventListener:

{
  let _add;
  [_add, HTMLElement.prototype.addEventListener] = [HTMLElement.prototype.addEventListener, function(name, ...args){
    name.match(/\S+/g).forEach(name => _add.call(this, name, ...args));  
  }];
}

$test.addEventListener('mouseenter mouseleave', e => console.log(e.type));

[id=\$test]{
  width:200px;
  height:150px;
  background:gray;
}

<div id="$test"></div>

An one-liner without overriding:

'mouseenter mouseleave'.split(' ').forEach(name => $test.addEventListener(name, e => console.log(e.type)));

[id=\$test]{
  width:200px;
  height:150px;
  background:gray;
}

<div id="$test"></div>

answered Aug 08 '23 at 12:29

Alexander Nenashev

8,775
2
6
17

Although seems cool, unless it's in the w3c specifications, it's really advised against doing this. (overriding built in prototypes). – Keith Aug 08 '23 at 12:33
@Keith the open-closed principle allows to use this safely comparing to adding new methods to a prototype that could clash with the future JS – Alexander Nenashev Aug 08 '23 at 12:34
No, it's still unsafe. What if `addEventListener` in the future does some modification how `addEventListener` works when passing event name. Eg. they may decide to say add scope to it eg.. `click > span`, or any number of changes. We have been down this route before with major libs causing numerous issues by doing things like this. – Keith Aug 08 '23 at 12:42
@Keith totally agree on that, but seems very unlikely + we could tweak the override later to handle new cases. It's very-very unlikely that `mouseenter mousenter` would mean something different with some future JS standard then we implemented already – Alexander Nenashev Aug 08 '23 at 12:44
@Keith unless you change the default behavior i didn't encounter any problems in 23 years with JS with 3rd party libs. here we don't change the default behavior – Alexander Nenashev Aug 08 '23 at 12:45
But you are changing the default behaviour. And if say in the future you used any 3rd party libs that depended on the new `eventName` changes I just pointed out, it would break. Of course it's highly unlikely this change will happen I agree, but unless you are polyfilling built-ins it's just way safer to avoid. We all remember mootools and `Array.contains` I assume.. :) – Keith Aug 08 '23 at 13:04
@Keith `contains` was a new method which is a failure from the beginning since JS is open to add new methods, so the example isn't related to the case – Alexander Nenashev Aug 08 '23 at 13:06
@Keith also overriding prototypes is no-no for libs, only for final projects – Alexander Nenashev Aug 08 '23 at 13:11
1

Yes, it was a failure because Mootools in there infinite wisdom thought modifying built in prototype was a good idea. Your modifying how a built in prototype works, it might seem trivial, but it can cause issues that are hard to debug. Anyway, it's totally up to you if you want to go down this dangerous route, I've explained how what you have done could in theory fail in the future. – Keith Aug 08 '23 at 13:13
@Keith i don't promote overriding prototypes, just an example how to achieve the OP's desired syntax – Alexander Nenashev Aug 08 '23 at 13:17

Is there any way to target two events together in addEventListener?

3 Answers3