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

イベントをバインドする方法: 1. 「」ステートメントを使用してバインドします。 2. 「dom object.on イベント名 = イベント処理プログラム」を使用します。ステートメント バインディング; 3. 「イベント ソース.addEventListener(イベント名、イベント ハンドラー、キャプチャするかどうか)」ステートメント バインディングを使用します。

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

JavaScript では、イベントをバインドする 3 つの方法があります。

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

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

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

# #1. HTML タグのイベント属性バインディング ハンドラーを使用する基本構文:

<标签 on事件名="事件处理程序" />

例:

<input type=’button’ onclick=’display()’ />

サンプル コード:

上記のコードは最も典型的なインライン バインディングです。必要な機能は完了できますが、同じタグ内で構造的なスタイルの動作をバインドしているため、後のコードは役に立ちません。メンテナンス。

2. イベント ソースのイベント属性バインディング ハンドラーを使用します。基本構文:

dom对象.on事件名 = 事件处理程序（通常是一个匿名函数）

動的バインディングを介してこれを実行します。上記の質問はアイデアによって改善され、その効果は次の図に示すとおりです:

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

イベント ソースを複数の関数を使用して処理する必要がある場合は、イベント ソースを通じて addEventListener() (標準ブラウザの場合) を呼び出してイベント処理関数をバインドし、この要件を達成できます。イベント ソースがメソッドを通じて複数のイベント関数をバインドする方法は、イベント ソース オブジェクトで addEventListener() を複数回呼び出すことであり、各呼び出しは 1 つのイベント処理関数のみをバインドします。

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

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

パラメータ「イベント名」は「on」を除いたイベント名であり、パラメータ「キャプチャするかどうか」はブール値です。デフォルト値は false で、false の場合はイベントバブリングが実現され、true の場合はイベントキャプチャが実現されます。

addEventListener() を複数回呼び出すことで、複数のイベント ハンドラーをイベント ソース オブジェクトの同じイベント タイプにバインドできます。オブジェクトでイベントが発生すると、そのイベントにバインドされたすべてのイベント処理関数が呼び出され、バインドされた順序で順番に実行されます。さらに、addEventListener() によってバインドされたイベント処理関数内の this がイベント ソースを指していることに注意してください。

addEventListener() バインディング ハンドラーの例:

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

[関連する推奨事項:

JavaScript 学習チュートリアル

]

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