【基本を抑える_06】イベント操作

イベントの基本

javaScriptの中で、ボタンやテキストなどで、

クリックするなどのアクションに対して、

そのアクションによって処理を行うことができます。

イベントの操作する範囲

イベントで操作する範囲は、イメージとして、

ブラウザの実際にコンテンツを表示している範囲と考えましょう。

イメージとしては、

この赤枠部分のコンテンツ部分が対象の範囲と考えてください。

イベント操作の基本

javaScriptのイベント操作は、「addEventListener」を使用します。

この「addEventListener」を使用するために、

DOM操作としての「querySelector」も使用します。

querySelectorの使い方

「querySelector」を使うのは、

「DOM操作」として使うことが基本です。

この点に関しては、

以下の記事などを参考にしてください。

【基本を押さえる_05】DOM操作

addEventListenerの使い方

「addEventListener」については、

「DOM操作」として、

「querySelector」を使って取得したオブジェクトに対して、

対象のイベントを設定していきます。

まずは、

対象のHTMLとして、

<button>クリックしてください</button>

という要素があった時、

以下のようにイベントを設定します。

let button = document.querySelector('button');

button.addEventListener('click', event => {
  alert('クリックしました！');
});

参考サイト

この記事の内容や、

実際にクリックすると、

alertで、アラート表示するなど、

以下のサイトを参考にしてください。

初心者のためのWeb入門（JSの基本）