zoukankan      html  css  js  c++  java
  • JavaScript事件冒泡和捕获

    • 事件捕获指的是从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
    
    
  • 相关阅读:
    深度学习方面的学术交流平台?
    如何用简单例子讲解 Q
    强化学习之Q-learning简介
    学完了在线课程?如何开启深度学习论文的阅读模式
    Java高级特性之枚举
    uboot启动流程
    Chromium网页Layer Tree创建过程分析
    Sql控制反转小尝试
    模拟日历计算 poj1008
    安卓零碎知识集中
  • 原文地址:https://www.cnblogs.com/geniusrun/p/10598259.html
Copyright © 2011-2022 走看看