首頁 > 文章 > web前端 > javascript跨平台事件定義與用法實例詳解

javascript跨平台事件定義與用法實例詳解

伊谢尔伦原創: 2017-07-22 15:43:511844瀏覽

跨平台事件

什麼叫跨平台事件？即在不同的瀏覽器上執行相同事件，所使用的方法不同。

什麼是EventUtil物件？有什麼作用？即將所有與事件相關的函數，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。

下面我們來看看DOM和IE之間的物件屬性和方法做個對比（這裡只指出兩者之間不同的屬性和方法），主要有以下五大點：
#DOM屬性與方法 IE屬性與方法
charcode              keycode
preventDefault        cancelBuble=true
target                    srcobj

我們用一個小demo看一下，能夠很好的解決事件跨平台的兼容問題：

<html>
<head>
  <title>eventUtil</title>
  <script eventType="text/javascript">
    var eventUtil = {
      //监听事件
      addListener: function(obj, eventType, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(eventType, fn, false);
        } else if (obj.attachEvent) {
          obj.attachEvent(&#39;on&#39; + eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = fn;
        }
      },
      //返回event对象
      getEvent: function(event) {
        return event || window.event;
        //return event ? event : window.event;
      },
      //返回目标事件对象
      getTarget: function(event) {
        return event.target || event.srcobj;
      }，
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },     
      removeListener: function(obj, eventType, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(eventType, fn, false);
        } else if (obj.deattachEvent) {
          obj.detachEvent(eventType, fn);
        } else {
          obj[&#39;on&#39; + eventType] = null;
        }
      },
      
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
  </script>
</head>
<body>
  <input eventType="button" value="click me" id="btn" />
  <p>event</p>
  <a>Hello word!</a>
  <script eventType="text/javascript">
  function addBtnListen(event)
  {
    var event = eventUtil.getEvent(event);
    var target = eventUtil.getTarget(event);
    alert("my name is kock");
    alert(event.eventType);
    alert(target);
    eventUtil.stopPropagation(event);

  }
  function getBodyListen(event)
  {
      alert("click body");
  }
  function getLinkListen(event)
  {
       alert("prevent default event");
       var event = eventUtil.getEvent(event);
       eventUtil.preventDefault(event);
  }
  window.onload=function()
  {
      var btn = document.getobjById("btn");
      var link = document.getobjsByTagName("a")[0];
      eventUtil.addListener(btn, "click", addBtnListen);
      eventUtil.addListener(document.body, "click", getBodyListen);
      eventUtil.addListener(link, "click",getLinkListen);
  }   
</script>
</body>
</html>

上面的方法能夠解決事件跨平台問題，接下來，我們看下charCode的屬性。

先為eventUtil定義一個新方法，formatEvent,接受一個參數，也就是Event物件。

eventUtil.formatEvent=function(event)
{
  if(isIE&&isWin)---检测浏览器的问题

  {
   event.charCode=(event.type=="keypress")?event.keycode:0;
   event.eventphase=2;--表示冒泡阶段，IE仅支持冒泡阶段
  }
  return event;
}

以上是javascript跨平台事件定義與用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中typeof和instanceof的比較用法實例詳解下一篇：JavaScript中typeof和instanceof的比較用法實例詳解

看更多