DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容
2016-08-08 16:49
423 查看
1、DOM事件包含捕获(capture)和冒泡(bubble)两个阶段:捕获阶段事件从window开始触发事件然后通过祖先节点一次传递到触发事件的DOM元素上;冒泡阶段事件从初始元素依次向祖先节点传递直到window
2、标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture):handler接收保存事件信息的event对象作为参数,event.target为触发事件的对象,handler调用上下文this为绑定监听器的对象,event.preventDefault()取消事件默认行为,event.stopPropagation()/event.stopImmediatePropagation()取消事件传递
3、老版本IE事件监听elem.attachEvent(‘on’+type, handler)/elem.detachEvent(‘on’+type, handler):handler不接收event作为参数,事件信息保存在window.event中,触发事件的对象为event.srcElement,handler执行上下文this为window使用闭包中调用handler.call(elem, event)可模仿标准模型,然后返回闭包,保证了监听器的移除。event.returnValue为false时取消事件默认行为,event.cancleBubble为true时取消时间传播
4、通常利用事件冒泡机制托管事件处理程序提高程序性能。
2、标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture):handler接收保存事件信息的event对象作为参数,event.target为触发事件的对象,handler调用上下文this为绑定监听器的对象,event.preventDefault()取消事件默认行为,event.stopPropagation()/event.stopImmediatePropagation()取消事件传递
3、老版本IE事件监听elem.attachEvent(‘on’+type, handler)/elem.detachEvent(‘on’+type, handler):handler不接收event作为参数,事件信息保存在window.event中,触发事件的对象为event.srcElement,handler执行上下文this为window使用闭包中调用handler.call(elem, event)可模仿标准模型,然后返回闭包,保证了监听器的移除。event.returnValue为false时取消事件默认行为,event.cancleBubble为true时取消时间传播
4、通常利用事件冒泡机制托管事件处理程序提高程序性能。
/** * 跨浏览器事件处理工具。只支持冒泡。不支持捕获 * @author (qiu_deqing@126.com) */ var EventUtil = { getEvent: function (event) { return event || window.event; }, getTarget: function (event) { return event.target || event.srcElement; }, // 返回注册成功的监听器,IE中需要使用返回值来移除监听器 on: function (elem, type, handler) { if (elem.addEventListener) { elem.addEventListener(type, handler, false); return handler; } else if (elem.attachEvent) { var wrapper = function () { var event = window.event; event.target = event.srcElement; handler.call(elem, event); }; elem.attachEvent('on' + type, wrapper); return wrapper; } }, off: function (elem, type, handler) { if (elem.removeEventListener) { elem.removeEventListener(type, handler, false); } else if (elem.detachEvent) { elem.detachEvent('on' + type, handler); } }, preventDefault: function (event) { if (event.preventDefault) { event.preventDefault(); } else if ('returnValue' in event) { event.returnValue = false; } }, stopPropagation: function (event) { if (event.stopPropagation) { event.stopPropagation(); } else if ('cancelBubble' in event) { event.cancelBubble = true; } }, /** * keypress事件跨浏览器获取输入字符 * 某些浏览器在一些特殊键上也触发keypress,此时返回null **/ getChar: function (event) { if (event.which == null) { return String.fromCharCode(event.keyCode); // IE } else if (event.which != 0 && event.charCode != 0) { return String.fromCharCode(event.which); // the rest } else { return null; // special key } } };
相关文章推荐
- 如何实现对一个DOM元素进行深拷贝,包括它绑定的事件
- 如何实现一个循环缓冲区模型
- 如何实现一个循环缓冲区模型
- avascript计算器之DOM事件模型-----浏览器兼容问题
- C#--关于事件的定义及注册,如何实现在一个文本框中只输入数字或者只能输入0至9十种数字、a至z或A至Z五十二种字符。
- 一个通用的单元测试框架的思考和设计06-实现篇-自动管理测试数据-如何临时关闭数据外键约束
- 【实现一个网络爬虫】二、如何管理所有的站点
- 关于Excel操作编写的一个软件设计构思案例[连载] --如何实现从字符串中提取需要的字符并赋值给指定单元格内
- C#如何定义一个事件,实现事件的调用
- 如何实现一个循环缓冲区模型
- 一个通用的单元测试框架的思考和设计07-实现篇-自动管理测试数据-如何为自增长主键id赋值
- 如何实现一个循环缓冲区模型
- DELPHI7 如何在编写可视组件中传递一个事件到组件外部?
- 自己编写的一个Json工具类,实现了反射将整个Object转换为Json对象的功能,支持Hibernate的延迟加载对象
- javascript计算器之DOM事件模型-----浏览器兼容问题
- 编写一个浮动按钮控件(如何给控件添加MouseOut事件)
- 如何实现一个循环缓冲区模型
- 一个通用的单元测试框架的思考和设计06-实现篇-自动管理测试数据-如何临时关闭数据外键约束
- 一个通用的单元测试框架的思考和设计07-实现篇-自动管理测试数据-如何为自增长主键id赋值
- 如何实现一个frame中的按钮事件调用另一个frame的服务器控件