事件传播机制

事件传播机制(这里内容如果有错,欢迎指正)

DOM0级

DOM2级

DOM3级


事件中的冒泡 / 阻止冒泡

DOM0 DOM2 DOM3的区别


事件传播机制_第1张图片


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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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级的三个事件

  • 事件冒泡(常用)
    事件传播机制_第2张图片
  • 时间捕获
    事件传播机制_第3张图片
  • DOM事件流(常用)
    事件传播机制_第4张图片

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

返回顶层目录


返回顶层目录


返回目录

你可能感兴趣的:(前端,事件传播机制,DOM0,DOM2,DOM3,DOM各级之间的区别)