javascript事件模型实例分析


Posted in Javascript onJanuary 30, 2015

本文实例讲述了javascript事件模型的用法。分享给大家供大家参考。具体分析如下:

一、事件模型

冒泡型事件(Bubbling):事件由叶子节点沿祖先节点一直向上传递到根节点
捕获型事件(Capturing):由DOM树最顶元素一直到最精确的元素,与冒泡型事件相反
DOM标准事件模型:DOM标准既支持冒泡型事件,也支持捕获型事件,可以说是两者的结合体,首先是捕获型,接着冒泡传递

二、事件对象

在IE浏览器中事件对象是window的一个属性,在DOM标准中,event必须作为唯一的参数传给事件处理函数

获得兼容的event 对象:

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
}

在IE中,事件的对象包含在event的srcElement中,而在DOM标准中,对象包含在target属性中
获得兼容的event 对象指向的元素:

var target =event.srcElement ? event.srcElement : event.target ;

前提是,保证event对象已经正确的获取

三、事件监听器

IE下,注册的监听器逆序执行,即后面注册的先执行

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

第一个参数为事件名称,第二个为回调处理函数

DOM标准下:

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)

第一个参数为事件名称,没有“on”的前缀,第二个参数为回调处理函数,第三个参数说明回调函数是在捕获阶段调用还是冒泡阶段调用,默认true为捕获阶段

四、事件传递

兼容地取消浏览器的事件传递

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
}

取消事件传递后的默认处理

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
JS实现密码框效果
Sep 10 Javascript
JS是按值传递还是按引用传递
Jan 30 #Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 #Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 #Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 #Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
You might like
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php自动跳转中英文页面
2008/07/29 PHP
javascript jQuery插件练习
2008/12/24 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks & solutions)
2010/03/01 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python实现微信远程控制电脑
2018/02/22 Python
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
2014年生产部工作总结
2014/12/17 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Golang jwt身份认证
2022/04/20 Golang