Добавляете слушателей событий в приложение сетки в стиле metro?

Question

Я только что создал образец грид-приложения с использованием html5 и JavaScript.

Чего сейчас я хочу добиться, так это дать некоторую анимацию, когда пользователь нажимает на заголовок группы.

Для этого я написалдве функции.Один для события mousedown и один для события мыши:

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

Теперь я хочу добавить эти функции в прослушиватели событий для каждого заголовка.Заголовков групп много, и у них нет идентификаторов, только имена классов.

Итак, как я могу добавить список событий для всех заголовков?

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