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

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

22 голосов
/ 21 октября 2011

Мой HTML: 

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

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

Ответы [ 3 ]

44 голосов
/ 21 октября 2011

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;
}
8 голосов
/ 21 октября 2011

Обычно я просто называю элемент 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;
}

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

0 голосов
/ 21 октября 2011

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

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