JavaScript中绑定事件的三种方法

来源：互联网发布：frontpage软件编辑：程序博客网时间：2024/06/05 04:23

JS中有三种最常用的绑定事件的方法，如下文所示，这里重点说一下第三种，因为在不同的浏览器中存在差异。

第一种，也是见的最多的，在<input>标签里绑定：

<input type=“button” onclick="functionName()"> 当点击按钮时触发事件

第二种，直接获取要绑定的对象后绑定：

//通过Id获取对象

var btn = documen.getElementById("button");

btn.onclick= functionName; //注意只有方法名，不加"()"

第三种，也就是我们要说的，用添加监听的方法，先看一段实例代码：

Demo.html

   <html>
<head>
<script type="text/javascript">
    //方法一
   function method1(){
     alert("method1");
   }
   //方法二
   function method2(){
     alert("method2");
   }
   //方法三
   function method3(){
     alert("method3");
   }
   window.onload = function(){
     var btn1 = document.getElementById("btn1");
     var div1 = document.getElementById("div1");
     var div2 = document.getElementById("div2");
     //进行浏览器判断
     if(btn1.addEventListener){
     //Firefox
       btn1.addEventListener("click",method1,false);
       btn1.addEventListener("click",method2,false);
       btn1.addEventListener("click",method3,false);
       div1.addEventListener("click",method1,false);
       div2.addEventListener("click",method2,false);
     }else{
     //Ie
       btn1.attachEvent("onclick",method1);
       btn1.attachEvent("onclick",method2);
       btn1.attachEvent("onclick",method3);
     }
   }
</script>
</head>
<body>
<form>
<input id="btn1" type="button" />
<div style="background:red;width:100px;height:100px" id="div1"><div style="background:blue;width:50px;height:50px;margin:10px auto" id="div2"></div></div>
</form>
</body>
</html>

结果很简单，就是显示一个按钮，和两个嵌套的div，但是在IE下点击按钮时，结果先后顺序为：

alert("metod3")

alert("metod2")

alert("metod1")

Firefox下则刚好相反，按照顺序执行，所以如果需要考虑方法的前后关系的话，要进行相应的调整。