zoukankan      html  css  js  c++  java
  • 事件捕获,事件冒泡,事件取消

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    div {padding: 50px;}
    #div1 {background: red;}
    #div2 {background: blue;}
    #div3 {background: green; position: absolute; top: 300px;}
    </style>
    <script>
    window.onload = function() {
        var oDiv1 = document.getElementById('div1');
        var oDiv2 = document.getElementById('div2');
        var oDiv3 = document.getElementById('div3');
        function fn1() {
            alert( this.id );
        }
        //依次执行321
        oDiv1.onclick = fn1;
        oDiv2.onclick = fn1;
        oDiv3.onclick = fn1;
        
        //false表示冒泡
        //告诉div1,如果有一个      出去        的事件触发了你,你就去执行fn1这个函数,先执行3最后执行1。
        oDiv1.addEventListener('click', fn1, false);
        oDiv2.addEventListener('click', fn1, false);
        oDiv3.addEventListener('click', fn1, false);
        
        //告诉div1,如果有一个       进去     的事件触发了你,你就去执行fn1这个函数,先执行1最后执行3。
        oDiv1.addEventListener('click', fn1, true);
        oDiv2.addEventListener('click', fn1, true);
        oDiv3.addEventListener('click', fn1, true);
        
        
        
        oDiv1.addEventListener('click', function() {
            alert(1);
        }, false);
        oDiv1.addEventListener('click', function() {
            alert(3);
        }, true);
        oDiv3.addEventListener('click', function() {
            alert(2);
        }, false);
        //执行321
        
    }
    </script>
    </head>
    
    <body>
    点击div3时,进来的点击事件(事件捕获)从1到3,出去的点击事件(事件冒泡)从3到1.每个div经历2个点击事件。
        <div id="div1">
            <div id="div2">
                <div id="div3"></div>
            </div>
        </div>
    </body>
    </html>
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script>
    /*
    第一种事件绑定形式的取消
    */
    function fn1() {
        alert(1);
    }
    function fn2() {
        alert(2);
    }
    
    document.onclick = fn1;
    document.onclick = null;    //取消,如果是通过attachEvent实现的绑定则不能这么取消。
    
    /*
    ie : obj.detachEvent(事件名称,事件函数);
    标准 : obj.removeEventListener(事件名称,事件函数,是否捕获);
    */
    document.attachEvent('onclick', fn1);
    document.attachEvent('onclick', fn2);
    document.detachEvent('onclick', fn1);
    
    document.addEventListener('click', fn1, false);//绑定出去的函数
    document.addEventListener('click', fn1, true);//绑定进来的函数
    document.addEventListener('click', fn2, false);
    
    document.removeEventListener('click', fn1, false);//取消出去的函数
    </script>
    </head>
    
    <body>
    </body>
    </html>
  • 相关阅读:
    echarts3.0 实例容器不实时更新页面的问题
    Mac下搭建atx2环境
    MAC 下SFT环境搭建及使用
    【转发】基本adbui命令使用 可做图像识别
    UIAutomator2的API文档(三)
    UIAutomator2的API文档(二)
    UIAutomator2的API文档(一)
    UIAutomator2安装及连接
    uiautomator2通过wifi操作手机
    ATX-UI自动化环境搭建
  • 原文地址:https://www.cnblogs.com/yaowen/p/5725566.html
Copyright © 2011-2022 走看看