当前位置:首页 > 开发 > Web前端 > DOM > 正文

W3C DOM 事件模型(简述)

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
dom
摘要: 1、事件模型 由于事件捕获与冒泡模型都有其长处和解释,DOM标准支持捕获型与冒泡型,能够说是它们两者的结合体。它能够在一个DOM元素上绑定多个事件处理器,而且在处理函数内部,thiskeyword仍然指向被绑定的DOM元素,另外处理函数參数列表的第一个位置传递事件event对象。首先是捕获式传递事件,接着是冒泡式传递,所以,假设一个处理函数既注冊了捕获型事件的监听,又注冊冒泡型事件监听,那么在D

1、事件模型

由于事件捕获与冒泡模型都有其长处和解释,DOM标准支持捕获型与冒泡型,能够说是它们两者的结合体。它能够在一个DOM元素上绑定多个事件处理器,而且在处理函数内部,thiskeyword仍然指向被绑定的DOM元素,另外处理函数參数列表的第一个位置传递事件event对象。首先是捕获式传递事件,接着是冒泡式传递,所以,假设一个处理函数既注冊了捕获型事件的监听,又注冊冒泡型事件监听,那么在DOM事件模型中它就会被调用两次。

【 oschina】

2、事件传播

A)冒泡模式(Bubble)IE浏览器仅仅支持这样的形式的传播,即事件对象从事件触发的目标(target)開始,一直传播到侦听相同事件类型的target祖先结点为止。即作为全局变量的时间对象沿着”元素树“向上传播

B)捕捉模式(Capture)这样的模式与冒泡模式正好相反,即事件对象是从目标的外层向目标传播的,即从树的根结点向叶子结点传播。

3、事件注冊

依据 DOM 2 Events 中描写叙述,节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器。

if(add.addEventListener){
    add.addEventListener("click",showMsgB,false);
    remove.addEventListener("click",removeE,false);
}
IE下没有addEventListener,可是也有自己的attachEvent,即所谓的Microsoft Model。二者的实现基本同样仅仅是attachEvent的第一个參数(事件类型)须要加”on”,而addEventListener不用,另外attachEvent由于不支持事件捕捉,所以也没有第三个參数。
if(add.attachEvent){
    add.attachEvent("onclick",showMsgA);
    remove.attachEvent("onclick",removeE);
}

在支持W3C DOM的浏览器中,传统的事件注冊被看作是注冊于冒泡阶段。element.onEvent =handler()

4、stopPropagation, preventDefault 和 return false 的差别

stopPropagation():由于事件能够在各层级的节点中传递, 无论是冒泡还是捕获, 有时我们希望事件在特定节点运行完之后不再传递, 能够使用事件对象的 stopPropagation() 方法。

preventDefault() 阻止后面将要运行的浏览器默认动作。

return false 之后的全部触发事件和动作都不会被运行。

參考资料

DOM事件模型:http://wenku.baidu.com/view/feafe986b9d528ea81c779e3.html

SD9011: 事件模型在各浏览器中存在差异:http://w3help.org/zh-cn/causes/SD9011

W3C DOM及其事件模型之初见:http://blog.csdn.net/yczxwestwood/article/details/6412997

stopPropagation, preventDefault 和 return false 的差别:http://www.neoease.com/stoppropagation-and-preventdefault-and-return-false/

W3C DOM 事件模型(简述)

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
参考了如下链接,备忘一下: DOM事件模型 见下图: 标准DOM2的事件传播模型分2个阶段: 首先是捕获阶
今天在做一个效果时遇到了一点问题,详细的示意代码如下: 一共两个函数,都是要求打印点击事件;但
前言 很久没有扯淡了,我们今天来扯淡吧。 我今天思考了一个问题,我们页面的dom树到底是如何渲染的
贴代码 test1.html <div id="div1" style="height:130px;border:1px solid red;width:130px;">
webkit dom事件分析 Dom事件模型可以分为dom0 和dom2两种事件模型,所以支持JavaScript的浏览器都都
对于用户事件类型而言,最常用的是鼠标、键盘、浏览器。 1.鼠标事件: 鼠标的事件都频繁使用,下面
Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM(文档对象模型)事
在学习了Java、C++这类面向对象编程语言之后,学习JavaScript的朋友可能会有一个很让人费解的疑问:
一个典型的结构模型 ActivityA包含ViewGroupB,ViewGroupB包含ViewC,这里选取ViewGroupB(中间节点
1、dom 的定义 document object model (文档对象模型) 2、为什么叫文档对象模型? dom 可以将标记
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号