您的位置：首页 > Web前端 > JavaScript

addEventListener()及attachEvent()区别

2016-09-21 18:14 260 查看
今天仔细看了一下addEventListener() attachEvent()写篇博客记忆一下。

html代码很简单一句话：

<!DOCTYPE html>
<html lang="en">
<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()
参数32
事件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("你好！");
}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                addEventListener
                                                attachEvent
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航