javascriptでHTML属性を使わず要素にイベントを割り当てる方法/addEventListenerメソッドの使い方

lady IT

平たく言えば関数を動かすメソッドです。
JavaScriptでイベントに対してなんらかの反応を返させる際、ひとつのイベントにふたつの関数を設定すると前に書いたほうの関数は上書きされて実行されません。
ひとつのイベントに複数の関数を設定したい場合にもこのメソッドを使用します。

Advertisements

addEventListenerの使い方

サンプル

イベントの対象オブジェクトに対して指定します。

イベントリスナー追加
オブジェクト.addEventListener(イベントの種類,実行する関数,オプション);
※オプションは省略可能

IDが「clk」のボタンを作ってみます。

<input type = "button" value = "click me!" id = "clk" />

このボタンに対して、JavaScriptで要素を取得します。

const elementOfClk = document.getElementByID("clk");

要素(オブジェクト)に対して、addEventListenerで実行されるイベントを流し込みます。

target.addEventListener('click', function() {
  alert("イベントが実行されました");
});

イベント「click」が最初に指定され、その後に実行される関数(イベントリスナー)が指定されました。このjsは要素がクリックされた時点で自動的にイベントハンドラとして動き、関数を実行します。
実装するとこんな感じになります。

関数の実行内容を直接指定せず、次のようにしても動きます。

target.addEventListener('click',eventClk);

function eventClk(){
  alert("イベントが実行されました");
}

こっちのほうがすっきりしてますね。eventClkに引数がないことに注意してください。引数を渡したい場合は、無名関数function()の中に埋め込むとよいそうです。
ES6から導入されたアロー関数で書くこともできます(pushは今適当に作った架空の引数)。

target.addEventListener('click', () => {evnetClk("push");});

イベントの種類

イベントである「Click」はどこから出てきたのかという話ですが、これはデフォルトで使える引数が決まっています。ほぼHTMLのイベントハンドラ(onclickなど)からonを抜いたものになります。

例1:このdivにマウスカーソルが侵入した回数:
let num = 0;
let target2 = document.getElementById('ovr');
target2.addEventListener("mouseover", function() {
num ++;
  target2.innerHTML = "このdivにマウスが進入した回数:" + num + "回";
});

スクロールするとメニューが表示……みたいなのは、ひとつの手段としてscrollを使うことで作ることが可能です。
これは上のコードのmouseoverをscrollに差し替えても動きません。scrollイベントを使う時はオブジェクトをwindowにします。イベントで使うオブジェクトは、基本elementかdocumentかwindowらしいです。

例2:スクロールした回数:
let numb = 0;
let target3 = document.getElementById('scr');
window.addEventListener("scroll", function() {
numb ++;
  target3.innerHTML = "例2:スクロールした回数:" + numb + "回";
});

イベント一覧

主なイベントには次のようなものがあるそうです(全部は試してない)。

click マウスをクリックした時
dblclick マウスをダブルクリックした時
contextmenu マウスを右クリックしてメニューを開いた時
mousedown マウスボタンを押した時
mouseup マウスボタンを離した時
mousemove マウスでカーソル移動した時
mouseover マウスカーソルが範囲に侵入した時
mouseover マウスカーソルが範囲から離脱した時
keydown キーボードでキー押下時
keyup キーボードキーを離した時
keypress キーボードのキーを押し続けている間
touchstart タッチ開始時(モバイル)
touchmove 画面上で指を動かした時
touchend 指を画面から離したとき
input 内容を入力した時
change 状態変更確定時
submit submitボタン押下時
load Webページの読み込みが完全に完了した時
DOMContentLoaded ページの読み込みが(DOM操作をして問題ないところまで)完了時
resize 画面サイズ変更時
scroll 画面をスクロールした時

オプションについて

後日加筆予定。

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント