javascript addEventListenerのeventを省略する
- 2021.03.20
- javascript
- javascript
javascriptで、addEventListenerのコールバック関数の引数eventを省略するサンプルコードを掲載してます。ブラウザはchromeを使用しています。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 84.0.4147.105
eventを省略
addEventListenerの、コールバック関数で使用するeventは省略しても利用することが可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* html */ <button id="main">変更</button> /* javascript */ 'use strict'; document.getElementById('main').addEventListener('click', function () { event.target.style.backgroundColor = "#3fb811"; } ) |
実行結果
onclickを使用しても同じです
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* html */ <button id="main">変更</button> /* javascript */ document.getElementById('main').addEventListener('click',{ handleEvent: function (event) { event.target.style.backgroundColor = "#3fb811"; } }); |
当然ですが、以下のように引数を別名で指定した場合は省略はできません。
|
1 2 3 4 5 6 7 8 9 10 |
document.getElementById('main').onclick = function (e) { e.target.style.backgroundColor = "#3fb811"; }; ↓ 省略はできない。エラーとなります。 document.getElementById('main').onclick = function () { e.target.style.backgroundColor = "#3fb811"; }; // Uncaught ReferenceError: e is not defined |
アロー関数を使用しても同じです。
|
1 2 3 4 5 |
document.getElementById('main').addEventListener('click', () => { event.target.style.backgroundColor = "#3fb811"; } ) |
これは以下のように「window.event」を取得できているので、
|
1 2 3 4 5 |
document.getElementById('main').addEventListener('click', () => { window.event.target.style.backgroundColor = "#3fb811"; } ) |
windowオブジェクトは省略して記述できるので、同じ結果となります。
|
1 2 3 4 5 |
document.getElementById('main').addEventListener('click', () => { event.target.style.backgroundColor = "#3fb811"; } ) |
ちなみにアロー関数は、thisを持たず、thisはwindowオブジェクトになるのでwindowをthisとしても結果は同じなります。
|
1 2 3 4 5 |
document.getElementById('main').addEventListener('click', () => { this.event.target.style.backgroundColor = "#3fb811"; } ) |
-
前の記事
git Untracked filesを削除する 2021.03.20
-
次の記事
Ubuntu20.04にターミナル「byobu」をインストールする 2021.03.20