如何判斷列表中的某個元素是否在javascript中被點擊？

Question

我如何知道列表中的某個元素是否在javascript中被點擊？

<div id="list"> 
<a href="#">one</a> 
<a href="#">two</a> 
<a href="#">three</a> 
</div> 

與jQuery是：

$('#list a') 

JavaScript和我該怎麼辦？

Answer 1

您可以使用委派事件處理，所以你把一個事件處理程序的父，並認爲從孩子的所有事件發生的事件傳播的優勢：

document.getElementById("list").addEventListener("click", function(e) { 
    // e.target will be the item that was clicked on 
    e.target.style.color = "#F00"; 
}) 

或者，您可以附加一個事件處理程序到每一個環節，直接通過在枚舉列表的孩子鏈接：

var links = querySelectorAll("#list a"); 
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("click", function(e) { 
    this.style.color = "#F00"; 
}) 

---

僅供參考，如果編程普通的JavaScript，我發現它非常有用使用一些實用的功能，可以幫助您遍歷這往往是從DOM函數返回的HTML對象的列表：

// do a querySelectorAll() and then call a function on each item 
// the parent argument is optional (defaults to document) 
function iterateQuerySelectorAll(selector, fn, parent) { 
    parent = parent || document; 
    var items = parent.querySelectorAll(selector); 
    for (var i = 0; i < items.length; i++) { 
     fn(items[i]); 
    } 
} 

// add an event handler to each item that matches a selector 
// the parent argument is optional (defaults to document) 
function addEventQuerySelectorAll(selector, event, fn, parent) { 
    iterateQuerySelectorAll(selector, function(item) { 
     item.addEventListener(event, fn); 
    }, parent); 
} 

然後，這些實用的助手，上面的代碼中的第二個例子，簡直是這樣的：

addEventQuerySelectorAll("#list a", "click", function() { 
    this.style.color = "#F00"; 
});