JavaScript события и "srcElement"

Question

У меня возникла конкретная проблема с событием JS "onclick" и тем, как оно работает в очень конкретном случае. У меня есть набор вложенных DIV, который выглядит примерно так:

В коде:

<div id="A" ...> 
    <div id="B" ...> </div> 
    <div id="C" ...> </div> 
</div>

Точная позиция DIV произвольна, просто знайте, что есть вложенные DIV.

DIV A имеет прикрепленное событие onclick.

Когда пользователь щелкает по элементам div, которые я намерен использовать для srcElement, без исключения, div A. Или, может быть, я просто не использую правильное свойство.

По сути, я хочу получить имя div, для которого было вызвано событие onclick. изнутри функция onclick

Answer 1

Если onclick на A, то this в обработчике будет представлять этот элемент.

document.getElementById('A').onclick = function() {
    // "this" is the A element
    alert( this.id );  // alert the ID attribute of the element
};

Answer 2

Ну, у div s нет имени как такового в HTML4. Они могут иметь название, хотя. В JS без фреймворка вы можете получить заголовок следующим образом:

document.getElementById("A").onclick = function() {
    alert(this.title);
}

Похоже, это хорошо работает в моих тестах.

Answer 3

Вы можете использовать решение Патрика при условии, что вы присоединяете слушателя как свойство элемента.

Если вы используете метод attachEvent в IE, он не будет работать, так как он не устанавливает ключевое слово this для слушателя при вызове. Для этого есть множество обходных путей. IE 9 представляет addEventListener, надеюсь, с ключевым словом this, установленным для других браузеров.

Event.srcElement является IE-эквивалентом свойства W3C Event.target и является элементом, для которого изначально произошло событие. Для всплывающих событий, чтобы найти элемент, чей обработчик вызвал слушателя, лучше всего задать ключевое слово this слушателя в вызове, чтобы вы могли ссылаться на связанный элемент как «this».

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

Как правило, регистрация событий должна быть максимально простой. Когда у вас сложная система, вам, скорее всего, понадобится собственная система регистрации и вызова событий, чтобы избежать различных особенностей браузера (их много).

- Rob