Question

所以说我有一些代码可以在页面的主要部分创建无限数量的注释，例如

function createcomments(comments) {
    var main = document.getElementById("main");
    for (var i = 0; i < comments.length; i++) {
        var comment = document.createElement("quoteblock");
        comment.innerHTML = comments[i];
        main.appendChild(comment);
        comment.classList.add("comment");
    }
}

每当我的页面访问者徘徊在评论上时，背景会变成红色或其他东西：

window.onload = function() {
    var comments = document.querySelectorAll(".comment");
    // code for handling .onmouseover and .onmouseout
    // for each element in the array
}

我该怎么做？我认为有一种方法可以使用jQuery，但我想知道是否有一种方法可以用JavaScript。

Answer 1

在jQuery中有两个辅助函数delegate()和live()。它们在this博文中很好地描述了。

实际上，您可以将eventHandler附加到比侦听所有鼠标事件（和其他事件）的父元素。使用委托，然后检查父元素eventHandler，如果事件来自特定子节点。

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

这里我们添加一些简单的html，但我们不会附加到单击处理程序的span元素，而是附加到div。然后在div eventHandler中检查实际点击了什么目标

var divs = document.querySelector("ul");
divs.addEventListener("click", function(ev) {
   if (ev.target.tagName === "LI")
       console.log("A list element  (" + ev.target.innerText + ") was clicked");
});

这个delegation背后的全部原因是性能。此外，如果您动态删除或添加项目，事件处理将按预期工作，无需任何其他工作。

如果你不想在这个简单的步骤中使用整个jQuery，我仍然建议你使用一些框架，因为使用社区支持总是比重新发明轮子更好

尝试http://craig.is/riding/gators，看起来不错：）

如何处理无限数量的事件？

1 个答案: