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

时间:2017-01-16 19:55:54

标签: javascript dom-events

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

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

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

鉴于您点击div3 - 会发生这种情况: enter image description here

案例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);

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

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

问题出在这里

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

一定是

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