Zenn
💫

JavaScript イベントとイベントハンドラ

2023/01/16に公開
CSS
HTML
JavaScript
プログラミング
tech

イベントとイベントハンドラについて

イベントとは

  • ブラウザ上でユーザーが行う様々な動作のこと

例）
マウスをクリック
マウスをダブルクリック
マウスのポインタの移動
マウスのボタンを押す
マウスのボタンを離す
など

イベントハンドラとは

  • イベント発生をきっかけとして、何らかの処理を実行する
    何らかの処理のことを「イベントハンドラ」という

例）マウスでボタンをクリック→Hello!とコンソールに出力

プロパティを使って関連付ける方法

構文
オブジェクト名.onイベント名 = () => {
// イベントハンドラ
};

例題
ボタンをクリックすると、
コンソールに’Clicked!’と出力する

const e = document.getElementById('button');
e.onclick = () => {
    console.log('Clicked!');
}

loadイベントを使おう

loadイベントとは

  • 関連付けられた要素を読み終わった時に発生するイベント

  • 画像を含む、ページが完全に読み込み終わったことを検知して、何らかの処理を実行したい時に使用する

例題

windowオブジェクトの、laodイベント発生したタイミングで、
コンソールに”load event!”と出力する

windowオブジェクトはブラウザオブジェクトの階層構造のトップの階層になる

window.onload = () => {
    console.log('load event!')
}

リロードしてページの読み込みが完了した段階でload eventが発生してコンソールに出力している

addEventListenerを使おう

構文
要素オブジェクト.addEventListener(イベントの種類,() => {
//イベントハンドラ
},false);

※最後のfalseは、イベントの伝搬形式を指定できる、
高度な内容で利用頻度は低いため、通常はfalseを設定すればOK。

例題
ボタンをクリックすると、コンソールに”Clicked!”と出力する

const e = document.getElementById('button');
e.addEventListener('click', () => {
    console.log('Clicked!');
}, false);

とりあえず今聞いている講座のJavaScriptは一通り全部終わった！
まだ身についてないから他の講座も聞いたり調べたりしなければ！

仕事でも勉強でも何でも、やらされてるとかやらなきゃって
感覚になっちゃうとめんどくさくなるけど
自分がやりたくてやってるんだって自分の意思を強く持って
思考をコントロールして行動できるとほんとに違うよね

毎日大事に生きたい！生きる！パワーー

Discussion