в триггере события javascript, когда _this_ совпадает с e.target? порядок стрельбы?

Question

образец A:

<table><tr>
  <td onclick='return tdclick()'><img ... /></td>
</tr></table>

при условии, что пользователь нажимает на IMG в приведенном выше примере; верно следующее:

1. tdclick сработает дважды, один раз для IMG иодин раз для TD
2. сначала сработает IMG, затем TD
3. тогда и только тогда, когда tdclick стреляет по TD, будет this == e.target

пример B:

<table><tr>
  <td onclick='return tdclick()'><img onclick='return imgclick()' ... /></td>
</tr></table>

при условии, что пользователь нажимает на IMG в приведенном выше примере, что справедливо для следующего:

1. imgclick запускает IMG и this == e.target
2. тогда все происходит как в A выше

C.и наконец, если бы обработчики событий были добавлены через

td.addEventListener( 'click', tdclick, false );
img.addEventListener( 'click', imgclick, false );

, были бы те же операторы, что и раньше, или оператор A2 был бы обращен?

Answer 1

Образец А:

1) Ложь

2) Ложь

3) Ложь

Событие сработает только один раз, поскольку к одному элементу DOM прикреплено только одно событие «щелчка». Даже если событие произошло от дочернего элемента (такого как img), оно на самом деле не срабатывает, пока всплывающее событие не попадет в родительский элемент. В этом случае «this» будет элементом TD (так как он был источником события, а это , называемое функцией). Но если вы посмотрите на первый аргумент, переданный событием, и проверите его данные, вы увидите, что e.target обычно является элементом IMG.

var tdClick = function(e){
    console.log(e.target); // typically the IMG element
}

Я говорю «типично», потому что некоторые браузеры называют исходный элемент другим в объекте сведений о событии. В некоторых браузерах это 'target', в некоторых это 'originalTarget', и их может быть больше.

Образец B:

1) Да, imgClick запускает изображение. Не уверен, что вы подразумеваете под 2-й частью вашего заявления. 'this' при обработке событий DOM будет тем элементом DOM, который вызвал событие. Таким образом, в данном случае «this» является элементом IMG (который также является e.target)

2) Ложь, как указано ранее:)

Образец C:

addEventListener делает то же самое, что и добавление вызовов функций вручную в атрибут «onclick» вашего элемента. Таким образом, поведение такое же ... с оговоркой, что я на самом деле не знаком с третьим аргументом addEventListener (для Mozilla Dev Center , он называется useCapture и имеет отношение к пузырям, я м просто не знаком с этим)

Я бы порекомендовал получить либо FireFox с расширением Firebug, либо Chrome и просто протестировать некоторые из них. Внутри функций событий просто выполните console.log (this) или console.log (e) и т. Д., И их консоли разработки позволят вам проверить все мелкие детали объекта. Это чрезвычайно полезно. Просто не забудьте вынуть ваши операторы console.log (), когда вы закончите, потому что в IE они будут хрипеть.