今天仔细看了一下addEventListener() attachEvent()写篇博客记忆一下。
html代码很简单一句话：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" id="btn">
</body>
</html>
js语法分别是 :
element.addEventListener(event, function, useCapture) //FF
attachEvent(event,function) //IE
<script type="text/javascript">
window.onload =function () {
var oBtn =document.getElementById('btn');
//chrome
oBtn.addEventListener("click", function(){
alert('你好！')
}, false)
}
</script>
<pre name="code" class="javascript"><script type="text/javascript">
window.onload =function () {
var oBtn =document.getElementById('btn');
//IE
oBtn.attachEvent("onclick", function(){
alert('你好！');
})
}
</script>
| 区别点 | addEventListener() | attachEvent() |
|---|---|---|
| 参数 | 3 | 2 |
| 事件 | click不需要“on” | onclick需要加“on” |
| 适应 | FF | IE |
个人感觉两者差不多！就是element.addEventListener()多一个useCapture参数。该参数默认为false
如果想看false和true 具体表现出来的效果，戳我！
为了让这个事件兼容 我写了以下方法
//compatible writing
function addEvent(ele,eve,fn){
if(ele.attachEvent){
ele.attachEvent('on'+eve,fn);
}else{
ele.addEventListener(eve,fn,false);
}
}
addEvent(oBtn,'click',function(){
alert('你好！');
})
当然，网上有许多其他写法 比如这个比较全 。我这个写法 纯属加深自己的记忆，献丑了！
还有一个if else if的写法
var x = document.getElementById("btn");
if (x.addEventListener){
x.addEventListener("click", myFunction);
}else if (x.attachEvent)
{
x.attachEvent("onclick", myFunction);
}
function myFunction()
{
alert("你好！");
}
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)