首页 > 事件冒泡和事件捕获的两个问题?

事件冒泡和事件捕获的两个问题?

问题一:

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。 这句话怎么理解?

通过W3C的方式,ele.addEventListener('click',doSomething,true/false) 第三个参数中:false为冒泡获取,true为捕获获取,不都设定好了具体事件方式了吗?为什么还有中和的解释???

问题二:

<div id='one'>
      <div id='two'>
        <div id='three'>
          <div id='four'>
          </div>
        </div>
      </div>
    </div>


 <script>
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var three = document.getElementById('three');
        var four = document.getElementById('four');
    
        
        one.addEventListener('click', function() {
            console.log('one');
        }, false);
        two.addEventListener('click', function() {
            console.log('two');
        }, true);
        three.addEventListener('click', function() {
            console.log('three');
        }, false);
        four.addEventListener('click', function() {
            console.log('four');
        }, false);        
     
    </script>

上面四个嵌套的div,除了第二个two是设置的捕获,另外三个都是冒泡,结果是two-four-three-one,有点绕晕了,是捕获事件的优先级高于冒泡事件吗?这和我的问题一的那句话一个道理吗?


第一个问题:就是事件冒泡的定义!比如你的例子中一旦事件冒泡,会先找从触发节点从下往上到最顶层的dom,触发冒泡事件,所以顺序是four->three->two->one

第二个问题:你在给two的addEventListener参数三设置了true捕获事件,所以two会先触发click,然后再从其他三个冒泡的顺序自然执行,相当于two捕获-》four冒泡-》three冒泡->one

【热门文章】
【热门文章】