事件传播机制

最新推荐文章于 2022-02-10 15:32:37 发布

端脑

最新推荐文章于 2022-02-10 15:32:37 发布

阅读量550

点赞数

分类专栏：前端文章标签：事件传播机制 DOM0 DOM2 DOM3 DOM各级之间的区别

本文链接：https://blog.csdn.net/qq_43776742/article/details/103537279

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

事件传播机制（这里内容如果有错，欢迎指正）

DOM0级

DOM2级

DOM3级

事件中的冒泡 / 阻止冒泡

DOM0 DOM2 DOM3的区别

在这里插入图片描述

DOM0级事件绑定的方法都是在当前元素事件行为的冒泡阶段执行:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .fa {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .fa .son {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
    <script type="text/javascript">
        /*
             
        */
        var fa = document.querySelector(".fa");
        var son = document.querySelector(".son");
        var myEvent = null;

        window.onclick = function() {
            console.log("window");
        }

        document.onclick = function() {
            console.log("document");
        }

        document.documentElement.onclick = function() {
            console.log("html");
        }

        document.body.onclick = function() {
            console.log("body");
        }

        fa.onclick = function() {
            console.log("fa");
        }

        son.onclick = function() {
            console.log("son");
        }
    </script>
</body>

</html>

DOM2级绑定事件

DOM2级的三个事件

事件冒泡（常用）
时间捕获
DOM事件流（常用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .fa {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .fa .son {
            width: 150px;
            height: 150px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>
    <script type="text/javascript">
        /*
                    DOM0级事件绑定的方法都是在当前元素事件行为的冒泡阶段执行 
                */
        var fa = document.querySelector(".fa");
        var son = document.querySelector(".son");
        var myEvent = null;


        // DOM2级绑定事件 
        // DOM2级 addEventListener() 
        //=>1 可以对同一个元素同一个事件注册多个监听器
        //=>2 ie9以上支持，对于ie678 用attachEvent()
		// 第一个参数表示事件名称 需要加on
	    //    btn.attachEvent('onclick',function() {
	    //       alert('hello');
	    //    });
	    // btn.detachEvent('onclick',fn);
	
	    // 封装事件监听
	    /*function addEventListener(obj,eventName,fn) {
	        if (obj.addEventListener) {
	            obj.addEventListener(eventName,fn);
	        } else if(obj.attachEvent) {
	            obj.attachEvent('on'+eventName,fn);
	        } else {
	            obj['on'+eventName] = fn;
	        }
	    }

        // addEventListener(事件名称,事件回调函数,是否捕获)
        // 第三个参数 true表示捕获阶段绑定 false表示冒泡阶段 默认值也是false 

		/*
            事件传播机制
            1 捕获阶段
               点击son的时候  首先会从最外层开始向内查找(一直找到操作的事件源)，查找为了
               构建出冒泡传播阶段需要传播的路线
                   window

                   document

                   html

                   body 

                   fa  

                   son       
            2 目标阶段    

            3 冒泡传播    
                // => onblur、onfocus、onmouseenter、onmouseleave 没有冒泡
         
         */

        //window事件
        window.addEventListener("click", function() {
            console.log("window 捕获");
        }, true);
        window.addEventListener("click", function() {
            console.log("window 冒泡");
        }, false);
        window.addEventListener("click", function(e) {
            console.log(e == myEvent);
        });


        document.addEventListener("click", function() {
            console.log("document 捕获");
        }, true);
        document.addEventListener("click", function() {
            console.log("document 冒泡");
        }, false);
        document.addEventListener("click", function(e) {
            console.log(e == myEvent);
        });


        document.body.addEventListener("click", function() {
            console.log("body 捕获");
        }, true);
        document.body.addEventListener("click", function() {
            console.log("body 冒泡");
        }, false);
        document.body.addEventListener("click", function(e) {
            console.log(e == myEvent);
        });



        fa.addEventListener("click", function() {
            console.log("fa 捕获");
        }, true);
        fa.addEventListener("click", function() {
            console.log("fa 冒泡");
        }, false);
        fa.addEventListener("click", function(e) {
            console.log("fa 冒泡");
            // console.log(e == myEvent);
            myEvent = e;
        });
    </script>
</body>

</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件传播机制

事件传播机制DOM0级DOM2级DOM0级事件绑定的方法都是在当前元素事件行为的冒泡阶段执行:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <styl...
复制链接

扫一扫