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 相关文章推荐
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JQuery球队选择实例
May 18 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Vue之Watcher源码解析(2)
Jul 19 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
Element InputNumber 计数器的实现示例
Aug 03 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
javascript轮播图算法
2016/10/21 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
js canvas实现橡皮擦效果
2018/12/20 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
2019/09/05 Javascript
python中反射用法实例
2015/03/27 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
如何学习Python time模块
2020/06/03 Python
详解python with 上下文管理器
2020/09/02 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
岗位安全生产责任书
2014/07/28 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android