js事件机制２

一．js的事件捕获和事件冒泡机制

在js中先要执行事件捕获然后再执行事件冒泡

同时，事件捕获是由父节点逐渐向子节点传播，而事件冒泡是由子节点逐渐向父节点传播．

     <script type="text/javascript">
         var p = document.getElementById('p'),
             c = document.getElementById('c');
         c.addEventListener('click', function () {
             alert('子节点冒泡')
         }, false);
         c.addEventListener('click', function () {
                          alert('子节点捕获')
                      }, true);
         p.addEventListener('click', function () {
                  alert('父节点捕获')
             }, true);
         p.addEventListener('click', function () {
                  alert('父节点冒泡')
              }, false);
    </script>

 上面的代码详细的解释了，关于事件冒泡和事件捕获的触发顺序．

 

二.关于addEventListener和attachEvent的区别

1.addEventListener

适用于FF浏览器

target.addEventListener(type, listener, useCapture); 
target： 文档节点、document、window 或 XMLHttpRequest。 
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。 
listener ：实现了 EventListener 接口或者是 JavaScript 中的函数。 
useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 

2.attachEvent

适用于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);}); 

三．事件移除

W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: 
W3C格式: 
removeEventListener(event,function,capture/bubble); 
Windows IE的格式如下: 
detachEvent(event,function);