javascript下对于事件、事件流、事件触发的顺序随便说说


Posted in Javascript onJuly 17, 2010

1.首先我们来了解几个概念,“事件”,“事件流”,“事件名称”,“事件处理函数/事件监听函数,也许是“老生常谈”,知道的朋友可以越过。

事件: 事件是用户自身或浏览器进行的特定行为。如:用户点击 也就是常用的click事件
事件流:多个事件 按一定顺序触发 形成了事件流
事件名称:如上面所讲的click就是事件名
事件处理函数/事件监听函数(Dom的叫法)就是 事件触发后的处理函数,如obj.onclick=fn;函数fn就是事件处理函数

2.下面我们来了解一下历史,事件是dom的一部分 是在版本3中已经得到完整的说明,当进浏览器除ie(它有自己的事件模型),其他像netscape,safari,opera都基本上遵守dom的事件模型

3. 冒泡事件,其基本思想是事件从特定的事件目标向非特定的事件目标顺序触发。

先看如下代码:代码

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>无标题页</title> 
</head> 
<body onclick="handleClick()"> 
<div onclick="handleClick()">click me</div> 
</body> 
</html>

在ie5.5其冒泡顺序如下图

     javascript下对于事件、事件流、事件触发的顺序随便说说

在ie6.o以上增加了html(为了兼容,最后避免在此标签上添加事件) 如图:

javascript下对于事件、事件流、事件触发的顺序随便说说 

而在Mozilla 1.0中的冒泡事件是:

 javascript下对于事件、事件流、事件触发的顺序随便说说 

 

三种其实顺序没什么不同,只是有部分标签是否支持冒泡的差异

4.我们再看 捕获事件

   ie4.0使用的是冒泡事件,而netscape navigator使用的是捕获型事件如下图所示:

javascript下对于事件、事件流、事件触发的顺序随便说说 、

5.ie只支持冒泡事件,而dom是同时支持“ 冒泡事件和捕获事件的 ”,顺序是:”捕获事件”-----》》“冒泡事件” ,前面我们已经讲了moz,opera,safari等浏览器基本上是符合dom事件模型的,所以他们也支持“ 冒泡事件和捕获事件的 ”,如下图:

   javascript下对于事件、事件流、事件触发的顺序随便说说 

 

 

 6.下面我们了解  怎样为标签添加事件,最常用的方法是在其标签里面添加如 一下代码(这种添加,在moz中只有“捕获事件”,等价于用addEventListener(obj,type,false)添加的函数,这个后面再讲):

       例如:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>无标题页</title> 
</head> 
<body onclick="alert('body')"> 
<div onclick="alert('div');"> 
div 
<input id="Button1" onclick="alert('btn');" type="button" value="button" /> 
</div> 
</body> 
</html>

点击 按钮 在ie中,依据我们对上面的了解,很容易写出答案了,没错!ie只有冒泡事件 所以 顺序为:button>>div>>body;
而在非ie浏览器如moz中 正如我们上面所说的 内嵌式事件 等价于addEventlistener(type,fn,false) 只从捕获事件中 监听。
所以顺序刚好相反 body>>div>>body;

在addEventlistener(type,fn,true添加事件时) 只监听 “捕获事件” 当第三个参数为false时 只监听 冒泡事件
我们看下面一个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
<title>无标题页</title> 
<style type="text/css"> 
#ll{ background:#f00; _width: expression(this.width>200?"200px":true);} 
</style> 
</head> 
<body id="obj1"> 
<div id="obj2"><input id="obj3" id="Text1" type="text" /></div> 
<script language="javascript" type="text/javascript"> 
var $=function(eid){ 
return typeof eid=="object"?eid:document.getElementById(eid); 
}; 
var fn={ 
fn1:function(){alert("body");}, 
fn2:function(){alert("div");}, 
fn3:function(){alert("test");} 
}; 
var et={}; 
et.addEvent=function(obj,type,fn,flag){ 
if(obj.attachEvent){ 
obj.attachEvent("on"+type,fn); 
}else if(obj.addEventListener){ 
flag=(typeof flag!="undefined")?flag:true; 
obj.addEventListener(type,fn,flag); 
}else{ 
obj["on"+type]=fn; 
} 
}; 
et.addEvent($("obj1"),"click",fn.fn1,true); 
et.addEvent($("obj2"),"click",fn.fn2,false); 
et.addEvent($("obj3"),"click",fn.fn3,true); 
// et.addEvent($("obj3"),"click",fn.fn3); 
// et.addEvent($("obj2"),"click",fn.fn2); 
// et.addEvent($("obj1"),"click",fn.fn1); 
</script> 
</body> 
</html>

点击文本域,猜一猜分别在ie和moz(火狐)中的区别,当然在ie中由于 只监听 冒泡事件 所以很好判断 执行顺序为:input>>div>>body
而在moz中 由于div在添加事件时 第三个参数为false 说明div只 监听 冒泡事件,然后我们根据dom的事件 模型 不难判断,先是ojb1>>obj3>>obj2
分别弹出 body>> test >>div
顺便唠叨一下:向同一个标签 动态的添加事件是 执行的顺序在ie和其他非ie内核的浏览器有所不同 ie是“先进先出 ” 就是最先添加的最先执行,其他非ie内核的浏览器是 “先进后出”,就是 最后添加的事件 先执行。
Javascript 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 #Javascript
基于jquery的Repeater实现代码
Jul 17 #Javascript
javascript onmouseout 解决办法
Jul 17 #Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 #Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 #Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 #Javascript
You might like
PHP 反向排序和随机排序代码
2010/06/30 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
判断网页编码的方法python版
2016/08/12 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
python里反向传播算法详解
2020/11/22 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
华为c/c++笔试题
2016/01/25 面试题
安全检查验收制度
2014/01/12 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
警示教育活动总结
2014/05/05 职场文书
趣味运动会策划方案
2014/06/02 职场文书
中职生自荐信范文
2014/06/15 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
秋收起义观后感
2015/06/11 职场文书
高三语文教学反思
2016/02/16 职场文书
学习心得体会
2019/06/20 职场文书