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 相关文章推荐
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Validform表单验证总结篇
Oct 31 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
php中return的用法实例分析
2015/02/28 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python实现简单的TCP代理服务器
2014/10/08 Python
Python标准异常和异常处理详解
2015/02/02 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
采购内勤岗位职责
2013/12/10 职场文书
党支部承诺书范文
2014/03/28 职场文书
婚前协议书范本
2014/04/15 职场文书
工作经常出错的检讨书
2014/09/13 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
搞笑婚前保证书
2015/02/28 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
深入理解go slice结构
2021/09/15 Golang
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang