zoukankan      html  css  js  c++  java
  • 元素多个事件的处理顺序

    1.给dom元素绑定事件

    <div id="box"></div>
    

    2.简单设置一下样式

    #box{
    	 100px;
    	height: 100px;
    	background-color: deepskyblue;
    }
    

    3.通过js绑定事件,后面的事件会覆盖前面的事件

    var box=document.getElementById("box");
    box.onclick=function(){  // 不执行
    	alert(1);
    }
    box.onclick=function(){ // 执行
    	alert(2);
    }
    

    4.通过jquery绑定事件,会按照顺序执行

    $("#box").click(function(){  // 执行弹出1 
    	alert(1);
    })
    $("#box").click(function(){ // 执行弹出2
    	alert(2);
    })
    

    5.通过addEvenetListener绑定事件,按照代码顺序执行

    var box=document.getElementById("box");
    box.addEventListener('click',function(){alert(1)},false) // 弹出1
    box.addEventListener('click',function(){alert(2)},false) // 弹出2
    box.addEventListener('click',function(){alert(3)},true)  // 弹出3
    // addEventListener的第三个参数代表的是事件执行的时机,true代表在捕获阶段执行,false代表是在冒泡阶段执行,默认是false
    
  • 相关阅读:
    springAOP实现原理
    cglib用法
    git 用法
    java基础算法之快速排序
    记一次与a标签相遇的小事
    java设计模式之建造者模式
    HashMap源码分析
    Linux下安装nginx
    java设计模式之策略模式
    java设计模式之中介者模式
  • 原文地址:https://www.cnblogs.com/bonly-ge/p/9327547.html
Copyright © 2011-2022 走看看