如何简化javascript事件侦听器？

我想要实现的是，当鼠标悬停在id =“a”的li上时，会出现id =“aa”的相应ul。我有这样的HTML代码：如何简化javascript事件侦听器？

<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>

和这段JavaScript代码：

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); 
}

和它的作品如预期，但here乔丹格雷说，它有可能摆脱循环的，而是用户为所有列表项目创建一个事件监听器 - 这是我想在此实现的。不幸的是，我不明白他的代码，如果有人能向我解释或提出解决方案，我会很感激。

来源

2017-08-14 bronikovsky

[不使用数字作为'id's]（https://stackoverflow.com/q/7987636/1048572）。 – Bergi

阅读[什么是DOM事件委托？]（https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation） – Bergi

@Bergi HTML5规范现在只允许数字ID（[旧规格] （https://www.w3.org/TR/html401/types.html#type-name）和[新规格]（https://www.w3.org/TR/html5/dom.html#the-id - 属性）） –

这里是你如何使用这个逻辑在代码：

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>

来源

2017-08-14 14:47:06

您可以为父ul添加一个事件侦听器，并在此侦听器中添加一个目标元素，以便知道触发了哪个li。

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>

来源

2017-08-14 14:45:19

var container = document.getElementById('container'); 
 

 
container.addEventListener('click', function(e) { 
 
    if (e.target.nodeName.toUpperCase() !== "LI") return; 
 

 
    var li = e.target; 
 
    var ul = document.getElementById(li.id+li.id); 
 
    li.addEventListener("mouseover", function() { 
 
     ul.style.opacity = "1"; 
 
     ul.style.background = "blue"; 
 
     ul.style.color = "red"; 
 
    }, false); 
 
});

<div id="container"> 
 
    <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> 
 
</div>

来源

2017-08-14 14:51:45

等待悬停LI，然后显示其对应的元件：

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; 
    } 
});

来源

2017-08-14 14:53:03

如何简化javascript事件侦听器？

回答

相关问题