Как вы ловите событие клика с простым Javascript?

Question

Я знаю, что при использовании jQuery вы можете сделать $('element').click();, чтобы перехватить событие щелчка элемента HTML, но как это сделать с простым Javascript?

Answer 1

document.getElementById('element').onclick = function(e){
  alert('click');
}

ДЕМО: http://jsfiddle.net/e9jZW/1/

Answer 2

Добавляя прослушиватель событий или устанавливая обработчик onclick элемента:

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

Обратите внимание, что стиль четного слушателя позволяет нескольким слушателямбыть добавленным, в то время как стиль обработчика обратного вызова является эксклюзивным (может быть только один).

Если вам нужно добавить эти обработчики к нескольким элементам, вы должны приобрести их соответствующим образом и добавить их к каждому по отдельности.

Answer 3

Я обычно создаю своего рода глобальный обработчик событий, очень мощный, вы можете захватывать className, события "types" nodeTypes, вы называете его, я надеюсь, что люди найдут этот полезный

document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

         // evt.type could be, mouseup, mousedown...
        // elem.id is the id or the element
        // elem.className is the class name of the element
        // you could nest expression, use substrings to extract part of a className
        if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}

Answer 4

Я бы порекомендовал перейти с addEventListener вместо прямого назначения функции обработчика.

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

Есть несколько причин, по которым я собираюсь назвать те, которые я считаю наиболее важными:

1. Нельзя по ошибке добавить прослушиватель событий к объекту, отличному от DOM, с помощью addEventListener - ваш код завершится ошибкой вместо тихого присвоения функции onclick какому-либо объекту
2. Вы можете присоединить только один (без дополнительных манипуляций с кодом для каждого обработчика, который вы хотите добавить) к обработчику событий с onclick - что может ограничить

Answer 5

Вот интересная статья об этом, я несколько раз использовал один и тот же подход, в основном вы добавляете обработчик событий в window. http://mislav.uniqpath.com/js/handling-events-on-elements/