源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

跨浏览器的事件对象介绍

  • 时间:2020-07-05 08:36 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:跨浏览器的事件对象介绍
[u]复制代码[/u] 代码如下:
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属性。保证兼容性。
[u]复制代码[/u] 代码如下:
btn.onclick = function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); };
  第三个方法,preventDefault ()方法,当event对象传入时,先检测event对象的preventDefault()方法是否可用,若可用则调用preventDefault方法,若不可用将event的returnValue 设置为false。   例如:   
[u]复制代码[/u] 代码如下:
var link = document.getElementById("myLink"); link.onclick = function(event){ event = EventUtil.getEvent(event); EventUtil.preventDefault(event); };
  这段代码阻止了一个link标签的默认行为,event对象来自于EventUtil的getEvent方法的返回值 并作为preventDefault()方法的传入参数。   第四个方法stopPropagation(),用同样的方法,首先尝试DOM方法,之后尝试cancelBubble属性,例如下面的代码:
[u]复制代码[/u] 代码如下:
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"); };
记得这个方法可能阻止事件在浏览器的冒泡阶段 或者 同时阻止事件在浏览器的冒泡和捕获阶段。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部