addEventListener()及attachEvent()区别_ele.attachevent-CSDN博客

本文链接：https://blog.csdn.net/u011456552/article/details/52611256

今天仔细看了一下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()
参数	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("你好！");
			}