资讯专栏INFORMATION COLUMN

Object of Event-Professional JavaScript for Web De

104828720 / 1914人阅读

在Nicholas C.Zakas"《Professional JavaScript for Web Developer》一书中,对于解决event对象兼容性问题进行了归纳封装。

优点:无需过多考虑不同浏览器对event对象的差异,统一采用DOM标准调用event对象的方法和属性

跨平台的事件

1-创建Eventutil对象(工具包)

</>复制代码

  1. var Eventutil=new Object(); //OR var Eventutil={};

2-添加事件处理函数

</>复制代码

  1. Eventutil.addEventHandler=function(obj,type,fnName){
  2. if(obj.addEventListener){//for DOM
  3. obj.addEventListener(type,fnName,false);
  4. }else if(obj.attachEvent){//for IE
  5. obj.attachEvent("on"+type,fnName);
  6. }else{//for others
  7. obj["on"+type]=fnName;
  8. }
  9. }

3-删除事件处理函数

</>复制代码

  1. Eventutil.removeEventHandler=function(obj,type,fnName){
  2. if(obj.removeEventListener){//for DOM
  3. obj.removeEventListener(type,fnName,false);
  4. }else if(obj.detachEvent){//for IE
  5. obj.detachEvent("on"+type,fnName);
  6. }else{//for others
  7. obj["on"+type]=null;
  8. }
  9. }

3-格式化event对象

</>复制代码

  1. Eventutil.formatEvent=function (oEvent){
  2. if(document.all){
  3. //IE字符代码用keyCode,而DOM用charCode
  4. oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
  5. //eventphase:1-Event.CAPTURING_PHASE..
  6. //2-Event.AT_TARGET,3-Event.BUBBLING_PHASE
  7. oEvent.eventPhase=2;
  8. oEvent.isChar=(oEvent.charCode>0);
  9. //pageX,pageY和clientX,clientY(IE no pageX/Y)
  10. oEvent.pageX=oEvent.clientX+document.body.scrollLeft;
  11. oEvent.pageY=oEvent.clientY+document.body.scrollTop;
  12. //阻止默认行为,IE:returnValue=false;DOM:preventDefault();
  13. oEvent.preventDefault=function(){
  14. this.returnValue=false;//?能不能用oEvent 当然可以
  15. };
  16. //取消事件冒泡,IE:cancelBubble=true;DOM:stopPropagation()
  17. oEvent.stopPropagation=function(){
  18. this.cancelBubble=true;
  19. };
  20. //引起事件的元素,IE:srcElement;DOM:target
  21. oEvent.target=oEvent.srcElement;
  22. //事件的第二目标
  23. //IE:fromElement(鼠标所要离开的元素)-toElement(鼠标所要移入的元素)
  24. //DOM标准:relatedTarget
  25. if(oEvent.type=="onmouseover"){
  26. oEvent.relatedTarget=oEvent.fromElement;
  27. }else if(oEvent.type=="onmouseout"){
  28. oEvent.relatedTarget=oEvent.toElement;
  29. }
  30. //事件发生的时间,IE:no,DOM:timestamp(时间戳)
  31. oEvent.timeStamp=(new Date().getTime());
  32. }
  33. return oEvent;
  34. }

4-获取事件对象

在IE中,事件对象时window对象的一个属性event

在DOM标准中,event对象必须作为唯一的参数传递给事件处理函数

关于caller的具体用法请参考click here

</>复制代码

  1. Eventutil.getEvent=function(){
  2. if(window.event){
  3. return this.formatEvent(window.event);
  4. }else{
  5. //caller-每一个函数都有的属性,它包含了指向了调用它的方法的引用
  6. return Eventutil.getEvent.caller.arguments[0];
  7. }
  8. }

5-使用方法

DEMO-阻止右键菜单JavaScript代码(HTML省略,请读者自行加上)

</>复制代码

  1. var oDiv=document.getElementById("demo");
  2. document.oncontextmenu=function(){
  3. var e=Eventutil.getEvent();
  4. e.preventDefault();
  5. }

最后的话:

如有错误或者不妥还请斧正!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87551.html

相关文章

  • JS 设计模式 三(继承)

    摘要:什么是继承继承是一种减少重复性代码的一种设计模式,尽量弱化对象间耦合,开闭原则的一种很好的实现。三掺元类这种继承方式是为了扩充类的一些重复函数而不重写代码,这个也是一种多继承的效果。所以在使用的继承前,最好可以很好的理解下原型链这个概念。 什么是继承 继承是一种减少重复性代码的一种设计模式,尽量弱化对象间耦合,开闭原则的一种很好的实现。 javascript继承 由于javascrip...

    shusen 评论0 收藏0
  • 实战React App的i18n

    摘要:而就是产品具体实现某一种语言和文化的过程。货币的符号,以及数字分割方式各个国家都存在不同。那么有没有其他的复数形式回答当然是肯定的,比如波兰语。但这个是自己的语法,并非标准,同时这个语法还会破坏的测试,并不是一个很好的选择。 记得我刚来我们公司的时候,接手现在负责的项目的时候,我就发觉了一个问题:所有的文本资源都是硬编码在代码里面。这当然会带来很多问题。但考虑到我负责的这个项目是公司内...

    arashicage 评论0 收藏0
  • 【譯】chrome-remote-interface

    摘要:該支持下列事件當到的連接已建立時觸發。取得該調試協議描述符。在關閉請求收到響應后執行,他將獲得下列參數一個對象,指明成功狀態當缺省時,將返回一個對象。當缺省時,將返回一個對象,並且狀態取決于屬性。 本文翻譯自:chrome-remote-interface原文更新時間:July 21,2017譯者:Pandorym Chrome 調試協議 的接口,他提供一個使用 JavaScript ...

    lentoo 评论0 收藏0

发表评论

0条评论

104828720

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<