JavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説-jsチュートリアル-php.cn

JavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説

伊谢尔伦

リリース： 2017-07-22 15:43:51

オリジナル

1853 人が閲覧しました

クロスプラットフォームイベント

クロスプラットフォームイベントとは何ですか?つまり、異なるブラウザで同じイベントを実行すると、異なるメソッドが使用されます。

EventUtil オブジェクトとは何ですか?効果は何ですか？これは、イベントオブジェクトの管理を容易にするために、すべてのイベント関連の機能を統合するコンテナーです。属性はありません。主に、DOM イベントと IE イベントを可能な限り似たものにするための統合を処理します。

DOM と IE のオブジェクトのプロパティとメソッドを比較してみましょう (ここでは、2 つのプロパティとメソッドの違いのみを指摘します)。主なポイントは 5 つあります:
DOM のプロパティとメソッド IE のプロパティとメソッド。
文字コード

問題を解決できる小さなデモを見てみましょう。イベントのクロスプラットフォーム互換性の問題:

<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 オブジェクトである 1 つのパラメーターを受け取ります。

りー

以上がJavaScriptのクロスプラットフォームイベント定義と使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。