Привязать событие к элементу с использованием чистого Javascript

Я пишу API и, к сожалению, должен избегать любых jQuery или сторонних библиотек. Как точно связаны события с элементами через jQuery?

Пример jQuery:

$('#anchor').click(function(){
    console.log('anchor');
});

Я близок к написанию атрибута onClick в элементе из-за разочарования, но я хотел бы понять связь между событием jQuery и элементом DOM.

Как точно знает элемент для запуска события jQuery, когда сама разметка не изменяется? Как они поймают событие DOM и переопределяют его?

Я создал свой собственный обработчик Observer, но не могу понять, как связать элемент с событиями Observer.

Ответ 1

Вот быстрый ответ:

document.getElementById('anchor').addEventListener('click', function() {
  console.log('anchor');
});

Каждый современный браузер поддерживает весь API для взаимодействия с DOM через JavaScript без необходимости изменения вашего HTML. См. Здесь для довольно хорошего вида птичьего полета: http://overapi.com/javascript

Ответ 2

Вы идентифицируете элемент по id, в данном случае - якорь, по:

var el = document.getElementById('anchor');

Затем вам нужно назначить событие click:

el[window.addEventListener ? 'addEventListener' : 'attachEvent']( window.addEventListener ? 'click' : 'onclick', myClickFunc, false);

И, наконец, функция события будет выглядеть примерно так:

function myClickFunc()
{
    console.log('anchor');
}

Вы можете упростить его или превратить в однострочный, если вам не нужна совместимость со старыми браузерами и рядом браузеров, но jQuery выполняет кросс-браузерную совместимость и делает все возможное, чтобы предоставить вам функциональность, которую вы ищете для как можно большего количества старых браузеров.