如何處理不確定的事件？

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() 。 它們的工作方式如本博文中所述。

實際上，您可以將eventHandler附加到父元素，而不是列出所有鼠標事件（和其他事件）。 然后使用委托，檢查父元素eventHandler是否事件來自特定的子項。

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

在這里，我們添加了一些簡單的html，但是我們沒有將其附加到click處理程序的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 ，看起來不錯:)