Почему javascript отправляет элемент в мой обработчик событий, когда этот элемент не имеет события?

Question

Этот HTML:

<span id="mySpan"><img src="images/picture.png" alt="Some nice alt text" />
 Link text</span>

Этот javascript принимает диапазон, содержащий изображение и текст, а затем делает его кликабельным:

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
 var obj = e.target;
}

Если я нажму на «Текст ссылки», тогда объект в myEvent () - это span. Если я нажимаю на изображение, то объект является элементом изображения! Само изображение не имеет события. Так почему же не всегда диапазон, передаваемый обработчику событий?

Это урезано, так что он работает только в Firefox для простоты, кстати.

Также, пожалуйста, не стесняйтесь редактировать заголовок моего вопроса, если вы можете сформулировать его более согласованно.

Answer 1

Вы должны взглянуть на эту статью Питера-Пола Коха о Quirksmode, она точно отвечает на ваш вопрос подробно

Answer 2

События эффективно наследуются.

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

В вашем случае вы действительно хотите проверить, что нажимается внутри myEvent:

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    if (e.target === spanVar) // This will make the img non clickable
        var obj = e.target;
}

Попробуйте это с помощью jsFiddle

Если вы хотите получить элемент, к которому изначально был прикреплен обработчик кликов, просто используйте this

spanVar = document.getElementById("mySpan");
spanVar.addEventListener("click", myEvent, false);

function myEvent(e){
    var obj = this;  // This is the object that had the click handler attached
}

Попробуйте его с помощью этого jsFiddle

Проблема действительно не в пузыре событий.Дело в том, что все дочерние элементы родительского элемента эффективно получают обработчики событий своего родительского элемента.Пузырьки событий вступили бы в игру, если бы к дочернему элементу и родительскому элементу были прикреплены разные обработчики, но вы хотели только запустить обработчик дочернего элемента.

Другое решение - изменить ваш HTML:

<div>
    <img src="images/picture.png" alt="Some nice alt text" />
    <span id="mySpan">Link text</span>
</div>

Answer 3

Вам нужно прочитать о событийном пузыре .