javascript - 向 Metro 风格网格应用程序添加事件监听器？

Question

我刚刚使用 html5 和 JavaScript 创建了一个示例网格应用程序。

现在我想要实现的是在用户单击组标题时给出一些动画。

为此，我编写了两个函数。一个用于 mousedown 事件，一个用于 mouse up 事件：

function animateDown() {
    WinJS.UI.Animation.pointerDown(this);
}
function animateUp() {
    WinJS.UI.Animation.pointerUp(this);
}

现在我想将这些函数添加到每个标头的事件侦听器中。有许多组标题，它们没有任何 id，只有类名。

那么如何为所有标题添加事件监听器呢？

Answer 1

您需要使用事件委托。因此，如果所有元素都在一个容器中，您可以执行以下操作：

function toggle(event) {
   var header = event.target;
   if (header.classList.toggle("open") {
      WinJS.UI.Animation.pointerDown(header);
   } else {
      WinJS.UI.Animation.pointerDown(header);
   }
}

document.querySelectorAll(".container").addEventListener("click", toggle, false);