事件处理模式冒泡，事件捕获

BonnieYY

已于 2023-08-29 16:29:51 修改

阅读量192

点赞数

分类专栏： js 事件文章标签： javascript 前端 html

于 2018-11-29 23:05:58 首次发布

本文链接：https://blog.csdn.net/qq_39039128/article/details/84641729

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

事件

1 篇文章 0 订阅

订阅专栏

重点：
1、触发顺序：先捕获，再冒泡。
2、ie没有事件捕获
3、focus、blur、change、submit、reset、select等事件不冒泡
事件冒泡：结构上（非视觉上）嵌套关系的元素（自子元素冒泡向父元素）

    <style>
        .wrapper{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .content{
            /* margin-left: 300px; */
            width: 200px;
            height: 200px;
            background-color:green;
        }
        .box{
            /* margin-left: 200px; */
            width: 100px;
            height: 100px;
            background-color:orange;
        }
    </style>
</head>
<body>
    <!-- 事件冒泡：结构上（非视觉上）嵌套关系的元素（自子元素冒泡向父元素） -->
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click',function(){
            console.log('wrapper');
        },false);
        content.addEventListener('click',function(){
            console.log('content');
        },false);
        box.addEventListener('click',function(){
            console.log('box');
        },false);
    </script>
</body>

事件捕获：（ie没有）最外层的先捕获。同一事件，自父元素捕获至子元素（自顶向下）

<body>
    <!-- 事件冒泡：结构上（非视觉上）嵌套关系的元素（自父元素捕获至子元素（自顶向下）） -->
    <div class="wrapper">
        <div class="content">
            <div class="box"></div>
        </div>
    </div>
    <script>
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];
        // boxBubble先绑定，先执行
        // wrapper content  box boxBubble contentBubble wrapperBubble
        wrapper.addEventListener('click',function(){
            console.log('wrapperBubble');
        },false);
        content.addEventListener('click',function(){
            console.log('contentBubble');
        },false);
        box.addEventListener('click',function(){
            console.log('boxBubble');
        },false);
        
        wrapper.addEventListener('click',function(){
            console.log('wrapper');
        },true);
        content.addEventListener('click',function(){
            console.log('content');
        },true);
        box.addEventListener('click',function(){
            console.log('box');
        },true);
    </script>
</body>

事件委托（用事件冒泡做的）

  <!-- 取消冒泡事件 -->
    <div class="wrapper">
    </div>
    <script>
        // 事件处理函数传的形参，是事件对象
        var wrapper = document.getElementsByClassName('wrapper')[0];
        document.onclick = function(){
            console.log('ppp');
        }
        wrapper.addEventListener('click',function(e){
            console.log('wrapper');
            //方法一： W3C标准方法，ie9不能用
            // e.stopPropagation();
            // 方法二：ie的方法(谷歌也可以)
            // e.cancelBubble = true;
            // 方法三：封装兼容的取消冒泡函数
            stopBubble(e);
        },false);
        function stopBubble(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
     
    </script>

阻止默认事件

 <script>
        //默认事件：表单提交、a标签跳转，右键出菜单事件=== oncontextmenu
        // 只在句柄可用
        document.oncontextmenu = function(e){
            console.log('a');
            // 方法一：
            // return false;
            //  方法二：w3c标准，ie9不兼容
            // e.preventDefault();
            // 方法三：兼容ie
            // e.returnValue = false;
            return cancelHandle(e);
        }
        // 封装阻止默认事件的函数
        function cancelHandle(event){
            if(event.preventDefault){
                event.preventDefault();
            }else if(event.returnValue){
                event.returnValue = false;
            }else{
                 return false;
            }
        }
    </script>
<script>
        //默认事件：a标签跳转
        var a = document.getElementsByTagName('a')[0];
        a.onclick = function(e){
            cancelHandle(e);
        }
        // 封装阻止默认事件的函数
        function cancelHandle(event){
        //ie浏览器的event事件是window.event
        	var event = event||window.event;
            if(event.preventDefault){
                event.preventDefault();
            }else if(event.returnValue){
                event.returnValue = false;
            }else{
                 return false;
            }
        }
    </script>

事件委托：利用事件冒泡，和事件源对象进行处理

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <!-- 事件委托：利用事件冒泡，和事件源对象进行处理 -->
    <!-- 优点：1、性能，不用循环所有元素一个个绑定事件 -->
    <!-- 2、灵活，当有新的子元素时不需要重新绑定事件 -->
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function(event){
            var event = event||window.event;
            var target = event.srcElement||event.target;
            console.log(target.innerText);
        }
    </script>
</body>