クリックやスクロールのイベントが起きた際に処理を行いたい時に使うaddEventLitener。
その詳しい使い方を知っておくと非常に便利ですので、詳しく解説をします。
addEventListenerの使い方
getElementByIdなどで要素(ターゲット)を取得し、その要素にイベント発生時の処理を書きます。
<div id="js-target">click</div>
上記のようなHTMLのclickと書かれた要素がクリックされた時の処理を書いてみます。
let target = document.getElementById('js-target');
target.addEventListener('click', function() {
// クリックされた時の処理を書く
console.log('click');
});
定義された関数を実行するには、以下の様に書きます。
let target = document.getElementById('js-target');
target.addEventListener('click', eventFunc);
function eventFunc(){
// クリックされた時の処理を書く
console.log('click');
}
主なイベント一覧
引数 | イベント発火のタイミング |
---|---|
click | クリック時 |
mousedown | マウスのボタンが押下された時 |
mouseup | マウスのボタンを離した時 |
mouseover | カーソルがターゲットに侵入した時 |
mousemove | カーソルがターゲット内を動いている時 |
mouseout | カーソルがターゲットの外に出た時 |
load | ページの読み込みが完了した時 |
scroll | スクロールされた時 |
resize | ブラウザのウィンドウ等のサイズが変更された時 |
スマホ関連のイベント
引数 | イベント発火のタイミング |
---|---|
touchstart | タッチが開始された時 |
touchmove | 指を画面上で動かす時 |
touchend | 指を画面から離した時 |
これは良く使うイベントで、他にも色々な発火タイミングが設定できます。
関数に引数を渡す
関数に引数を書くことで、色々な値を取得することができます。
let target = document.getElementById('js-target');
target.addEventListener('click', function(e) {
console.log(e.target); // クリックされた要素
console.log(e.clientX); // ブラウザ内の左上からのX座標
console.log(e.clientY); // ブラウザ内の左上からのY座標
console.log(e.pageX); // HTML全体の左上からのX座標
console.log(e.pageY); // HTML全体の左上からのy座標
console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
});
clientXとpageXは似ていますが、ページがスクロールされると基準となる左上の位置が異なります。
また、以下のような書き方もできます。
let target = document.getElementById('js-target');
target.addEventListener('click', eventFunc);
function eventFunc(e) {
console.log(e.target); // クリックされた要素
console.log(e.clientX); // ブラウザ内の左上からのX座標
console.log(e.clientY); // ブラウザ内の左上からのY座標
console.log(e.pageX); // HTML全体の左上からのX座標
console.log(e.pageY); // HTML全体の左上からのy座標
console.log(e.offsetX); // クリックターゲットの要素左上からのX座標
console.log(e.offsetY); // クリックターゲットの要素左上からのy座標
}
定義された関数を使う時は、その関数に引数を渡します。
addEventListenerの部分で関数に引数がありませんが、定義された関数に引数が暗黙的に渡されます。
target.addEventListener('click', eventFunc(e)); // このような書き方はできない
このような書き方はできません。
イベント発生時処理の削除
設定されたイベント発火時の処理は、removeEventListenerで削除することができます。
target.removeEventListener('click',eventFunc);
まとめ
かなり頻繁に利用するaddEventListenerですが、挙動にクセがありますね。とはいえ慣れればそこまで難しいものではないので、覚えておきましょう。