attachEvent和addEventListener都是动态为网页内的元素添加一个事件。通常你想为某个按扭添加一个单击事件时．你都会在按扭内写上onclick=事件名称.但是若对象需要绑定多个事件则无法使用这种方式。所以我们来看看下面的代码：

区别:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="a" type="button" value="点我" />注意该按扭没有任何事件<br/>
    <input id="b" type="button" value="点我绑定事件" onclick="att_Event()" />点击该按扭为上面的按扭添加一个事件．
	<script type="text/javascript">
	  function att_Event(){
	  	var btn_a=document.getElementById('a');
	  	btn_a.value="点我有事件";
	   //方式：非ie都支持,但ie9以上支持
	   btn_a.addEventListener('click',Hello_ok,false);
	   /*不一样的是，该方法不可以把同一事件绑定多次,但支持把不同的事件绑定到一个元素,false代表支持浏览器事件捕获功能，true代表支持浏览事件冒泡功能． 事件名称有click、mouseover、keydown等
	   */
	    
	   //方式：只支持ie游览器,且版本11以下支持,11不支持
	   //btn_a.attachEvent('onclick',Hello_ok);
	   /*attachEvent支持为某个元素绑定多个事件．执行顺序是，后绑定的先执行
         事件名称有onclick、onmouseover、onkeydown等
	   */
	  }

	  function Hello_ok(){
	  	alert("Hello word");
	  }
	</script>
</html>

兼容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<input id="a" type="button" value="点我" />注意该按扭没有任何事件<br/>
    <input id="b" type="button" value="点我绑定事件" onclick="att_Event()"/>点击该按扭为上面的按扭添加一个事件．
	<script>
        function att_Event(){
        	var btn_a=document.getElementById('a');
        	a.value="点我有事件";

        	/*在网上看到document.all(返回所有页面元素这两个的集合)
        	是判断是否为ie游览器的方法,但是经测试发现document.all
        	的方法ff和chrome都支持，因此不能作为判断是否为ie游览器。
        	经测试可以使用JavaScript框架的navigator的userAgent的属
        	性来判断游览器的类别：
        	1.是否为ff;
        	2.是否为ie[<mark>注：ie11不支持</mark>];
        	3.是否为其他游览器.
        	*/
             
            function isIE(){
                if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
	            	alert('你是使用IE');
	            	return true;
	            }else if (navigator.userAgent.indexOf('Firefox') >= 0){
	            	alert('你是使用Firefox');
	            	return false;
	            }else if (navigator.userAgent.indexOf('Opera') >= 0){
	            	alert('你是使用Opera');
	            	return false;
	            }else{
	            	alert('你是使用其他的浏览器浏览网页！');
	            	return false;
	            }	
            }


        	if(isIE()){//返回所有页面元素这两个的集合,这是ie游览器特有的属性，放在if中表示这是ie
        		a.attachEvent('onclick',Hello_ok);
        	}else{
        		a.addEventListener('click',Hello_ok,false);
        	}
        }

        function Hello_ok(){
        	alert("hello word");
        }
	</script>
</body>
</html>

备注:JavaScript框架的navigator的userAgent的属性也可以用作判断是否为移动设备