How to simplify javascript event listeners?

Question

What I want to achieve is, when hovering over the li with id="a", the corresponding ul with id="aa" appears. I have this html code:

<ul>
  <li id="1">Option1</li>
  <li id="2">Option2</li>
</ul>
<ul id="11">
  <li>Option1.1</li>
  <li>Option1.2</li>
</ul>
<ul id="22">
  <li>Option2.1</li>
  <li>Option2.2</li>
</ul>

and this javascript code:

for (i=1; i<3; i++) {
  var fn = (function(i) {
    var li = document.getElementById(i);
    var ul = document.getElementById("" + i + i);
    li.addEventListener("mouseover", function() {
      ul.style.opacity = "1";
    }, false);
  })(i);
}

and it works as expected, but here the user Jordan Gray stated that it is possible to get rid of the loop and instead create one event listener for all list items - that is what I would like to achieve here. Unfortunately I do not understand his code and would be thankful if anyone could explain it to me or suggest a solution.

[Don't use numbers as `id`s](https://stackoverflow.com/q/7987636/1048572). — Bergi, Aug 14 '17 at 14:44
Read [What is DOM Event delegation?](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) — Bergi, Aug 14 '17 at 14:46
@Bergi HTML5 spec now allows for number-only IDs ([old spec](https://www.w3.org/TR/html401/types.html#type-name) and [new spec](https://www.w3.org/TR/html5/dom.html#the-id-attribute)) — Joseph Marikle, Aug 14 '17 at 14:59
@JosephMarikle Yes, it's mentioned in the answers I linked (and all browsers accept it), but still I think it's not a good practice. — Bergi, Aug 14 '17 at 15:01
@Bergi I agree that from a coding style it feels more correct to preface ids with a string, and there are advantages to avoiding IDs that consist of a number only, but it's ultimately a stylistic preference at this point. It will not cause any errors provided there are no spaces and there are no duplicates within a single document. The problem is that those answers simply state that it's not allowed by the spec. That's not entirely helpful anymore because the spec has changed. — Joseph Marikle, Aug 14 '17 at 15:09

score 1 · Accepted Answer · answered Aug 14 '17 at 14:47

Here is how you can use that logic in your code:

var ul = document.getElementById('ul-id');

ul.addEventListener('mouseover', function(e) {
  
  if (e.target.nodeName.toUpperCase() !== "LI") return;
  document.getElementById("" + e.target.id + e.target.id).style.opacity = "0.6";
});

<ul id="ul-id">
  <li id="1">Option1</li>
  <li id="2">Option2</li>
</ul>
<ul id="11">
  <li>Option1.1</li>
  <li>Option1.2</li>
</ul>
<ul id="22">
  <li>Option2.1</li>
  <li>Option2.2</li>
</ul>

Ulysse BN · Answer 2 · 2017-08-14T15:14:22.973

You can add an event listener for the parent ul and ase the target element in this listener in order to know on which li it triggered.

ctn.addEventListener('mouseover', function(event) {
    // eventually safeguard it with: if (event.target.tagName !== 'LI') return
    id = event.target.id.repeat(2)
    document.getElementById(id).style.opacity = 1
}, false);

.passive {
    opacity: 0;
}

<ul id="ctn">
    <li id="a">Option1</li>
    <li id="b">Option2</li>
</ul>
<ul id="aa" class="passive">
    <li>Option1.1</li>
    <li>Option1.2</li>
</ul>
<ul id="bb" class="passive">
    <li>Option2.1</li>
    <li>Option2.2</li>
</ul>

score 0 · Answer 3 · answered Aug 14 '17 at 14:53

0

Await hovering a LI, Then display its corresponding element:

 window.addEventListener("mouseover",function(e){
   var el = e.target;
   if(el.id && parseInt(el.id) < 10){
     document.getElementById(el.id*11).style.opacity = 0.7;
    }
 });

answered Aug 14 '17 at 14:53

Jonas Wilms

106,571
13
98
120

How to simplify javascript event listeners?

3 Answers3