说到事件,就要追溯到网景与微软的“浏览器大战”了。当时,事件模型还没有标准,两家公司的实现就是事实标准。网景在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="width:200px; height:200px; position:absolute; top:100px; left:100px; z-index:4">
<div id="id2" style="width: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);
});

js 事件模型的更多相关文章

  1. JS事件模型小结

    三种事件模型:原始事件模型(DOM0),DOM2事件模型,IE事件模型: 不同点: 事件程序的注册(给HTML元素所对应的JS对象绑定事件) 事件传播的过程 事件模型的注册: 一.原始事件模型(没有兼 ...

  2. js 事件模型详解

    把js的事件模型,分为两类,DOM0级和DOM2级, DOM0级 通常直接在DOM对象上绑定函数对象,指定事件类型,dom.onClick = function(){};类似于这种写法,移除事件,则直 ...

  3. js事件模型与自定义事件

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...

  4. js事件模型

    连接在此 http://www.cnblogs.com/zqstc/archive/2009/11/26/1611464.html

  5. JS的事件模型

    之前对事件模型还是比较清楚的,许多概念都清晰映射在脑海中.工作之后,一方面使用的局限性,二是习惯于用框架中的各种事件监听方式,简单即方便,久而久之,事件的一些概念开始淡出记忆中,就像我现在已经开始淡忘 ...

  6. javascript中0级DOM和2级DOM事件模型浅析 分类: C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读 评论(0) 收藏

    Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...

  7. JS事件流模型

    JS事件流模型 事件捕获Event Capturing是一种从上而下的传播方式,以click事件为例,其会从最外层根节向内传播到达点击的节点,为从最外层节点逐渐向内传播直到目标节点的方式. 事件冒泡E ...

  8. js实现事件模型bind与trigger

    function Emitter() { this._listener = [];//_listener[自定义的事件名] = [所用执行的匿名函数1, 所用执行的匿名函数2] } //注册事件 Em ...

  9. js二级事件模型的处理细节

    一.纠正网络上的一个误传--“IE不支持事件捕获” 可以在浏览器中运行上面demo,在各主流浏览器中,鼠标移上都可以分别触发捕获与冒泡事件的监听函数,所以IE也是支持事件捕获的,连IE6都支持,只是在 ...

随机推荐

  1. 转:关于S参数的一些理解

    关于S参数的一些理解 http://rf.eefocus.com/module/forum/thread-596241-1-1.html 台湾工程师图文独特讲解:S参数http://rf.eefocu ...

  2. Atitit 关于共享经济之共享男女朋友的创业计划

    Atitit 关于共享经济之共享男女朋友的创业计划 1. 共享经济的历史与趋势 1 1.1. 共享经济三大特征=产能过剩+共享平台+人人参与. 1 1.2. 共享经济是个大趋势,使用权渐渐的取代所有权 ...

  3. Mybatis(二) 全局配置文件详解

    这节来说说全局配置文件的东西,非常简单.看一遍就懂了. --WH 一.全部配置内容 SqlMapConfig.xml的配置内容和顺序如下,顺序不能乱.现在来对这些属性的意思一一进行讲解. 二.prop ...

  4. 【原创 深度学习与TensorFlow 动手实践系列 - 2】第二课:传统神经网络

    第二课 传统神经网络 <深度学习>整体结构: 线性回归 -> 神经网络 -> 卷积神经网络(CNN)-> 循环神经网络(RNN)- LSTM 目标分类(人脸识别,物品识别 ...

  5. (转)java术语(PO/POJO/VO/BO/DAO/DTO)

    转自:http://blog.csdn.net/gaoyunpeng/article/details/2093211 PO(persistant object) 持久对象在o/r 映射的时候出现的概念 ...

  6. npm install 项目安装遇到问题

    npm cache clean/clear --force

  7. 程序猿必备的8款web前端开发插件三

    1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...

  8. 转载:Quartz.NET 入门

    分享自:http://www.cnblogs.com/jys509/p/4628926.html 概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮 ...

  9. F3D模式规则详解

    F3D有两个版本,长期版还有短期版 长期版规则 1.购买时候分配 第一队 20% to 奖金池, 56%分给所有人, 30% 持有p3d的人第二队 35% to 奖金池, 43%分给所有人, 8% 持 ...

  10. AI人工智能顶级实战工程师 课程大纲

    课程名称    内容    阶段一.人工智能基础 — 高等数学必知必会     1.数据分析    "a. 常数eb. 导数c. 梯度d. Taylore. gini系数f. 信息熵与组合数 ...