javascript_事件流_ZHOU125disroder_

`事件流`

	// 事件流:事件流描述的就是页面中接收事件的顺序，也可以理解为事件在页面的传播顺序
    // 事件流，事件冒泡，事件捕获
    // addEventListener(事件名称，事件函数，true/false);
    // true:在捕获阶段执行
    // false:在冒泡阶段执行

`事件冒泡`

<body>
    <div class="father">
        <div class="son">
            <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1917437437,301204826&fm=26&gp=0.jpg" alt="鞠婧祎">
        </div>
    </div>

    <script>
        var father=document.getElementsByClassName("father")[0];
        var son=document.getElementsByClassName("son")[0];
        var img=document.getElementsByTagName("img")[0];
        father.addEventListener("click",function(){
    
    
            alert("father");
        },false);
        son.addEventListener("click",function(){
    
    
            alert("son");
        },false);
        img.addEventListener("click",function(event){
    
    
            event.stopPropagation();#阻止事件冒泡
            alert(img.src);
        },false);
    </script>
</body>

`事件捕获`

事件捕获，自上而下执行代码，把addEventListener里面的第三个参数设置成true，和事件冒泡相反

         father.addEventListener("click",function(){
    
    
            alert("father");
        },true);
        son.addEventListener("click",function(){
    
    
            alert("son");
        },true);
        img.addEventListener("click",function(event){
    
    
            alert(img.src);
            event.stopPropagation();
        },true);

// 如果在事件传播当中，同时有冒泡和捕获，那么执行顺序就变成了 // 捕获>冒泡事件原>冒泡
// 捕获>冒泡事件原>冒泡
father.addEventListener(“click”,function(){
alert(“father”);
},true);
son.addEventListener(“click”,function(){
alert(“son”);
},false);
img.addEventListener(“click”,function(event){
alert(img);
},true);
father
img
son

`event事件对象`

    // event事件对象：指的是与特定事件相关且包含事件详细信息的对象
    // 人话：通俗理解，把event当成一个事件处理程序的参数，调用事件时，传入进去，使用它的方法

阻止事件冒泡

<body>
    <a href="https://www.baidu.com" target="_block">onclick</a>
    <button>点击</button>
    <script>
        var btn=document.getElementsByTagName("button")[0];
        btn.addEventListener("click",function(event){
    
    
            event = event || window.event;
           #event对象方法   2种
            alert("卡卡西");
            // event.stopPropagation();阻止事件冒泡
            
            //ie8及以下的兼容问题
            // cancelBubble代替stopPropagation

            if(event.stopPropagation){
    
    
                event.stopPropagation();
            }else{
    
    
                event.cancelBubble = true;
            }
        },false);

        //阻止事件的默认操作        preventDefalut()
        var a=document.getElementsByTagName("a")[0];
        a.addEventListener("click",function(event){
    
    
            event = event || window.event;
            event.preventDefault();
            alert("卡卡西");

            // 兼容性问题    IE8及以下
            // returnValue值为false来实现

            if(event.preventDefault){
    
    
                event.preventDefault();
            }else{
    
    
                event.returnValue = false;
            }
        },false);

            // stopImmediatePropagation()停止当前进程
        // 也是阻止事件，不同点时还可以把这个元素绑定的同类型事件也进行阻止

        var a=document.getElementsByTagName("a")[0];
        var btn=document.getElementsByTagName("button")[0];
        a.addEventListener("click",fn0,false);
        btn.addEventListener("click",fn1,false);
        function fn0(event){
    
    
            event = event||window.event;
            event.preventDefault();
            event.stopImmediatePropagation();
            alert("a");
        }
        function fn1(){
    
    
            alert("button");
        }
    </script>
</body>

javascript_事件流_ZHOU125disroder_

事件流

事件冒泡

事件捕获

event事件对象

猜你喜欢

`事件流`

`事件冒泡`

`事件捕获`

`event事件对象`