JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでイベントを登録する方法をわかりやすく解説

JavaScriptでイベントハンドラを登録するメリット

JavaScriptのコード内でイベントハンドラを登録すると、「this」キーワードを活用できるのが大きな利点です。HTML側から関数に引数として値を渡す必要がなく、イベントが発生した要素自身を「this」で参照できるため、コードがシンプルかつ柔軟になります。

「this」を使えば、クリックされた要素のスタイルやプロパティを直接操作できます。たとえば、複数の要素に対して同じ関数を登録しても、それぞれの要素ごとに正しく動作するため、再利用性の高いコードを書くことが可能です。

サンプルコード：クリック時に背景色と文字色を変更する

以下は、ページ読み込み時に関数「display()」を実行し、ボタンとdiv要素にクリックイベントを登録する例です。要素がクリックされると、その要素の背景色が黒、文字色が白に変更されます。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display( ) {
            click.onclick = styleMe;
            uname.onclick = styleMe;
         }
         function styleMe ( ) {
            this.style.backgroundColor = "#000000";
            this.style.color = "#FFFFFF";
         }
      </script>
   </head>
   <body onload="display()" >
      <div id="uname"> Hello World!</div>
      <button id="click"> Click</button>
   </body>
</html>

コードの仕組みを解説

このサンプルのポイントは以下の通りです。

1. イベントの登録タイミング
bodyタグのonload属性により、ページの読み込み完了後に「display()」が実行されます。これにより、DOM要素がすべて存在する状態でイベントを安全に登録できます。

2. 同じ関数を複数の要素に登録
「click.onclick = styleMe;」のように、関数名を括弧なしで代入することで、クリックイベントに関数を紐づけています。ここではbutton要素とdiv要素の両方に同じ「styleMe」関数を登録しています。

3. 「this」でイベント発生元を参照
「styleMe」関数内の「this」は、実際にクリックされた要素を指します。そのため、「this.style.backgroundColor」で背景色を黒（#000000）に、「this.style.color」で文字色を白（#FFFFFF）に変更しています。どちらの要素がクリックされても、クリックされた要素自身のスタイルだけが変わる仕組みです。

まとめ

JavaScriptコード内でイベントを登録する方法を使うと、引数を渡さずに「this」だけで対象要素を操作でき、コードの見通しが良くなります。特に同じ処理を複数の要素に適用したい場合に有効なテクニックなので、ぜひ活用してみてください。

  1. ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

    Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。基本となるdiv要素の準備まず、操作対象となる以下のようなdiv要素を用意します。<div id=showOrHide> Welcome in JavaScript </div>次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。&

  2. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <