如何簡化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事件偵聽器？

回答

相關問題