js 事件模型

说到事件，就要追溯到网景与微软的“浏览器大战”了。当时，事件模型还没有标准，两家公司的实现就是事实标准。网景在Navigator中实现了“事件捕获”的事件系统，而微软则在IE中实现了一个基本上相反的事件系统，叫做“事件冒泡”。这两种系统的区别在于当事件发生时，相关元素处理（响应）事件的优先权不同。

下面举例说明这两种事件机制的区别。假设文档中有如下结构：

<div>
    <span>
        <a>...</a>
    </span>
</div>

因为这三个元素是嵌套的，所以单击了a，实际上也就单击了span和div。换句话说，这三个元素都应该有处理单击事件的机会。在事件捕获机制下，处理这个单击事件的优先次序是：div > span > a；而在事件冒泡机制下，处理这个单击事件的优先次序则是：a > span > div。

后来，W3C的规范要求浏览器同时支持捕获和冒泡机制，并允许开发人员选择把事件注册到哪个阶段。于是就有了下面这个注册事件的标准方法：

target.addEventListener(type, listener, useCapture Optional );

其中：

• type：字符串，表示监听的事件类型
• listener：监听器对象（JavaScript函数），在指定事件发生时可以收到通知
• useCapture：布尔值，是否注册到捕获阶段

在实际应用开发中，为了确保与IE（因为它不支持捕获）兼容，useCapture一般都指定为false（默认值也是false）。换句话说，只把事件注册到冒泡阶段；对于上面那个简单的例子来说，响应顺序就是：a > span > div。

一、事件冒泡（ Event Bubbling）

           IE 的事件流叫做事件冒泡，即事件开始时由最躯体的元素接收，然后逐级向上传播到较为不具体的节点。

           IE9 、FF、 Chrome和Safari 将事件一直冒泡到 <window>对象。

                    

二、事件捕获（ Event Capturing）

           事件捕获的思想是不太具体的节点应该更早接收到事件，二最具体的节点应该最后接收到事件。

                    

           IE9 、FF、 Chrome、Opera 和Safari都支持这种事件流模型，“ DOM2级事件”规范要求应该从 document对象开始传播，但是这些浏览器都是从 window对象开始捕获事件的。

 

 

利用jquery  阻止事件冒泡和元素事件的默认行为

 

 

$(function(){
       $("#id1").on("click",function(event){
                    console.log('id1');
                    //阻止冒泡
                    //event.stopPropagation();
                    //阻止元素事件的默认行为例如表单提交
                    //event.preventDefault();
                    //或者返回false   阻止冒泡和默认行为
                    return false;
       });
                
                $("#id2").on("click",function(event){
                    console.log('id2');
                    event.stopPropagation();
                });
                
            });


<div id="id1" style="200px; height:200px; position:absolute; top:100px; left:100px; z-index:4">
          <div id="id2" style="200px; height:200px; position:absolute; top:20px; left:70px; z-index:1"></div>
        </div>

 给div元素下class =sound 的未来元素绑定click事件

$("#msg-list").on("click","div.sound",function(event){
    msgItemTap(this, event);
});