日期:2014-05-16  浏览次数:20487 次

关于JS兼容监听attachEvent和addEventListener
今天学习了一下attachEvent和addEventListener这两个方法

具体代码如下:

=============================================

<html>
<script language="javascript">
    /*
     页面加载时在页面内放置一个层
 */
    document.writeln("<div id='divMix'>&nbsp;</div>");
</script>
<script language="javascript">
    /*
     创建一个按钮,奖其放在先前放置的层内
  使用attachEvent或者addEventListener方法不其注册事件
 */
 var btn=document.createElement("input");
 btn.setAttribute("type","button");
 btn.setAttribute("id","btnEle");
 btn.setAttribute("value","点击我");
 /*
  判断浏览器类型
  我的机器装了4种浏览器(IE,傲游,火狐,netscape)
  我试验的结果是
  IE,傲游支持attachEvent;而火狐,netscape支持addEventListener
 */
 if(btn.attachEvent){
  btn.attachEvent("onclick",method1);
  btn.attachEvent("onclick",method2);
  btn.attachEvent("onclick",method3); 
  /*
     三个方法调用的顺序是method2>method3>method1
     而很多人的博客上看到的却是method3>method2>method1
     很是奇怪,不知是不是浏览器版本的问题,当前IE6.0
  */
 }
 else if(btn.addEventListener){
  btn.addEventListener("click",method1,true);
  btn.addEventListener("click",method2,true);
  btn.addEventListener("click",method3,true);
 }
 /* 获取先前创建的层对象 */
 var div=document.getElementById("divMix");

 /* 使用typeof运算符判断获取的层对象是否存在
    如果存在则奖创建的按钮放到层里面,反之则提示没有
    找到相关对象
 */
 if(typeof(div)=="object"){
     div.appendChild(btn);
  /*
     火狐,netscape好像不支持appendChild这个方法
     所以在火狐,netscape看不到效果
  */
 }else{
  alert("没有找到相关对象!");
 }
  

function method1(){
 alert("method1()");
}


function method2(){
alert("method2()"); 
}


function method3(){
alert("method3()"); 
}

</script>
<body>
</body>
</html>