js 事件在大多数浏览器中都遵循冒泡模型。
冒泡模型可以用一个简单的例子解释:
比如你画了一个同心圆,手指点击某个圆圈内部,那么事件会从这个圆圈逐个传播到包含这个圆圈的外部圆圈。这又让我想起了像平静的湖面扔一块小石头,湖面荡起一圈一圈的涟漪。
不过在Netscape浏览器中却是相反的。
Dom事件模型包括两方面
捕获过程和冒泡过程。
IE不支持。
Dom 0 level 事件处理
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(this.id); //”myBtn”
};
//用完以后
btn.onclick = null; //remove event handler
Dom 2 level 事件处理
var btn = document.getElementById(“myBtn”);
//false表示在冒泡阶段,true表示在捕获阶段
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);
Dom2 Level可以添加多个同样事件到一个DOM对象上
var btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);
btn.addEventListener(“click”, function(){
alert(“Hello world!”);
}, false);
执行时按定义时的顺序。
var btn = document.getElementById(“myBtn”);
btn.addEventListener(“click”, function(){
alert(this.id);
}, false);
//other code here
btn.removeEventListener(“click”, function(){ //won ’ t work!
alert(this.id);
}, false);
匿名函数不能被移除。
var btn = document.getElementById(“myBtn”);
var handler = function(){
alert(this.id);
};
btn.addEventListener(“click”, handler, false);
//other code here
btn.removeEventListener(“click”, handler, false); //works!
DOM Level 2 在 Firefox, Safari, Chrome, and Opera等浏览器得到支持。
IE呢有自己的独特的方法:
attachEvent() detachEvent()
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
/*IE DOM0LEVEL 事件处理里的this值该DOM对象,而在DOM2level this值指window对象。*/
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(this === window); //true
});
var btn = document.getElementById(“myBtn”);
btn.attachEvent(“onclick”, function(){
alert(“Clicked”);
});
btn.attachEvent(“onclick”, function(){
alert(“Hello world!”);
});
当添加多个handler到一个dom对象时,执行顺序和他们定义的顺序相反。
preventDefault() 取消事件,前提是event的cancelable必须设为true
stopPropagation()停止冒泡。
分享到:
相关推荐
ECMA-357,很不错的教程,和大家分享了,我花了好长时间找到的
本文实例讲述了javascript事件模型的用法。分享给大家供大家参考。具体分析如下: 一、事件模型 冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点 捕获型事件(Capturing):由DOM树最顶元素...
javascript事件模型代码
一、原始事件模型 其事件类型:分为”输入事件(如onclicki)”和”语义事件(如onsubmit)” 事件程序的注册可以以下几种方式: 1、JS代码作为HTML性质值 复制代码 代码如下:<input type=”button” value=”Press me...
arcgis server JavaScript API模型图
JavaScript对象模型
1、函数指针进化论 2、Java事件模型 3、.NET(C#)事件模型 4、DOM和JavaScript事件模型 5、Flex和ActionScript3事件模型
javascript Event(事件模型),针对于javascript事件的处理,具有一些帮助。
javascript事件冒泡,事件捕获和事件委托详解 1、事件冒泡:在javascript事件传播... js事件捕获一般通过DOM2事件模型addEventListener来实现的: target.addEventListener(type, listener, useCapture) 第三个参
javascript的三种事件模型.docx
javaScript对象模型与事件处理资料.pdf
javaScript对象模型与事件处理借鉴.pdf
介绍javascript的对象模型知识,如何建立对象。如何执行对象~~
JavaScript中的对象 ECMA262规范一直在强调,“ECMAScript是一种基于对 象(Object—Based)的语言,而不是传统的面向对象(Object— Oriented)的语言”。相信绝大多数人不会清楚这句话是什么意 思。我想我们可以把它...
javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。 一. DOM0级事件模型 DOM0级事件模型是早期的事件模型,所有的浏览器都是支持...
学习JavaScript也需要了解它的运行平台,为了更好的理解JavaScript的事件模型,我打算从Node及浏览器引擎源码入手,分析其底层实现,并将我的分析整理为一系列博文;一方面作为笔记,另一方面也希望能与大家交流,...
JavaScript甘露模型.docx