Javascript обработчик события щелчка - как получить ссылку на выбранный элемент?

Question

Мой HTML:

<div id="x" onclick="clickHandler(event)">
   <div id="button1">This turns green</div>
   <div id="button2">This turns blue</div>
</div>

Итак, во-первых, почему я должен передавать "событие" в обработчик клика, и является ли событие каким-то системным ключевым словом? Кроме того, так как обработчик кликов идентифицирован в элементе контейнера, как узнать, какая кнопка была нажата?

Answer 1

event является объектом Event, который создается автоматически при запуске события. Обратите внимание, что вам не нужно называть это event (Я склонен называть это просто e). Этот объект Event имеет ряд свойств, которые описывают событие, которое он представляет. В этом случае интересующим вас будет target, который показывает элемент, который был источником события:

function clickHandler(e) {
    var target = e.target;
}

Вот рабочий пример.

К сожалению, это никогда не было так просто. Хотя в спецификации сказано, что это должно быть event.target, Internet Explorer любит отличаться, и выбирает использовать event.srcElementтак что вы, вероятно, хотите поставить чек, чтобы убедиться, event.target существует! Например:

function clickHandler(e) {
    var target = (e.target) ? e.target : e.srcElement;
}

Answer 2

Я обычно просто называю элемент clicked в списке аргументов вызова обработчика щелчка, что-то вроде (не проверено):

<div id="x">
   <div id="button1" onclick="handle_click_event( this, 'green' )">This turns green</div>
   <div id="button2" onclick="handle_click_event( this, 'blue' )">This turns blue</div>
</div>

function handle_click_event ( obj, new_color ) {
  obj.style.backgroundColor = new_color;
}

Может ли этот подход работать на вас?

Answer 3

Почему ты не можешь сделать это?

<div id="x">
   <div id="button1" onclick="clickHandler1()">This turns green</div>
   <div id="button2" onclick="clickHandler2()">This turns blue</div>
</div>