存档

文章标签 ‘addEventListener’

attachEvent 与 addEventListener 对同一物件事件多次绑定的触发顺序

2009年9月20日 joyboy 没有评论

再来讲述JavaScript中的attachEvent 与 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">
<script type="text/javascript">
window.onload=function(){
var testbut = document.getElementById("btn_test");
var info = document.getElementById("info")
 if (window.attachEvent)
{
    //IE
    testbut.attachEvent("onclick", function () { info.innerHTML += "1" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "2" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "3" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "4" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "5" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "6" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "7" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "8" + "
"; });
    testbut.attachEvent("onclick", function () { info.innerHTML += "9" + "
"; });
}
else
{
    //Firefox
    testbut.addEventListener("click", function () { info.innerHTML += "1" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "2" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "3" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "4" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "5" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "6" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "7" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "8" + "
"; }, false);
    testbut.addEventListener("click", function () { info.innerHTML += "9" + "
"; }, false);
}
}
</script>
</head>
<body>
<input id="btn_test" type="button" value="测试" />
<div id="info"></div>
</body>
</html>

IE下输出的结果为：
4  6  8  9  7  5   3  2  1
Firefox下输出的结果为：
1  2  3  4   5  6   7   8  9
从这可以看出在IE下它的触发顺序是乱七八糟的，而在火狐Firefox下，先绑定的先执行，以后得注意点了….

分类: javascript 标签: , ,

JavaScript 中的attachEvent与addEventListener方法

2009年9月18日 joyboy 没有评论

很久没用又忘了在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 标签: , ,