JavaScript 中的attachEvent与addEventListener方法

首页 > javascript > JavaScript 中的attachEvent与addEventListener方法

2009年9月18日 joyboy 阅读(225 ) 发表评论阅读评论

很久没用又忘了在JavaScript中注册事件的使用方法了，这里再回顾下：因为浏览器的不同，在IE下我们用的是attachEvent()方法，而在Mozilla系列，并不支持该方法，需要用到addEventListener(),下面举例说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TesyJS</title>
</head>
<body>
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
<script type="text/javascript">
function method1(){
alert("事件触发了");
 }
 var but = document.getElementsByTagName("button");
//IE下用addEventListener，
//Mozilla系列（如FireFox)下用addEventListener
 if(navigator.userAgent.toLowerCase().indexOf("msie")>-1)
    but[0].attachEvent("onclick",method1);
else
   but[0].addEventListener("click",method1,false);
</script>
</body>
</html>

其中ie浏览器下用的结构为：

element.attachEvent(type,listener)

其中element是要绑定函数的对象,括号中只带2个参数：

type是事件名称，事件名带”on”（如onclick、onfocus）。

listener是要绑定的函数了，记住不要跟括号。

在Mozilla系列的浏览器下，用的结构为：
element.addEventListener(type,listener,useCapture)
其中element是要绑定函数的对象,括号中带3个参数：

type是事件名称，要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”。

listener当然就是绑定的函数了，记住不要跟括号.

最后一个参数是个布尔值，表示该事件的响应顺序,auserCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,因为看下面例子(只在Mozilla系列（如Firefox)中测试)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>TesyJS</title>
<script type="text/javascript">
window.onload=function(){
/**
   *改变第三个参数的值，可以发现当都为true的时候，从外到内依次触发事件
   *当都改为false的时候，从内到外依次触发事件
   *当一个true一个false之时，哪个为true先触发哪个的事件。
   **/
document.getElementById("div_test").addEventListener("click",test1,true); document.getElementById("btn_test").addEventListener("click",test2,true);
 }
 function test1(){ alert("外部div层触发") }
 function test2(){ alert("内部input按钮触发") }
</script>
<body>
 <div id="div_test">
   <input id="btn_test" type="button" value="测试" />
 </div>
</body>
</html>

声明：转载原创文章时请注明：
文章转载自:快乐心情, 原文地址:JavaScript 中的attachEvent与addEventListener方法