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 (二) 万能的选择器
Oct 01 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
JS出现失效的情况总结
Jan 20 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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/02 无线电
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python/golang 删除链表中的元素
2020/09/14 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
技术人员面试提纲
2013/11/28 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
大学新生军训感言
2014/02/25 职场文书
捐助倡议书范文
2014/04/15 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python