addEventListener，attachEvent

addEventListener是js填加事件；用法如下：

target.addEventListener(type,listener,useCapture)

target： 文档节点、document、window 或 XMLHttpRequest。
type：
字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：实现了
EventListener 接口或者是 JavaScript 中的函数。也就是function之类的。 
useCapture ：是否使用捕捉，一般用 false
。

例如：document.getElementById("testText").addEventListener("keydown", function
(event) { alert(event.keyCode); }, false);

主要理解下第三个参数 useCapture；如果为true则是capture捕获事件，如果是false则是budding冒泡事件，（关于冒泡事件和捕获事件可以参考文章：http://www.cnblogs.com/MissBean/p/4256235.html）

看个例子感受下：

1 　　<div id="div_test">
2         <input type="button" id="btn_test" value="测测" />
3     </div>

 1 　　 <script type="text/javascript">
 2         window.onload=function(){
 3             document.getElementById("div_test").addEventListener("click",test1,false);
 4             document.getElementById("btn_test").addEventListener("click",test2,false);
 5         }
 6         function test1(){
 7          alert("外层div触发")
 8         }
 9         function test2(){
10             alert("内层input触发")
11         }
12     </script>

第三行和第四行都是false。所以是冒泡事件，会先触发子级事件也就是test2,再触发父级，也就是test1.

如果将三四行的false改成true，则是捕获事件，会先触发父级事件再触发子级事件；

但是如果一个是false一个是true呢？此时要看最父级是true还是false，最父级是true则捕获，false则冒泡；此例中，div_test是父级，所以看第三行是true还是false，决定是捕获还是冒泡。

IE中，因为之前IE版本默认都是冒泡事件，所以用target.attachEvent(type, listener); 两个参数即可；

target： 文档节点、document、window 或 XMLHttpRequest。
type：
字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：实现了
EventListener 接口或者是 JavaScript 中的函数。

例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});

想要让它兼容所有浏览器，可以做一个判断

1 　　<div class="box">
2         <input type="button" value="按钮1" id="btn1" onclick="showE();" />
3         <input type="button" value="按钮2" id="btn2" />
4         <input type="button" value="按钮3" id="btn3" />
5     </div>

 1 　　function showE(){
 2         console.log(1111);
 3     }
 4 　　var eventUntil={
 5         addHandler:function (element,type,handler){
 6             if(element.addEventListener){
 7                 element.addEventListener(type,handler,false);
 8             }else if(element.attachEvent){
 9                 element.attachEvent(‘on‘+type,handler)
10             }else{
11                 element[‘on‘+type]=handler;
12             }
13         },
14         removeHandler:function (element,type,handler){
15             if(element.removeEventListener){
16                 element.removeEventListener(type,handler,false);
17             }else if(element.detachEvent){
18                 element.attachEvent(‘on‘+type,handler)
19             }else{
20                 element[‘on‘+type]=null;
21             }
22         }
23     }
24     eventUntil.addHandler(obtn3,"click",showE)

上面6-12行是做判断，这样就兼容了所有浏览器