手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >跨浏览器的事件对象介绍
跨浏览器的事件对象介绍
摘要:复制代码代码如下:vareventUtil={getEvent:function(event){returnevent?event:wind...

复制代码 代码如下:

var eventUtil = {

getEvent : function(event){

return event ? event : window.event;

};

getTarget : function(event){

return event.target || event.srcElement;

};

preventDefault : function(event){

if(event.preventDefault){

event.preventDefault();

}else{

event.returnValue = false;

}

};

stopPropagation : function(event){

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

};

};

当使用一个DOM兼容的浏览器时,event 变量仅仅是传入并被返回,在IE中event参数将是undefined ,因此window.event将会被返回,所以采用eventUtil.getEvent()方法无论在dom还是IE上event返回值都是可用的。

同理第二个方法,getTarge()方法,先检测event对象的target属性,如果存在,则返回targe,若为IE浏览器则返回srcElement属性。保证兼容性。

复制代码 代码如下:

btn.onclick = function(event){

event = EventUtil.getEvent(event);

var target = EventUtil.getTarget(event);

};

第三个方法,preventDefault ()方法,当event对象传入时,先检测event对象的preventDefault()方法是否可用,若可用则调用preventDefault方法,若不可用将event的returnValue 设置为false。

例如:

复制代码 代码如下:

var link = document.getElementById("myLink");

link.onclick = function(event){

event = EventUtil.getEvent(event);

EventUtil.preventDefault(event);

};

这段代码阻止了一个link标签的默认行为,event对象来自于EventUtil的getEvent方法的返回值 并作为preventDefault()方法的传入参数。

第四个方法stopPropagation(),用同样的方法,首先尝试DOM方法,之后尝试cancelBubble属性,例如下面的代码:

复制代码 代码如下:

var btn = document.getElementById("myBtn");

btn.onclick = function(event){

alert("Clicked");

event = EventUtil.getEvent(event);

EventUtil.stopPropagation(event);

};

document.body.onclick = function(event){

alert("Body clicked");

};

记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。

【跨浏览器的事件对象介绍】相关文章:

如何用JS取得网址中的文件名

动态提示的下拉框

JavaScript中的异常处理方法介绍

JSON字符串和对象之间的转换详解

JavaScript获得指定对象大小的方法

IE浏览器下PNG相关功能

浏览器检测JS代码(兼容目前各大主流浏览器)

javascript用函数实现对象的方法

document对象execCommand的command参数介绍

游戏人文件夹程序 ver 3.0

精品推荐
分类导航