js 绑定事件处理机制监听机制

最新推荐文章于 2018-12-03 20:30:10 发布

amnotsuperior

最新推荐文章于 2018-12-03 20:30:10 发布

阅读量463

点赞数

分类专栏： web--js

web--js 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了事件冒泡与事件捕获的概念及其在不同浏览器中的实现方式，并提供了具体的JavaScript代码示例来展示如何使用addEventListener及attachEvent绑定事件。

    <html>
    <body>
    <a href="http://www.sina.com" id='test'>sina</a>  
        </body>  
          
        <script >  
    document.onclick = function(){    
        alert('doc click');    
        return false;  
      }    
     var a = document.getElementById('test');    
     a.onclick = function(){    
         alert('a click');    
          
     }    
        </script>  
</html>

这个是典型的事件冒泡了。

当点击a标签会依次分别触发以下行为：
1.a元素上的onclick事件
2.包含a元素的document的onclick事件
3.浏览器默认行为，即跳转。
当使用return false会打断后续行为。
使用event.preventDefault取消浏览器默认行为
使用event.stopPropagation会取消冒泡，但不取消浏览器默认行为。
当然，不同浏览器不同，这个是较为标准的方式;
通过jquery等插件也可以消除其中差异

很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制（即事件捕获）

后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则（事件冒泡）

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”；
执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

object.event = handler;
的方式初始化。这种方式对于 Internet Explorer、Mozilla/Firefox 和 Opera 来说很通用。但是有一个问题就是，
这种方式只能一个事件对应一个事件处理过程。如果希望一个事件可以依次执行多个处理过程就不好用了。

document.getElementById('status_hide').addEventListener('click', showBox, false); 遵循： FF Safari chrome
eventFlag : 事件名称，如click、mouseover… 没有on
eventFunc: 绑定到事件中执行的动作
useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
在事件监听流中可以使用event.stopPropagation()来阻止事件继续往下流

document.getElementById('status_hide').attachEvent('onclick', showBox) 遵循 IE opera
eventFlag: 事件名称，但要加上on，如onclick、onmouseover…
eventFunc: 绑定到事件中执行的动作
在事件监听流中可以使用window.event.cacenlBubble=false 来阻止事件继续往下流

if(document.addEventListener){

document.<span><span>getElementById('status_show')</span></span>.addEventListener('click', hideBox, false); //false确定的是事件冒泡，向上冒泡到document，触发document设置的click时hidebox方法
}
else{
document.<span><span><span><span><span><span><span><span>getElementById('status_show')</span></span>.attachEvent</span></span></span></span></span></span>('onclick',hideBox);
}
function hideBox(){
}

  if (window.attachEvent) { 
                window.attachEvent("onload", remove); 
            } else if (window.addEventListener) { 
                window.addEventListener("load", remove, false);   
            }  
  function remove(){
   }

attachEvent绑定多个事件执行顺序问题

document.getElementById('wrap').onclick = function(){a();b();}

我们时常这样来写一个单独的绑定方法bind(el,name,fn)，具体代码如下。
<pre><span style="color:#0000ff;">function</span><span style="color:#000000;"> bind(el,name,fn){ </span><span style="color:#008000;">//</span><span style="color:#008000;">绑定事件</span><span style="color:#008000;">
</span><span style="color:#000000;">  </span><span style="color:#0000ff;">return</span><span style="color:#000000;"> el.addEventListener</span><span style="color:#000000;">?</span><span style="color:#000000;">el.addEventListener(name,fn,</span><span style="color:#0000ff;">false</span><span style="color:#000000;">):el.attachEvent(</span><span style="color:#000000;">'</span><span style="color:#000000;">on</span><span style="color:#000000;">'</span><span style="color:#000000;">+</span><span style="color:#000000;">name,fn);
    }</span>

bind(document.getElementById('wrap'),'click',a);
bind(document.getElementById('wrap'),'click',b);

ie6 ie7 随机顺序 ie8 逆序

非 ie opera 执行顺序

jquery $bind 顺序执行

js 绑定事件 处理机制 监听机制

attachEvent绑定多个事件执行顺序问题

js 绑定事件处理机制监听机制