DOM 事件模型

DOM 事件模型

ID:38579560

大小:220.50 KB

页数:10页

时间:2019-06-15

DOM 事件模型_第1页
DOM 事件模型_第2页
DOM 事件模型_第3页
DOM 事件模型_第4页
DOM 事件模型_第5页
资源描述:

《DOM 事件模型》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、DOM事件模型事件HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要指元素事件的订阅者)发出各种事件,如click,onmouseover,onmouseout等等。DOM事件流DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。主流浏览器的事件模型早在2004前在HTML元素事件的订阅,发送,传播,处理模型上各浏览器实现并不一致,直到DOMLevel3中规定后,多数主流浏览器才陆陆续续支持DOM标准的事件处理

2、模型—捕获型与冒泡型。目前除IE浏览器外,其它主流的Firefox,Opera,Safari都支持标准的DOM事件处理模型。IE仍然使用自己的模型,即冒泡型,它模型的一部份被DOM采用,这点对于开发者来说也是有好处的,只使用DOM标准,IE都共有的事件处理方式才能有效的跨浏览器。冒泡型事件(Bubbling)这是IE浏览器对事件模型的实现,也是最容易理解的,至少笔者觉得比较符合实际的。冒泡,顾名思义,事件像个水中的气泡一样一直往上冒,直到顶端。从DOM树型结构上理解,就是事件由叶子结点沿祖先结点一直向上传递直到根结点;从浏览器界面视图HTML元素排列层次上理解就是事件由具

3、有从属关系的最确定的目标元素一直传递到最不确定的目标元素.捕获型事件(Capturing)NetscapeNavigator的实现,它与冒泡型刚好相反,由DOM树最顶层元素一直到最精确的元素,这个事件模型对于开发者来说(至少是我..)有点费解,因为直观上的理解应该如同冒泡型,事件传递应该由最确定的元素,即事件产生元素开始。但这个模型在某些情况下也是很有用的,接下来会讲解到。DOM标准事件模型因为两个不同的模型都有其优点和解释,DOM标准支持捕获型与冒泡型,可以说是它们两者的结合体。它可以在一个DOM元素上绑定多个事件处理器,并且在处理函数内部,this关键字仍然指向被绑定

4、的DOM元素,另外处理函数参数列表的第一个位置传递事件event对象。首先是捕获式传递事件,接着是冒泡式传递,所以,如果一个处理函数既注册了捕获型事件的监听,又注册冒泡型事件监听,那么在DOM事件模型中它就会被调用两次。注册与移除事件监听器注册事件监听器,或又称订阅事件,当元素事件发生时浏览器回调该监听函数执行事件处理。目前主流浏览器中有两种注册事件的方法,一种是IE浏览器的,另一种是DOM标准的。1.直接JS或HTML挂载法

element.onclick=function(){aler

5、t(this.innerHTML);}移除时将事件属性设为nul即可,这个也是最常用的方法了,优缺点也是显然的:·简单方便,在HTML中直接书写处理函数的代码块,在JS中给元素对应事件属性赋值即可·IE与DOM标准都支持的一种方法,它在IE与DOM标准中都是在事件冒泡过程中被调用的。·可以在处理函数块内直接用this引用注册事件的元素·要给元素注册多个监听器,就不能用这方法了2.IE下注册多个事件监听器与移除监听器方法IE浏览器中HTML元素有个attachEvent方法允许外界注册该元素多个事件监听器,例如element.attachEvent('onclick',ob

6、server);attachEvent接受两个参数。第一个参数是事件名称,第二个参数observer是回调处理函数。这里得说明一下,有个经常会出错的地方,IE下利用attachEvent注册的处理函数调用时this指向不再是先前注册事件的元素,这时的this为window对象了,笔者很奇怪IE为什么要这么做,完全看不出好处所在。要移除先前注册的事件的监听器,调用element的detachEvent方法即可,参数相同。element.detachEvent('onclick',observer);3.DOM标准下注册多个事件监听器与移除监听器方法实现DOM标准的浏览器与I

7、E浏览器中注册元素事件监听器方式有所不同,它通过元素的addEventListener方法注册,该方法既支持注册冒泡型事件处理,又支持捕获型事件处理。element.addEventListener('click',observer,useCapture);addEventListener方法接受三个参数。第一个参数是事件名称,值得注意的是,这里事件名称与IE的不同,事件名称是没’on’开头的;第二个参数observer是回调处理函数;第三个参数注明该处理回调函数是在事件传递过程中的捕获阶段被调用还是冒泡阶段被调用移除已注册的

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签