W3C DOM 事件模型(简述)

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/

时间: 2024-10-01 03:40:27

W3C DOM 事件模型(简述)的相关文章

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">        

DOM事件模型

DOM 首先,DOM全称是Document Object Model,即文档对象模型.DOM是W3C的标准,定义了访问 HTML 和 XML 文档的标准. “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” DOM事件 DOM使Javascript有能力对HTML上的事件做出反应.这些事件包括鼠标键盘的点击事件.移动事件以及页面中内容的变化等.HTML元素事件是浏览器内在自动产生的,当有事件发生时html元素会向外界(这里主要

javascript的IE事件和DOM事件模型

通用的事件模型: 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" e

【JS】DOM事件模型

DOM事件模型主要包含4个方面的内容,分别是: 事件流 主流浏览器的事件模型 事件对象 注册与移除事件监听器 下面一一了解下: 首先,什么是DOM?文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API).一般的,支持Javascript的所有浏览器都支持DOM. 在DOM眼中,HTML跟XML一样是一种树形结构的文档,<html>是根(root)节点,<head>.<title>.<body>是<

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端求职面试经历,其中提到了面试官会考察手写一个简单的事件模型: "如果上述都ok的话,那么极有可能要求让你[实现事件模型],即写一个类或是一个模块,有两个函数,一个bind一个trigger,分别实现绑定事件和触发事件,核心需求就是可以对某一个事件名称绑定多个事件响应函数,然后触发这个事件名称时,依次按绑定顺序触发相应的响应函数." 如果了解观察者模式,那么事件模型应该不算太难.本着深入钻研的精神,我试着来

【javascript总结】javascript的IE事件和DOM事件模型

通用的事件模型 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" ev

DOM事件模型浅析

1.何为DOM DOM是"Document Object Model"的缩写,中文译为"文档对象模型".它是一种跨平台.跨语言的编程接口,将HTML,XHTML,XML文档映射成树形结构,树的每一个节点都是一个对象.正因如此,面向对象的编程语言(如javascript)可以通过DOM对HTML,XHTML,XML文档进行操作.对于HTML文档来说,它的根结点为document对象,HTML元素为element对象,HTML元素的属性为attr对象. 2.何为DOM事

DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = function() { } DOM1 一般只有设计规范,没有设计跟事件相关的东西:所以直接跳过 DOM2 element.addEventListener(‘click’, function() { }, false) DOM3 element.addEventLIstener(‘keyup’,