JavaScript 事件系统


Posted in Javascript onJuly 22, 2010

事件流
JavaScript 的事件是以一种流的形式存在的,一个事件会有多个元素同时响应。有时候这不是我们
想要的,我们只需要某个特定的元素响应我们的绑定事件就可以了。

事件分类
捕获型事件(非IE)、冒泡型事件(所有浏览器都支持)

捕获型事件是自上而下的,而冒泡型事件是自下而上的。下面我用一个图来直观表示:
JavaScript 事件系统
冒泡型事件我们在工作中可能会比较多遇到,但捕获型事件怎样才会执行到呢,如果我们想要在非 IE 浏览器中

要创建捕获型事件,只需将 addEventListener 的第三个参数设为true就好了。

例子如下:Link
JavaScript 事件系统
ID为div1和div2的两个元素都被绑定了捕捉阶段的事件处理函数,这样:
当点击#div1(蓝色区域)时,应该会alert出”div1″
当点击#div2(黄色区域)时,应该会先alert出”div1″,再alert出”div2″,因为在事件捕捉阶段,事件是从根元素向下传播的,#div1是#div2的父元素,自然绑定在#div1上的click事件也会先于#div2上的click事件被执行。
冒泡型事件例子:

<!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=utf-8" /> 
<title>冒泡事件</title> 
<script type="text/javascript"> 
var i = 1; 
function Add(sText,objText) 
{ 
document.getElementById("Console").innerHTML +=sText + "执行顺序:" + i + "<br />" + "<hr />"; 
i = i + 1; 
//window.event.cancelBubble = true; 
} 
</script> 
</head> 
<body onclick="Add('body事件触发<br />','body')"> 
<div onclick="Add('div事件触发<br />','div')"> 
<p onclick="Add('p事件触发<br />','p')" style="background:#c00;">点击</p> 
</div> 
<div id="Console" style="border:solid 1px #ee0; background:#ffc;"></div> 
</body> 
</html>

从这个例子我们可以很清楚的看到事件冒泡是从目标元素 P 一直上升到 body 元素。

阻止事件冒泡

如下有一个函数兼容了 IE 和其它浏览器的阻止事件冒泡

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
//因此它支持W3C的stopPropagation()方法 
e.stopPropagation(); 
else 
//否则,我们需要使用IE的方式来取消事件冒泡 
window.event.cancelBubble = true; 
}

在 IE 并没有 stopPropagation 方法,但我们可以通过 window.event.cancelBubble 来阻止事件冒泡。

监听函数
IE : attachEvent、detachEvent

非IE: addEventListener、removeEventListener

除了上面四个函数还有一个比较通用的方法是 document.getElmentById(元素ID).onclick = function(){}

事件对象
当触发事件,在监听函数执行函数里怎样才可以获取事件对象呢?在IE 中用window.event.srcElement而在非IE浏览器则用e.currentTarget

例代码:

btn.onclick = ctdClickEvent; function ctdClickEvent(e) 
{ 
if( !-[1,] ) //IE 
{ 
var readonly = "readOnly"; 
var obj = window.event.srcElement; 
}else{ //非IE 
var readonly = "readonly"; 
var obj = e.currentTarget; 
} 
var id = obj.id.replace("btn_",""); 
if( obj.value=="此项改为不续费" ) 
{ 
...... 
}else{ 
....... 
} 
sumPrice(); 
}
Javascript 相关文章推荐
?牟┛途W扣了一??效果出?? target=
May 27 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
深入理解Node.js 事件循环和回调函数
Nov 02 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JS实现评价的星星功能
Aug 20 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
基于原生JS封装的Modal对话框插件的示例代码
Sep 09 Javascript
(function($){...})(jQuery)的意思
Jul 22 #Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 #Javascript
一个简单的js动画效果代码
Jul 20 #Javascript
dess中一个简单的多路委托的实现
Jul 20 #Javascript
js 返回时间戳所对应的具体时间
Jul 20 #Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 #Javascript
轻量级 JS ToolTip提示效果
Jul 20 #Javascript
You might like
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
javascript 一些用法小结
2009/09/11 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python 实现超级玛丽游戏
2020/11/25 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
.NET remoting中对象激活的两种方式
2015/06/08 面试题
高中毕业自我评价
2014/02/08 职场文书
出纳会计岗位职责
2014/03/12 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
教师求职信
2014/06/17 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
出纳试用期自我评价
2015/03/10 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
催款律师函范文
2015/05/27 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技