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 相关文章推荐
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
如何用RxJS实现Redux Form
Dec 29 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
Javascript基础教程之argument 详解
2015/01/18 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
js实现缓动动画
2020/11/25 Javascript
python使用Apriori算法进行关联性解析
2017/12/21 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
解决安装pyqt5之后无法打开spyder的问题
2019/12/13 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
python deque模块简单使用代码实例
2020/03/12 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python requests库的使用
2021/01/06 Python
澳大利亚网上书店:QBD
2021/01/09 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
如何写毕业求职自荐信
2013/11/06 职场文书
好家长事迹材料
2014/01/23 职场文书
绿色环保标语
2014/06/12 职场文书
共青团员自我评价范文
2014/09/14 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
2019年大学推荐信
2019/06/24 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js