JavaScript事件冒泡和捕获
程序员文章站
2022-06-24 15:28:17
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。 事件冒泡是自下而上的去触发事件。 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。 例子 ......
- 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
- 事件冒泡是自下而上的去触发事件。
-
绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。
例子
<div id='id1'> <div id="id2"> <button id='id3'>id3 按钮</button> </div> </div>
var id1 = document.queryselector('#id1') var id2 = document.queryselector('#id2') var id3 = document.queryselector('#id3') // 事件冒泡 id1.addeventlistener('click', function(event){ console.log('click id1') }) id2.addeventlistener('click', function(event){ console.log('click id2') }) id3.addeventlistener('click', function(event){ console.log('click id3') // 取消冒泡事件 // event.cancelbubble = true }) // 点击id3输出 // click id3 // click id2 // click id1 // 事件捕获 id1.addeventlistener('click', function(event){ console.log('capture click id1') }, true) id2.addeventlistener('click', function(event){ console.log('capture click id2') }, true) id3.addeventlistener('click', function(event){ console.log('capture click id3') }, true) // 点击id3输出 // capture click id1 // capture click id2 // capture click id3