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 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
jquery last-child 列表最后一项的样式
Jan 22 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
javascript 中的继承实例详解
May 05 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
ExtJS下grid的一些属性说明
2009/12/13 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python处理字符串之isspace()方法的使用
2015/05/19 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
详解Python 正则表达式模块
2018/11/05 Python
python字符串查找函数的用法详解
2019/07/08 Python
python 字符串常用方法汇总详解
2019/09/16 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
如何学习Python time模块
2020/06/03 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
浅析python中的del用法
2020/09/02 Python
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
土建工程师岗位职责
2014/06/10 职场文书
机电一体化专业求职信
2014/07/22 职场文书
大学生简短的自我评价
2014/09/12 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
员工考勤管理制度
2015/08/06 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Python中22个万用公式的小结
2021/07/21 Python