您的位置：首页 > Web前端 > JavaScript

JavaScript中绑定事件的三种方法

2012-08-20 17:40 274 查看

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下则刚好相反，按照顺序执行，所以如果需要考虑方法的前后关系的话，要进行相应的调整。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航