我们在书写js程序的时候,在很大程度上,都是写客户端交互程序,所以大部分都可以事件有关.但是遗憾的是,这些事件处理程序的细节非常复杂.并且由于浏览器的不同,目前有四种不同的事件处理机制:
原始事件模型:
这是最简单的一种事件处理模型,尽管功能有限,但所有的浏览器都支持它.可以把它看作0级DOM
标准事件模型:
这是一种更强大更完整的事件模型.2级DOM标准对它进行了标准化.Netscape 6和Mozilla支持它
Internet Explorer事件模型
:具有标准事件模型的许多特性。虽然Microsoft参与了2级DOM事件模型的创建。但IE7一下的版本都没实现2级模型的标准,坚持使用自己的专有的事件模型,IE8以上的不太清楚。这意味着,在ie下运行,要想使用高级事件处理特性的js程序必须编写特定的代码。
Netscape事件模型:
这种模型现在已被标准模型取代.不过Netscape6为了向后兼容,还是继续实现了它.
接下来我们讨论这几种事件模型各自的特点以及如何实现一个通用健壮的事件处理程序在你的应用程序中
其实,我们在处理js事件问题的时候,我们就会很自然的去认为事件发生在目标元素上,那么它的事件处理代码就只会在你编写的特定处理函数上执行,例如:有这样一段代码:
-
<
div
id
=
"parent"
style
=
"height: 100px; width: 200px; background-color: yellow"
onclick
=
"parent(event)"
>
-
<
div
id
=
"child"
style
=
"height: 50px; width: 100px; background-color: gray"
onclick
=
"child(event)"
>
-
</
div
>
-
</
div
>
<div id="parent" style="height: 100px; width: 200px; background-color: yellow" onclick="parent(event)">
<div id="child" style="height: 50px; width: 100px; background-color: gray" onclick="child(event)">
</div>
</div>
-
var
parent =
function
(e) {
-
alert('parent'
);
-
};
-
var
child =
function
(e) {
-
alert('child'
);
-
};
var parent = function(e) {
alert('parent');
};
var child = function(e) {
alert('child');
};
在通常情况下,
我们会认为当点击parent的时候会打印出'parent'来,点击child的时候会打印出'child'来,但其实则不然,当你点击child的时
候,会打印出'parent'和'child'.为什么结果和预想的不一样呢,那是因为我们对js的事件处理机制还建立在原始事件模型上.而浏览器却按照
标准事件模型来处理的.那或许有人又有疑问,不是说IE不支持标准事件模型吗?为什么在IE下也会打印出'child'和parent.我们刚刚说了IE
用了自己专业的事件模型处理机制.但是却具有大部分标准事件模型的特性.所以会有这样的结果.那么我们来看看标准事件模型是怎样定义的吧!
在原始事件模型中,浏览器把事件分派给发生事件的文档元素。如果该那个对象具有适合的事件处理程序,就运行这个程序。初次之外,不用执行
其他的操作。但是,在标准事件模型中,情况则要复杂很多。当事件发生在目标元素时,目标的事件处理程序会被触发。此外,目标的每个祖先节点也有机会处理那
个事件。事件传播分三个阶段完成。一:在捕捉(capturing)阶段,事件从Document对象沿着文档向下传播给目标节点。在这期间,目标对象的
任何祖先节点都可以捕捉的事件并处理它。二:目标节点本身,这和原始时间模型相似,最后一个阶段是起泡阶段:在这个阶段,事件将从目标元素向上传播回
Document对象的文档层次。
现在就不难理解为什么我们点击child的时候parent的点击事件处理函数也会被执行.这就是我们今天讨论的主题,被忽略的细节.虽然很多人都知道
javascript标准事件模型,但是,大部分人在写事件处理程序的时候却忽略了这些问题.所以.有些时候,在某段页面js代码中插入几段事件代码,却
产生莫名的错误或者是与想要的结果有大大的出入.如果说你还没有遇到这样的问题,你应该为此而感到庆幸,那是因为你还没遇到过在一个父元素和子元素处理相
同的事件.但这不代表你以后不会遇到.所以为了你代码的健壮性和易维护性.应该重构你的代码.下面这段代码是我的一个实现
var Event = function(event) {
this.event = event || window.event;
this.target = (function() {
var target = this.event.target || this.event.srcElement;
while (target && target.nodeType == 3) {
target = target.parentNode;
}
return target;
})();
this.stop = function(){
return this.stopPropagation().preventDefault();
}
this.stopPropagation = function(){
if (this.event.stopPropagation) this.event.stopPropagation();
else this.event.cancelBubble = true;
return this;
}
this.preventDefault = function(){
if (this.event.preventDefault) this.event.preventDefault();
else this.event.returnValue = false;
return this;
}
}
重构后的事件处理代码:
-
var
parent =
function
(e) {
-
var
event =
new
Event(e);
-
alert('parent'
);
-
};
-
var
child =
function
(e) {
-
var
event =
new
Event(e);
-
alert('child'
);
-
event.stopPropagation();
-
};
var parent = function(e) {
var event = new Event(e);
alert('parent');
};
var child = function(e) {
var event = new Event(e);
alert('child');
event.stopPropagation();
};
经过这样处理以后,便可保证在任何情况任何环境下照常运行
分享到:
相关推荐
1.实现JavaScript事件注册;...2.实现JavaScript事件处理函数; 3.实现JavaScript鼠标和键盘事件; 4.实现JavaScript表单相关事件; 5.实现JavaScript字幕滚动事件; 6.实现JavaScript编辑事件;
NULL 博文链接:https://dbajun.iteye.com/blog/242763
JavaScript事件机制详细研究
利用JavaScript实现图片标注——SearchMapIdentityTask
JavaScript代码生成器——Coffee Script.pdf
教你一天玩转JavaScript(三)——使用JavaScript完成图片轮播的效果
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript调用java方法——dwr步骤.docx
教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
教你一天玩转JavaScript(四)——使用JavaScript实现定时弹出广告定时隐藏广告
JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools JavaScript框架高级编程——应用Prototype、YUI、Ext JS、Dojo、MooTools
教你一天玩转JavaScript(八)——使用JavaScript完成省市联动的效果
教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果
第6章 JavaScript中的事件与事件处理
javascript 原生实现 省市区街——四级联动
教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色
《javascript》——event对象与事件
管理系统系列--全JavaScript语言Web项目——图书管理系统
事件(Event)是JavaScript应用跳动的心脏...在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用)。今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4
JavaScript网页开发——体验式学习教程.pdf JavaScript网页开发——体验式学习教程.pdf