javascript之事件模型

事件模型

冒泡型事件（Bubbling）：事件由叶子节点沿祖先节点一直向上传递到根节点

捕获型事件（Capturing）：由DOM树最顶元素一直到最精确的元素，与冒泡型事件相反

DOM标准事件模型：DOM标准既支持冒泡型事件，也支持捕获型事件，可以说是两者的结合体，首先是捕获型，接着冒泡传递

事件对象

在IE浏览器中事件对象是window的一个属性，在DOM标准中，event必须作为唯一的参数传给事件处理函数

获得兼容的event 对象：
function(event){ //event 是作为DOM标准的参数传入处理函数event = event ?event : window.event;
}
在IE中，事件的对象包含在event的srcElement中，而在DOM标准中，对象包含在target属性中

获得兼容的event 对象指向的元素：
var target =event.srcElement ? event.srcElement : event.target ;
前提是，保证event对象已经正确的获取

事件监听器

IE下，注册的监听器逆序执行，即后面注册的先执行
element.attachEvent('onclick',observer);   //注册监听器
element.detachEvent('onclick',observer)   //移除监听器
第一个参数为事件名称，第二个为回调处理函数

DOM标准下：
element.addEventListener('click',observer,useCapture)
element.removeEventListener('click',observer,useCapture)
第一个参数为事件名称，没有“on”的前缀，第二个参数为回调处理函数，第三个参数说明回调函数是在捕获阶段调用还是冒泡阶段调用，默认true为捕获阶段

事件传递

兼容地取消浏览器的事件传递
function someHandler(event){event = event || window.event;if(event.stopPropagation)   //DOM标准event.stopPropagation();elseevent.cancelBubble = true;   //IE标准
}
取消事件传递后的默认处理
function someHandler(event){event = event || window.event;if(event.preventDefault)   //DOM标准event. preventDefault ();elseevent.returnValue = true;   //IE标准
}

转载于:https://www.cnblogs.com/duadu/p/6335914.html

javascript之事件模型相关推荐

Javascript知识——事件
O(∩_∩)O~~又是新的一周开始了,今天还是在继续学习Javascript知识,今天主要讲了事件的知识.现在就总结下吧. 事件事件一般是用于浏览器和用户操作进行交互.最早是 IE 和 Netsca ...
html流动模型,javascript的事件流模型都有什么？
事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的.事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同. JavaScript ...
JavaScript 复习之事件模型和 Event对象
事件模型一.监听函数 js 有三种方法,可以为事件绑定监听函数 HTML 的 on- 属性元素节点的事件属性,也可以指定监听函数 EventTarget.addEventListener() DO ...
javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
Javascript事件模型系列（一）事件及事件的三种模型
一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
JavaScript 事件模型事件处理机制
这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...
轻松学习JavaScript二十七：DOM编程学习之事件模型
在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由访问Web页面的用户引起的一系列操作,使我们有能力创建动态页面,事件是可以被 JavaScri ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等由于DOM是一个树结构,如果在 ...
JavaScript中的事件传播(DOM2标准事件模型)
在所有的现代浏览器当中--除了IE9之前的版本--都实现了DOM2标准事件模型,这个事件模型规定:每一个DOM元素所触发的事件都要经历三个阶段:一.捕获阶段:二.目标对象本身的事件处理程序调用阶段:三 ...

javascript之事件模型

事件模型

事件对象

事件监听器

事件传递

javascript之事件模型相关推荐

最新文章

热门文章