0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptのイベントオブジェクトmemo

Last updated at Posted at 2020-10-12

JavaScriptのイベントオブジェクトって?

イベントリスナーやイベントハンドラーは、引数としてイベントオブジェクトを受け取ります。
DOMで発生したイベントは、イベントオブジェクトを使用して、プロパティー(情報)を取得したり、メソッドを使用して値を操作することができます。

例えば、keydownイベントのイベントオブジェクトはこんな感じ
スクリーンショット 2021-04-13 10.26.31.png
eでkeydownイベントオブジェクトを受け取ったとすると、
e.typeで"keydown"というvalueを受け取れるということです。

具体的に何ができるの?

  • typeプロパティ...イベントの種類は何か分かる(clike, mouseoverなど)
  • targetプロパティ...イベント発生元の要素を取得できる
  • clientX, clientY...イベントが発生した、ブラウザ上での座標を取得できる
  • keyプロパティ...押下されたキーボードのキーの値を取得できる

などなど

イベントオブジェクトを取得するには?

イベントリスナーに引数を指定するだけです。
慣例的にeevがよく使われます。

書き方例

document.getElementById('item').addEventListener('keydown', function(e) {
  console.log('キーコードは' + e.keyCode + 'です'), false);
});

おまけ

クリックイベント等でリロードされてしまう時などは、イベントハンドラーでイベントオブジェクトを受け取って、preventDefault()をするとリロードされてしまうなどがなくなる

xxx.addEventListener('click', function(e) {
  e.preventDefault();
}
0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?