JS中有三种最常用的绑定事件的方法,如下文所示,这里重点说一下第三种,因为在不同的浏览器中存在差异。
第一种,也是见的最多的,在<input>标签里绑定:
<input type=“button” οnclick="functionName()"> 当点击按钮时触发事件
第二种,直接获取要绑定的对象后绑定:
//通过Id获取对象
var btn = documen.getElementById("button");
btn.οnclick= 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下则 刚好相反,按照顺序执行,所以如果需要考虑方法的前后关系的话,要进行相应的调整。