< body>

イベントの追加をテストする: Firefox は addEventListener,i を使用します"/> < body>

イベントの追加をテストする: Firefox は addEventListener,i を使用します">

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript でイベント属性を使用してイベント関数をバインドする方法の詳細な説明

JavaScript でイベント属性を使用してイベント関数をバインドする方法の詳細な説明

伊谢尔伦
伊谢尔伦オリジナル
2017-07-22 16:04:271566ブラウズ

まず、jsでイベントを追加する一般的な方法を紹介します。具体的な内容は次のとおりです


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br>
    点击此p标签,绑定了2个弹出事件</p>
    <script>
      function test1() {
        alert("test1");
      }
      function test2(){
        alert("test2");
      }
      //添加事件通用方法
      function addEvent(element,e,fn) {
        //firefox使用addEventListener,来添加事件
        if(element.addEventListener) {
          element.addEventListener(e,fn,false);
        }
        //ie使用attachEvent,来添加事件
        else {
          element.attachEvent("on"+e,fn);
        }
      }
      window.onload = function(){
        var element = document.getElementById("p1");
        addEvent(element,"click",test1);
        addEvent(element,"click",test2);
      }
    </script>
  </body>
</html>

jsでイベントをバインドする一般的な方法:

イベントをバインドする方法: イベント関数をeventにバインドする属性
利点:

1. 動作の分離が完了します
2. function が on*** の属性として表示され、これを使用して直接オブジェクトを参照できるため、問題のオブジェクトを操作するのに便利です質問。
3. イベントオブジェクトを読み取ると便利です。イベントがトリガーされると、システムは自動的にイベントオブジェクトをイベント関数に渡し、そのうちの 1 つが渡されます。

以上がJavaScript でイベント属性を使用してイベント関数をバインドする方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。