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

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

伊谢尔伦
リリース: 2017-07-22 16:04:27
オリジナル
1583 人が閲覧しました

まず、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート