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 相关文章推荐
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript实现根据身份证号读取相关信息
Dec 17 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP序列化操作方法分析
2016/09/28 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
react-native动态切换tab组件的方法
2018/07/07 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
用Python编写简单的定时器的方法
2015/05/02 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Sony C++笔试题
2013/03/10 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
教师个人事迹材料
2014/12/17 职场文书
颐和园导游词400字
2015/01/30 职场文书