问题一:
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