検索

ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptでイベントをバインドする方法

JavaScriptでイベントをバインドする方法

青灯夜游
青灯夜游オリジナル
2021-07-19 14:14:273845ブラウズ

方法: 1. HTML タグのイベント属性 onclick を使用し、構文 "onclick="event handler"" でハンドラーをバインドします。 2. イベント ソースのイベント属性を使用してハンドラーをバインドします。 、構文「obj.on イベント名 = ハンドラー関数」; 3. addEventListener() を使用してハンドラーをバインドします。

JavaScriptでイベントをバインドする方法

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

イベントの発生時にブラウザが対応するイベント ハンドラーを自動的に呼び出してイベントを処理できるようにするには、イベント ハンドラーをイベント ソースにバインドする必要があります (バインドされたイベント ハンドラーは登録済みイベントとも呼ばれます)。ハンドラ）。

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

  • #HTML タグのイベント属性 onclick を使用して、イベント ハンドラーをバインドします。このメソッドは、タグのイベント属性値をイベント ハンドラーに設定します。この方法は現在推奨されていません。

  • イベント ソースのイベント属性を使用して、イベント ハンドラー関数をバインドします。このメソッドは、イベントソースオブジェクトのイベント属性値をイベント処理関数に設定します。

  • addEventListener() メソッドを使用して、イベントとイベント処理関数をバインドします (IE9 より前のバージョンでは、attach Event() メソッドを使用します。

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

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

<!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 ブラウザの後に実行され、ユーザーがボタンをクリックすると警告ダイアログ ボックスが表示され、結果は次の図のようになります。 #イベント ハンドラーに 3 つ以上のコードが含まれる場合、例 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 標準の原則に違反します。 JavaScriptでイベントをバインドする方法

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

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

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 つのボタンのクリック イベントの 3 つのイベントが処理されます。これら 3 つのイベントの処理は、次のように実行されます。イベント ソースのイベント属性を使用してイベント処理関数をバインドします。最初のボタンのロード イベントとクリック イベントは匿名関数にバインドされ、2 番目のボタンのクリック イベントは関数名にバインドされます。

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

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

3. addEventListener() を使用してハンドラーをバインドします

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

当一个事件源需要使用多个函数来处理时，可以通过事件源调用 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()”的警告对话框。

JavaScriptでイベントをバインドする方法

JavaScriptでイベントをバインドする方法

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

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

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

関連記事

続きを見る