跨浏览器的事件对象

简介:

在前端开发工作中,由于浏览器兼容性等问题,触发事件对象的方法不同,分为IE和非IE两种。下面主要介绍跨浏览器触发 目标事件阻止事件的默认行为阻止事件冒泡 三种方法:

复制代码
var EventUtil = {
        target : function(e){    //目标事件
            e = e || window.event;
            return  e.target || e.srcElement;
        },
        preventDefault : function(e){    //阻止事件的默认行为
            e = e || window.event;
            if(e.preventDefault){
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
        },
        stopPropagation : function(e){    //阻止事件冒泡
            e = e || window.event;
            if(e.stopPropagation){
                e.stopPropagation();
            }else{
                e.cancelBubble = true;
            }
        },

      charCode : function(e){ //取得字符编码
e = e || window.event;
return e.keyCode || e.charCode;
}

    };
复制代码

以上代码,我们为EventUtil添加了3个方法,我们可以像下面这样使用这些方法:

复制代码
var div=document.getElementById('div');
div.onclick
= function(e){
var target = EventUtil.target(e); alert(target.tagName); }

  document.onkeydown=function(e){
var code=EventUtil.charCode(e);
console.log(code); //按键盘上的键 看效果
}

 
复制代码

 本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/03/15/2961199.html如需转载请自行联系原作者


@挨踢前端

相关文章
|
4月前
|
JavaScript 前端开发
JavaScript事件监听、常见事件及表单验证
JavaScript事件监听、常见事件及表单验证
17 0
|
4月前
|
JavaScript 前端开发
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
原生JavaScript之dom如何进行事件监听(事件捕获/冒泡)
68 1
|
5月前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
43 0
|
JavaScript 前端开发
【JavaScript】事件对象
【JavaScript】事件对象
48 0
|
Web App开发 iOS开发 开发者
JavaScript-DOM事件对象
JavaScript-DOM事件对象
62 0
|
JavaScript 程序员
DOM事件模型和事件委托
DOM事件模型和事件委托
92 0
DOM事件模型和事件委托
|
JavaScript 前端开发
|
JavaScript
jquery事件对象-48
jquery事件对象-48
63 0
jquery事件对象-48
|
JavaScript 前端开发
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
学习javaScript必知必会(4)~事件、事件绑定、取消事件冒泡、事件对象
137 0
|
JavaScript 前端开发 开发者
jQuery_事件对象|学习笔记
快速学习 jQuery_事件对象
185 0