addEventListener()函数具有三个参数，第一个参数事件类型，需要注意的是，事件类型名称前面不能有on，例如window.onload事件，在这个地方只能写作load，第二个参数是要绑定的函数名称，第三个参数一般为false。
使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数，所以attachEvent()函数就有了用武之地了，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid red; } </style> <script type="text/javascript"> window.attachEvent("onload",bg); window.attachEvent("onload",changeW); function bg(){ document.getElementById("bg").style.backgroundColor="#F90"; } function changeW(){ document.getElementById("bg").style.width="200px"; } </script> </head> <body> <div></div> </body> </html>
以上代码的效果和使用addEventListener()函数的效果是一样的，简单介绍一下语法格式:
addEventListener("type",函数名)
此函数只有两个参数，第一个参数是事件类型，不过它和addEventListener()的第一个参数的作用是一样，但是名称有所区别，名称前面是具有"on"，第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器，需要将以上代码进行改造，实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法</title> <style type="text/css"> #bg{ width:100px; height:100px; border:2px solid red; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener("load",bg,false); window.addEventListener("load",changeW,false); } else{ window.attachEvent("onload",bg); window.attachEvent("onload",changeW); } function bg(){ document.getElementById("bg").style.backgroundColor="#F90"; } function changeW(){ document.getElementById("bg").style.width="200px"; } </script> </head> <body> <div></div> </body> </html>
以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:
if(object.addEventListener){ object.addEventListener(); } else{ object.attachEvent(); }
通过if语句判断对象是否具有addEventListener属性，如果有这使用addEventListener()函数，否则使用attachEvent()函数
您可能感兴趣的文章: