ホームページ > 記事 > ウェブフロントエンド > 要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法

青灯夜游転載: 2022-08-04 19:27:104356ブラウズ

JavaScript はスクリプト言語として、ページ上の要素にイベントをバインドできるため、指定されたイベントが発生すると、対応するイベントハンドラーを自動的に呼び出してイベントを処理できます。では、要素にイベントを追加するにはどうすればよいでしょうか?次の記事では、JS でイベントをバインドする 3 つの方法を紹介します。

イベント発生時にブラウザが対応するイベントハンドラーを自動的に呼び出してイベントを処理するには、イベントハンドラーをイベントソース (バインディングイベントハンドラーは、登録済みイベントハンドラーとも呼ばれます)。

イベントハンドラーをバインドするには 3 つの方法があります。

HTML タグでは、イベント属性 (onclick など) を使用してイベントハンドラーをバインドします。このメソッドは、タグのイベント属性値をイベントハンドラーに設定します。 HTML と js が結合されているため、メンテナンスが困難になるため、この方法は現在推奨されていません。
js では、イベントソース (onclick など) のイベント属性を使用してイベントハンドラー関数をバインドします。このメソッドは、イベントソースオブジェクトのイベント属性値をイベント処理関数に設定します。
js では、addEventListener() メソッドを使用してイベントとイベント処理関数をバインドします (IE9 より前のバージョンでは、attach Event() メソッドを使用します)。

1. HTML タグのイベント属性バインディングハンドラーを使用します。

HTML タグを使用することに注意してください。タグイベントハンドラーをイベント属性にバインドする場合、イベント属性内のスクリプトコードには関数宣言を含めることはできませんが、関数呼び出しまたはセミコロンで区切られた一連のスクリプトコードを含めることはできます。

[例1] HTMLタグのevent属性を使用してイベントハンドラをバインドします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用HTML标签的事件属性绑定事件处理程序</title>
</head>
<body>
     <input type="button" onclick="var name=&#39;PHP中文网&#39;;alert(name);" value="事件绑定测试"/>
</body>
</html>

上記のコードのボタンはクリックイベントのターゲットオブジェクトであり、イベント処理用のラベルのイベント属性 onclick を通じて 2 つのスクリプトコードをバインドします。上記のコードを Chrome ブラウザで実行した後、ユーザーがボタンをクリックすると、警告ダイアログボックスが表示され、結果は次の図のようになります。

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法

イベントハンドラーに 2 行を超えるコードが含まれる場合でも、例 1 のようにイベントハンドラーをバインドすると、プログラムは非常に読みやすくなります。これを行うには、イベントハンドラーを関数として定義し、イベントプロパティでその関数を呼び出します。

[例2] HTMLタグのevent属性は関数呼び出しです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML标签的事件属性为函数调用</title>
<script>
     function printName(){
          var name = "PHP中文网";
          alert(name);
     }
</script>
</head>
<body>
     <input type="button" onClick="printName()" value="事件绑定测试"/>
</body>
</html>

上記のコードの実行結果は例 1 とまったく同じです。上の 2 つの例からわかるように、タグイベント属性は JS スクリプトコードと HTML タグを混合しており、JS と HTML を分離する必要があるという Web 標準原則に違反しています。したがって、HTML タグのイベント属性を使用してイベントハンドラーをバインドすることは適切ではなく、実際のアプリケーションでは避けるべきです。

2. イベントソースのイベント属性を使用してハンドラーをバインドする

HTML と JS を分離する方法の 1 つは、イベントを使用することです。ソースのソースはイベント処理関数にバインドされます。バインディング形式は次のとおりです: 形式内の

obj.on事件名 = 事件处理函数

obj はイベントソースオブジェクトです。バインドされたイベントプログラムは通常、無名関数の定義ステートメント、または関数名です。

イベントソースのイベント属性にハンドラーをバインドする例:

oBtn.onclick = function(){//oBtn为事件源对象，它的单击事件绑定了一个匿名函数定义
      alert(&#39;hi&#39;)
};

[例 3] イベントソースのイベント属性を使用してイベントハンドラー関数をバインドします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用事件源的事件属性绑定事件处理函数</title>
<script>
     window.onload = function(){//窗口加载事件绑定了一个匿名函数
          //定义一个名为fn的函数
          function fn(){
               alert(&#39;hello&#39;);
          }
          //获取事件源对象
          var oBtn1 = document.getElementById("btn1");
          var oBtn2 = document.getElementById("btn2");
         
          //绑定一个匿名函数
          oBtn1.onclick = function(){
               alert("hi");
          }
          //绑定一个函数名
          oBtn2.onclick = fn;
     };
</script>
</head>
<body>
   <input type="button" id="btn1" value="绑定一个匿名函数">
   <input type="button" id="btn2" value="绑定一个函数名">
</body>
</html>

上記の JS コードは、ドキュメントウィンドウの読み込みイベント load と 2 つのボタンクリックイベント click の 3 つのイベントを処理します。これら 3 つのイベントの処理は、イベントソースのイベント属性を使用してイベント処理関数をバインドすることで実現されます。最初のボタンのロードイベントとクリックイベントは無名関数にバインドされ、2 番目のボタンのクリックイベントは無名関数にバインドされます。匿名関数に決定されるのは関数名です。

oBtn2 によってバインドされた関数名の後に「()」を追加できないことに注意することが重要です。追加しない場合、バインドされた関数は関数呼び出しになり、JS エンジンがこのコード行を実行するときに自動的に発生します。呼び出しは実行されますが、イベントがトリガーされたときには実行されません。

ウィンドウ読み込みイベント関数は、ドキュメントのすべての要素が読み込まれた後に処理され、各ボタンがクリックされるとクリックイベントがトリガーされます。 1 番目と 2 番目のボタンをクリックすると、それぞれ「こんにちは」と「こんにちは」を示す 2 つの警告ダイアログボックスが表示されます。

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法

3. addEventListener() を使用してハンドラーをバインドします # #イベントソースオブジェクトのイベント属性を使用してイベントハンドラーをバインドするのは簡単ですが、欠点があります: イベントは 1 つのハンドラーにのみバインドでき、後でバインドされたイベントハンドラーは以前にバインドされたイベントを上書きします。実際のアプリケーションでは、イベントソースからのイベントが複数の関数によって処理される場合があります。

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 addEventListener()（针对标准浏览器）来绑定事件处理函数以实现此需求。一个事件源通过方法绑定多个事件函数的实现方式是：对事件源对象调用多次 addEventListener()，其中每次的调用只绑定一个事件处理函数。

addEventListener() 是标准事件模型中的一个方法，对所有标准浏览器都有效。使用 addEvent Liste ner() 绑定事件处理程序的格式如下：

事件源.addEventListener(事件名称,事件处理函数名,是否捕获);

参数“事件名称”是一个不带“on”的事件名；参数“是否捕获”是一个布尔值，默认值为 false，取 false 时实现事件冒泡，取 true 时实现事件捕获。

通过多次调用 addEventListener() 可以为一个事件源对象的同一个事件类型绑定多个事件处理函数。当对象发生事件时，所有该事件绑定的事件处理函数就会按照绑定的顺序依次调用执行。另外，需要注意的是，addEventListener() 绑定的事件处理函数中的 this 指向事件源。

addEventListener() 绑定处理程序示例：

document.addEventListener(&#39;click&#39;,fn1,false);//click事件绑定fn1函数实现事件冒泡
document.addEventListener(&#39;click&#39;,fn2,true);//click事件绑定fn2函数实现事件捕获

【例 4】使用 addEventListener() 绑定事件函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用addEventListener()/attachEvent()绑定事件函数</title>
<script>
     function fn1(){
          alert("fn1()");
     }
     function fn2(){
         alert("fn2()");
     }
     function bindTest(){
         document.addEventListener(&#39;click&#39;,fn1,false);//首先绑定fn1函数   
         document.addEventListener(&#39;click&#39;,fn2,false);   
     }
     bindTest();//调用函数
</script>
</head>
<body>
</body>
</html>

上述代码在浏览器中运行后，当单击文档窗口时，会依次弹出显示“fn1()”和“fn2()”的警告对话框。

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法

【推荐学习：javascript高级教程】

以上が要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript chrome html Event JS 对象事件 this

声明：

この記事はbiancheng.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：【まとめ】開発効率アップに役立つJS配列の一般的な操作方法！次の記事：【まとめ】開発効率アップに役立つJS配列の一般的な操作方法！

続きを見る

要素にイベントを追加するにはどうすればよいですか? JS バインディング イベントを解析する 3 つの方法

関連記事

要素にイベントを追加するにはどうすればよいですか? JS バインディングイベントを解析する 3 つの方法