ホームページ > 記事 > ウェブフロントエンド > JavaScriptイベントバインディングのメソッドにはどのようなものがありますか?

JavaScriptイベントバインディングのメソッドにはどのようなものがありますか?

青灯夜游オリジナル: 2021-09-08 18:15:296033ブラウズ

バインド方法: 1. "object.on イベント名 = function(){code}" ステートメントを使用してバインドします; 2. "イベントソース.addEventListener(イベント名、イベント処理関数名、 Capture );" state binding; 3. HTML タグの「onclick」属性を使用してイベントをバインドします。

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

1. イベントソースのイベント属性バインディングハンドラーを使用する

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

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

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

イベントソースイベント属性バインディングハンドラーの例:

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

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

addEventListener() はいのメソッド標準イベントモデル。すべての標準ブラウザで有効です。 addEvent Lister() を使用してイベントハンドラーをバインドする形式は次のとおりです:

事件源.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函数实现事件捕获

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

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

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

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

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

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptイベントバインディングのメソッドにはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：JavaScriptで配列の値を取得できるのでしょうか？次の記事：JavaScriptで配列の値を取得できるのでしょうか？

続きを見る