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

如何判断是否在javascript中单击了列表元素？

1 个答案: