跨浏览器的事件对象介绍_javascript技巧
程序员文章站
2022-04-23 09:54:53
...
复制代码 代码如下:
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");
};
记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。
推荐阅读
-
JavaScript中的跨浏览器事件操作的基本方法整理
-
详细解读JavaScript的跨浏览器事件处理
-
JavaScript中的跨浏览器事件操作的基本方法整理
-
EventUtil对象 之 跨浏览器的事件处理程序
-
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧
-
js中的eventType事件及其浏览器支持性介绍_javascript技巧
-
IE浏览器中图片onload事件无效的解决方法_javascript技巧
-
javascript Array.sort() 跨浏览器下需要考虑的问题_javascript技巧
-
javascript Range对象跨浏览器常用操作_javascript技巧
-
js中的eventType事件及其浏览器支持性介绍_javascript技巧