Пузырьки и захват с помощью addEventListener - PullRequest
Новая
       37

Пузырьки и захват с помощью addEventListener

6 голосов
/ 28 января 2012

Недавно я обнаружил разницу между Bubbling и Capturing для событий DOM, используя javascript.Теперь я понимаю, как это должно работать, но я обнаружил странную ситуацию и хотел бы знать, почему это происходит.

Согласно Режиму причуда , распространение события начинается сзахват на внешнем div, достигает дна, а затем пузыри до вершины.Проблема заключалась в том, что я начал делать некоторые тесты.

На этом первом все работает, как и ожидалось: 

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
</script>

Если вы щелкнете по тексту, предупреждения перейдут на «захват»захватить в ',' пузырь в 'и' пузырь из '.Проблема заключается в использовании следующего кода: 

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
</script>

В этом случае оповещения идут «захват», «всплывание», «захват» и «выпадение».Если вы заметили, единственное отличие состоит в том, что на втором месте сначала назначается пузырение, но я не думаю, что это должно иметь какое-либо значение.

Я пробовал это с Firefox и Chrome, и результатыодинаковы (я понимаю, что Internet Explorer не обрабатывает захват).

1 Ответ

9 голосов
/ 29 января 2012

quirksmode немного упростил модель.События на самом деле проходят через до трех этапов: захват, на цели и пузыри .

Если вы регистрируете событие event.eventPhase , например, так:1008 *

... вы увидите, что слушатели 'bubble in' и 'capture in' запускаются во время фазы AT_TARGET.Прослушиватели событий, вызванные для одного и того же элемента в течение одной и той же фазы, вызываются в порядке регистрации.

...