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

Мой HTML:

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

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

Ответы

Ответ 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;
}

Ответ 2

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

<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;
}

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

Ответ 3

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

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