Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2011, 18:14
Интересующийся
Отправить личное сообщение для DrStrangelove Посмотреть профиль Найти все сообщения от DrStrangelove
 
Регистрация: 02.07.2011
Сообщений: 16

Порядок срабатывания событий
В этой статье сказано:

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

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


Но в примерах, обработчики вешаются на все (и вложенные) элементы!
Как бы выглядел код, чтобы один обработчик на родителе ловил все события??
Ответить с цитированием
  #2 (permalink)  
Старый 03.08.2011, 18:34
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Пример некроссбраузерный, но мысль понять можно.
<div id="test">
  <span>Click: 0</span>
  <span>Click: 0</span>
</div>
<script>
document.getElementById("test").onclick = function(event){
  if( event.target.tagName.toLowerCase() === "span" )
    event.target.innerHTML = "Click: " +
      ( + event.target.innerHTML.match(/\d+$/)[ 0 ] + 1 );
};
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 03.08.2011, 18:51
Интересующийся
Отправить личное сообщение для DrStrangelove Посмотреть профиль Найти все сообщения от DrStrangelove
 
Регистрация: 02.07.2011
Сообщений: 16

Сообщение от Sweet Посмотреть сообщение
Пример некроссбраузерный, но мысль понять можно.
<div id="test">
  <span>Click: 0</span>
  <span>Click: 0</span>
</div>
<script>
document.getElementById("test").onclick = function(event){
  if( event.target.tagName.toLowerCase() === "span" )
    event.target.innerHTML = "Click: " +
      ( + event.target.innerHTML.match(/\d+$/)[ 0 ] + 1 );
};
</script>
т.е. тут всплытие?? Не перехват??
Почему event.target - span?? Ведь мы повесили обработчик на div??

Последний раз редактировалось DrStrangelove, 03.08.2011 в 18:54.
Ответить с цитированием
  #4 (permalink)  
Старый 03.08.2011, 19:32
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Сообщение от DrStrangelove
т.е. тут всплытие?? Не перехват??
Почему event.target - span?? Ведь мы повесили обработчик на div??
Идет всплывание события от элемента, на котором это событие произошло. Этот элемент будет хранится в свойстве .target (или .srcElement в ie) объекта event для всех элементов (они доступны через this), на которых произойдет событие в ходу всплывания.
<div id="div">
  <span id="span">Click</span>
</div>
<script>
document.getElementById("div").onclick = function(event){
  alert([
    this === document.getElementById("div"),
    event.target === document.getElementById("span")
  ]);
};
</script>

Последний раз редактировалось Sweet, 03.08.2011 в 19:35.
Ответить с цитированием
  #5 (permalink)  
Старый 03.08.2011, 22:39
Интересующийся
Отправить личное сообщение для DrStrangelove Посмотреть профиль Найти все сообщения от DrStrangelove
 
Регистрация: 02.07.2011
Сообщений: 16

А если такой код:
<div>
    <div>
          <div onclick="handler()">

          </div>
    </div>
</div>


Как он выполнится?? Обработчик только у самого внутреннего - Он выполнится трижды??
Ответить с цитированием
  #6 (permalink)  
Старый 04.08.2011, 01:38
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,589

Сообщение от DrStrangelove
Как он выполнится?? Обработчик только у самого внутреннего - Он выполнится трижды??
событие возникнет 4 раза(ещё и в боди))) ,но обработчик всего один- выполнится 1 раз.
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2011, 02:46
Интересующийся
Отправить личное сообщение для DrStrangelove Посмотреть профиль Найти все сообщения от DrStrangelove
 
Регистрация: 02.07.2011
Сообщений: 16

Сообщение от dmitriymar Посмотреть сообщение
событие возникнет 4 раза(ещё и в боди))) ,но обработчик всего один- выполнится 1 раз.
1)А если как в первом примере - один единственный обработчик висит на родителе, внутри которого много потомков. Тогда тоже обработчик выполнится только один раз (но, наверно, с разными event.target)??

Это просто потому что обработчик всего один??

2) событие возникнет 4 раза(ещё и в боди))) А не 5?? )) на корневой элемент HTML всплытие не распространяется??

Последний раз редактировалось DrStrangelove, 04.08.2011 в 02:50.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Переопределение событий lispik jQuery 4 13.01.2011 12:30
Скопировать обработчики событий с одного элемента на другой. Jurasmi Events/DOM/Window 3 10.11.2010 19:03
Фильтры IE и обработчики событий IE6 mexoboy Internet Explorer 6 25.05.2010 16:51
Удаление обработчика событий! Даниэль Ноубл Общие вопросы Javascript 1 23.04.2010 17:12
Порядок выполнения анимации Tohin jQuery 3 03.07.2009 11:52