JavaScript: отслеживание eventListeners на элементах DOM

Question

Каков наилучший способ отслеживать eventListener function с на элементах DOM? Должен ли я добавить свойство к элементу, который ссылается на function, например:

var elem = document.getElementsByTagName( 'p' )[0];
function clickFn(){};
elem.listeners = { click: [clickFn, function(){}] };
elem.addEventListener( 'click', function(e){ clickFn(e); }, false );

Или я должен сохранить его в своей собственной переменной в моем коде, как показано ниже:

var elem = document.getElementsByTagName( 'p' )[0];
function clickFn(){};
// Using window for the sake of brevity, otherwise I wouldn't =D
// DOM elements and their listeners are referenced here in a paired array
window.listeners = [elem, { click: [clickFn, function(){}] }];
elem.addEventListener( 'click', function(e){ clickFn(e); }, false );

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

Какой путь лучше и почему? Есть ли лучший способ?

Answer 1

Как уже упоминалось в других ответах, поскольку вы пометили этот вопрос с помощью jQuery, нет смысла пытаться добавлять и отслеживать события с помощью простого JavaScript, подобного этому. Кроме того, способ, которым вы, кажется, делаете это, на самом деле ничего не отслеживает, потому что вы вручную добавляете ссылку на функцию к своим listeners свойствам, независимо от фактического назначения их обработчикам событий на элементах. Когда вы делаете это, нет никакого способа гарантировать, что те, кого вы «отслеживаете», действительно будут вызываться при возникновении события.

Если вы настаиваете на том, чтобы избегать jQuery, вот пример того, как вы можете добавить несколько обработчиков к нескольким событиям и отслеживать, какие функции были назначены для обработки каких событий позже:

function addTrackedListener(element, type, handler) {
  if (!element.trackedEvents) {
    element.trackedEvents = {};
  }

  if (!element.trackedEvents[type]) {
    element.trackedEvents[type] = [];
  }

  element.trackedEvents[type].push(handler);

  element[type] = function () {
    handleAllEvents(element.trackedEvents[type]);
  };
}


function handleAllEvents(events) {
  for (var i = 0, l = events.length; i < l; i++) {
    events[i]();
  }
}

Пример использования:

// grab some element
var div = document.getElementById('test');

// add a click handler to it
addTrackedListener(div, 'onclick', function() {
  console.log('first handler');
});

// add another click handler to it
addTrackedListener(div, 'onclick', function() {
  console.log('second handler');
});

Когда сработает событие click, вы увидите это на своей консоли:

first handler
second handler

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

Answer 2

Это немного странный вопрос, учитывая, что он также помечен как "jQuery".

В jQuery обработчики событий сделаны чрезвычайно простыми. Ваш первый пример может быть переписан следующим образом:

function clickFn(){};

$("p:first").click(function(e) {
  clickFn(e)
});

Это, или я дико неправильно понял вопрос.