JavaScript では、イベントとは、ユーザーがボタンをクリックする、キーを押す、ページをロードするなど、ブラウザ內(nèi)で発生するアクションです。イベントは、コードがユーザーの操作やシステムの変更に応答できるようにするため、動的でインタラクティブな Web アプリケーションを作成するために非常に重要です。

これらのイベントを処理するには、イベント リスナーを使用します。イベント リスナーは、指定されたイベント、またはボタンのクリックなど、指定された要素との対話を「リッスン」する関數(shù)です。そのイベントが発生すると、リスナーは定義されたコールバック関數(shù)を?qū)g行し、応答として何が起こるかを指定できるようにします。たとえば、ボタン要素をクリックすると、そのテキストの內(nèi)容が「クリックされていません」から「クリックされました!」に変わります。

各要素に個別のイベント リスナーをアタッチするのが一般的ですが、この方法で複數(shù)の「インライン」リスナーを管理すると、すぐに反復的で非効率になる可能性があります。このアプローチではコードが長くなり、読みにくく保守しにくくなる可能性があります。これに対処するには、イベント リスナーを再利用可能な関數(shù)にカプセル化します。この方法により、コードが簡素化され、重複が減り、後の保守性が向上します。

インライン イベント リスナーの問題

これは典型的なインライン イベント リスナーの例です:

const myButton = document.getElementById('myButton')
myButton.textContent = "Unclicked"

myButton.addEventListener('click', () => {
    myButton.textContent = 'Clicked!';
});

このコードは正常に動作します。myButton をクリックすると、テキストが「Unclicked」から「Clicked!」に変わります。しかし、テキストを変更したいボタンが複數(shù)ある場合はどうすればよいでしょうか?それとも他のクリック可能な要素もテキストを更新する必要がありますか?コード內(nèi)の要素ごとに個別のイベント リスナーを作成すると、すぐに退屈で非効率的になってしまう可能性があります。

イベントリスナーの簡素化

要素ごとにロジックを複製する代わりに、それを再利用可能な関數(shù)にカプセル化できます。

function changeElementText(element, newText) {
    element.addEventListener('click', () => {
        element.textContent = newText;
    });
}

changeElementText 関數(shù)は、element と newText という 2 つのパラメータを取ります。 element パラメーターは、イベント リスナーをアタッチする要素を表します。これは、ボタン、div、見出しなどの任意の要素にすることができます。さらに汎用性を高めるために、newText パラメーターを使用すると、要素をクリックしたときに表示するテキスト コンテンツを指定できます。これらのパラメーターを使用すると、関數(shù)を任意の要素に動的に適用して任意のテキストを表示できるため、関數(shù)の再利用性が高くなります。

この関數(shù)を使用するには、必要な要素とテキストを引數(shù)として使用して、changeElementText() を呼び出すだけです。

これで、この関數(shù)を使用して 1 つの要素に影響を與えることができます:

changeElementText(myButton, 'Clicked!');

ループを使用して複數(shù)の要素に適用することもできます:

const myButton = document.getElementById('myButton')
myButton.textContent = "Unclicked"

myButton.addEventListener('click', () => {
    myButton.textContent = 'Clicked!';
});

再利用性をさらに高める

イベントを割り當てたい要素、使用したいイベントの種類、イベントが何を達成するかを指示するコールバック関數(shù)の引數(shù)を受け取る関數(shù)を作成することで、この再利用性をさらに高めることができます。

function changeElementText(element, newText) {
    element.addEventListener('click', () => {
        element.textContent = newText;
    });
}

このアプローチでは、イベント タイプとコールバック関數(shù)を個別に指定できるため、最大限の柔軟性が得られます。さまざまな種類のイベントや動作に対して同じ関數(shù)を再利用できるため、コードがさらにクリーンで柔軟になります。

次に、このメソッドを使用して「myButton」のテキストを変更する方法を見てみましょう。

changeElementText(myButton, 'Clicked!');

マウスオーバーなどの別のイベントを使用して試してください:

const allButtons = document.querySelectorAll('.button');
allButtons.forEach(button => {
    changeElementText(button, 'Clicked!');
});

または別のコールバック

function addEventListenerToElement(element, eventType, callback) {
    element.addEventListener(eventType, callback);
}

この例では、ユーザーがボタンの上にマウスを置くと、そのテキストが「Hovered!」に変わり、ホバー操作を示します。

最終的な考え

イベント リスナーを再利用可能な関數(shù)に保存することは、コードをクリーン、モジュール化、効率的に保つためのシンプルですが強力なテクニックです。初心者でも経験豊富な開発者でも、このアプローチを採用すると、より良い JavaScript を作成できるようになります。ナビゲーション メニューの構築、フォーム インタラクションの管理、ギャラリーへの動的な動作の追加など、次のプロジェクトにこの方法を適用してみて、コードベースがどのように簡素化され、保守性が向上するかを確認してください。

以上がJavaScript でのイベント リスナーの再利用性の強化の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。