博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript事件冒泡和捕获
阅读量:6831 次
发布时间:2019-06-26

本文共 1023 字,大约阅读时间需要 3 分钟。

  • 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
  • 事件冒泡是自下而上的去触发事件。
  • 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。

    例子

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

转载于:https://www.cnblogs.com/geniusrun/p/10598259.html

你可能感兴趣的文章