Обработчик событий 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>