捕获阶段与泡沫阶段 - 为什么以下代码不会产生相同的结果？

Question

我想在纯Javascript中实现我自己的DnD - 首先用于学习目的 - 然后我可能会使用它 - 我偶然发现了这个泡泡/捕获概念。通过阅读这个问题的接受答案：What is event bubbling and capturing?以及其他文章，我以为我知道了。

但我没有 - 因为我无法解释为什么这两段代码不会产生相同的结果。

为什么我注册此活动的顺序很重要？ 我认为他们应该按照相同的顺序 - 无论他们如何注册 - 按照捕获/冒泡的规则被解雇。事实并非如此。

鉴于您点击div3 - 会发生这种情况：

案例1：jsBin

案例2：also jsBin

案例3 - 这是first answer of the above mentioned question

Html它是一样的：

<div id="div1">
  div 1
  <div id="div2">
    div 2
    <div id="div3">
      div3
    </div>
  </div>
</div>

案例1 Js：

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

/* div1 */
div1.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 1");
}, true);

div1.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 1");
}, false);


/* div2 */
div2.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 2");
}, true);

div2.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 2");
}, false);


/* div3 */
div3.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 3");
}, true);

div3.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 3");
}, false);


var $log = $("#log");
function log(msg) {
   $log.append('<p>' + msg + '</p>');
}

案例2 - javascript：

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

/* capture events */
div1.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 1");

}, true);

div2.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 2");
}, true);

div3.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 3");
}, true);

/* bubbling events */
div1.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 1");

}, false);

div2.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 2");
}, false);

div3.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 3");
}, false);

我思考的谬误在哪里？我错过了什么？谢谢:)）

Answer 1

问题在于声明你的变量。

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition: height 0.35s ease;
    -o-transition: height 0.35s ease;
    transition: height 1s ease;
}

.collapse.in {
  height: 200px;
}

$(document).ready(function() {

$("#read-more-1").click(function(){
      console.log("click works");
      if($("#read-block-1").hasClass("in")) {
         $("#read-block-1")
            .addClass('collapsing')
            .removeClass('in')
            .removeClass('collapsing')
      }else{
        $("#read-block-1")
            .addClass('collapsing')
            .addClass("in")
            .removeClass('collapsing')
      }
   })
})

您没有收到任何错误，因为仅使用id的名称通过其id选择元素是完全合法的。你不应该这样做。它可以很快成为一场噩梦。

＆＃13;

＆＃13;

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3"); // <----

＆＃13;

test.addEventListener('click', function() {
  console.log(this);
})

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题出在这里

var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

一定是

var div2 = document.querySelector("#div2");
var div3 = document.querySelector("#div3");