Порядок выполнения захвата и пузыря для двух одинаковых слушателей в js - PullRequest
Новая
       11

Порядок выполнения захвата и пузыря для двух одинаковых слушателей в js

0 голосов
/ 04 июня 2018 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>capture and bubble</title>
  <style type="text/css">
  #child{
    background: red;
    width:50px;
    height:50px;
  }
  #father{
    width:100px;
    height:100px;
    background:green;
  }
  </style>
</head>
<body>
    <div id='father'>
      <div id='child'></div>
    </div>
</body>
<script type="text/javascript">
  var parent = document.getElementById("father");
  var child = document.getElementById('child');
  var html = document.getElementsByTagName("html")[0];
  var body = document.body;
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
   child.addEventListener("click",function() {
    console.log("I am capturing child");
  },true);
  child.addEventListener("click",function() {
    console.log("I am child");
  },false);
  body.addEventListener("click",function() {
    console.log("I am capturing body");
  },true);  
  body.addEventListener("click",function() {
    console.log("I am body");
  },false);
  html.addEventListener("click",function() {
    console.log("I am capturing html");
  },true);
  html.addEventListener("click",function() {
    console.log("I am html");
  },false);
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
</script>
</html>

Для вышеупомянутого html, содержащего js для отображения порядка выполнения захвата и всплывающего сообщения, я связал двух слушателей захвата и всплывающего сообщения два раза для родителя (div отца), одну пару захвата и всплывающего сообщения для родителя(div отец) - с 5-й по 10-ю строку в части сценария js;другая пара захвата и пузыря для родителя (папа дива) находится в конце части скрипта js.

Щелкните зеленый div (папа див), чтобы получить результат в консоли. 

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:35 I am parent
test.html:56 I am capturing parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

Почему результат не следующий? 

test.html:50 I am capturing html
test.html:44 I am capturing body
test.html:32 I am capturing parent
test.html:56 I am capturing parent
test.html:35 I am parent
test.html:59 I am parent
test.html:47 I am body
test.html:53 I am html

Пожалуйста, объясните это подробно.

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Самое важное, что целевая фаза запускает как захват, так и всплывающее действие.

другой материал с очень понятными языковыми состояниями здесь

2-я фаза («цель»)фаза »: событие, достигшее элемента) не обрабатывается отдельно: на этой фазе срабатывают обработчики как на фазах захвата, так и на восходящем этапе.

0 голосов
/ 04 июня 2018

В документации MDN для addEventListener указано:

Примечание : для прослушивателей событий, прикрепленных к цели события, событие находится в целифаза, а не фазы захвата и барботажа.События в целевой фазе будут запускать всех слушателей на элементе в том порядке, в котором они были зарегистрированы, независимо от параметра useCapture.

Это то, что происходит здесь.Слушатели событий присоединяются к цели события (parent в вашем примере), поэтому событие находится в целевой фазе, и слушатели запускаются в порядке их регистрации.

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

I am capturing html
I am capturing body
I am capturing parent
I am capturing parent
I am capturing child
I am child
I am parent
I am parent
I am body
I am html

Здесь есть хорошее объяснение и схема потока событий .

enter image description here

...