javascript - 如何判断是否在 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

您可以使用利用事件传播的委托(delegate)事件处理，因此您将一个事件处理程序放在父级上，它会看到来自子级的所有事件:

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