码迷,mamicode.com
首页 > 其他好文 > 详细

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

时间:2014-08-11 20:35:02      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   io   strong   ar   cti   

事件对象——兼容处理

1 /* 
2  * 功能: 事件对象兼容
3  * 参数: 表示常规浏览器的事件对象e
4  */
5 function getEvent(e) {
6 
7     // 如果存在e存在,直接返回,否则返回window.event
8     return e || window.event;
9 }


获取事件所对应的目标——兼容处理

 1 /*
 2 
 3  * 功能: 获取事件所对应的目标
 4 
 5  * 参数: 表示常规浏览器的事件对象e
 6 
 7  */
 8 
 9 function getTargetByEvent() {
10 
11     // 如果存在e.target,直接返回,否则返回window.event.srcElement
12 
13     return e.target || window.event.srcElement;
14 
15 }


添加事件——兼容处理

 1 /*
 2 
 3  * 功能: 添加事件
 4 
 5  * 参数:
 6 
 7  */
 8 
 9 function addEventHandler(element, eventName, handler) {
10 
11     // 三目(条件)运算符,如果存在document.addEventListener直接调用,否则调用document.attachEvent这个方法
12 
13     document.addEventListener ? element.addEventListener(eventName, handler, flase) : element.attachEvent(‘on‘ + eventName, handler);
14 
15 }

阻止默认事件——兼容处理

 1 /*
 2 
 3  * 功能: 阻止默认事件
 4 
 5  * 参数: 表示要阻止的事件对象
 6 
 7  */
 8 
 9 function stopDefaultEvent(e) {
10 
11     // 三目(条件)运算符,如果存在e.preventDefault直接调用,否则使用window.event.returnValue = false;
12 
13     e.preventDefault ? e.preventDefault() : (window.event.returnValue = false);
14 
15 }

阻止冒泡事件——兼容处理

 1 /*
 2 
 3  * 功能: 阻止冒泡事件
 4 
 5  * 参数: 表示要阻止的事件对象
 6 
 7  */
 8 
 9 function stopBubbleEvent(e) {
10 
11     e.stopPropagation ? e.stopPropagation() : (window.event.cancelBubble = true);
12 
13 }

以上为一些事件对象所涉及到的兼容处理。
其实JS的兼容处理比较简单,无非就是判断浏览器是否有此方法(对象),如果有的话,就直接调用(获取),否则使用另外的方法。

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理,布布扣,bubuko.com

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

标签:style   blog   color   使用   io   strong   ar   cti   

原文地址:http://www.cnblogs.com/wuyuchang/p/3905301.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!