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 相关文章推荐
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
jQuery中的select操作详解
Nov 29 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 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自动生成月历代码
2006/10/09 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP通用检测函数集合
2011/02/08 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
js获取form的方法
2015/05/06 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
react-native android状态栏的实现
2018/06/15 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
PHP webshell检查工具 python实现代码
2009/09/15 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
python3实现绘制二维点图
2019/12/04 Python
浅析NumPy 切片和索引
2020/09/02 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
电大学习个人自我评价范文
2013/10/04 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
保险公司增员口号
2015/12/25 职场文书
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis