NEW ARTICLE
PHPのエラー『Notice: Undefined Property』の解決方法
  1. HOME
  2. javascript
  3. javascript addEventListenerのeventを省略する

javascript addEventListenerのeventを省略する

javascript addEventListenerのeventを省略する

javascriptで、addEventListenerのコールバック関数の引数eventを省略するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81
Javascript サンプル集はこちら

eventを省略

「addEventListener」の、コールバック関数で使用する「event」は以下のように引数を省略しても利用することが可能です。

<button id="main">変更</button>

<script>

'use strict';

document.getElementById('main').addEventListener('click',
  function () {
    // 背景色を変更
    event.target.style.backgroundColor = "#3fb811";
  }
)

</script>

実行結果を、確認するとボタンの背景色が、ちゃんと緑になっていることが確認できます。

use strictについてはこちら

「onclick」を使用しても同じです

<button id="main">変更</button>

<script>

document.getElementById('main').onclick = function () {
    event.target.style.backgroundColor = "#3fb811";
};

</script>
addEventListenerとonの違い

当然ですが、以下のように引数を「e」などの「別名」で指定した場合は省略はできません。

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

アロー関数を使用しても同じです。

document.getElementById('main').addEventListener('click',
  () => {
    event.target.style.backgroundColor = "#3fb811";
  }
)
アロー関数の使い方
document.getElementByIdの省略して記述する

省略できる理由

これは以下のように「window.event」を取得できているので、

document.getElementById('main').addEventListener('click',
  () => {
    window.event.target.style.backgroundColor = "#3fb811";
  }
)

windowオブジェクトは省略して記述できるので、同じ結果となります。

document.getElementById('main').addEventListener('click',
  () => {
    event.target.style.backgroundColor = "#3fb811";
  }
)

ちなみにアロー関数は、thisを持たず、thisはwindowオブジェクトになるのでwindowをthisとしても結果は同じなります。

document.getElementById('main').addEventListener('click',
  () => {
    this.event.target.style.backgroundColor = "#3fb811";
  }
)