インタラクティブな Web アプリケーションのバックボーンであるイベント リスナー

イベント リスナーは Web アプリケーションの重要なコンポーネントであり、Web アプリケーションがユーザー操作やその他のイベントに応答できるようにします。これらにより、ボタンのクリック、テキストの入力、ページの読み込みなど、特定のイベントが発生したときに JavaScript コードが特定の関数を実行できるようになります。

イベントの種類

JavaScript では、次のようなさまざまなタイプのイベントをリッスンできます。

• マウス イベント: click、mouseover、mouseout、mousedown、mouseup、mousemove、dblclick など
• キーボードイベント: キーダウン、キーアップ、キー押下
• フォームイベント: 送信、変更、入力、フォーカス、ブラーなど
• ドキュメント イベント: DOMContentLoaded、ロード、アンロード、スクロールなど
• ウィンドウ イベント: サイズ変更、スクロール、ロード、アンロードなど
• カスタム イベント: 独自のコードで定義されたイベント。

イベントリスナーの追加

要素にイベント リスナーを追加するには、addEventListener メソッドを使用できます。

element.addEventListener(event, callback);

場所:

• element: イベント リスナーをアタッチする要素。
• イベント: リッスンするイベントの名前。
• callback: イベント発生時に実行される関数。

例:

<button>





<pre class="brush:php;toolbar:false">const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

イベントリスナーの削除

イベント リスナーを削除するには、removeEventListener メソッドを使用します。

button.removeEventListener('click', handleClick);

ベストプラクティス

• イベント委任を使用する: 多くの子要素を持つ要素の場合は、イベント委任を使用して単一のイベント リスナーを親要素にアタッチし、その子のイベントを処理することを検討してください。
• インライン イベント ハンドラーを避ける: インライン イベント属性 (onclick など) を使用する代わりに、JavaScript を使用してイベント リスナーをアタッチすると、編成と保守性が向上します。
• デフォルト動作の防止: イベントのデフォルト動作を防止したい場合 (フォーム送信の防止など)、preventDefault() メソッドを使用します。

以上がインタラクティブな Web アプリケーションのバックボーンであるイベント リスナーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。