検索

クイックアクセス

チラ裏

おなかすいた族！

リンク

人気の50件

最終更新:2022-04-21 (木) 17:06:08 (729d)

JavaScript
JavaScript/イベントオブジェクト
Top / JavaScript / イベントオブジェクト

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Events

概要

イベントが発生するとイベントオブジェクト(event)が作られます。
このイベントオブジェクトは、発生位置、発生オブジェクト、マウスボタンの特定や、押されたキーの特定など色々と使える情報を持っています。

DOM要素のプロパティ/addEventListener

Google Chrome / Firefox / Safari / Opera / Netscapeの場合

JavaScript/event型のイベントオブジェクトが最初の引数として渡される

document.getElementById('aaa').onclick = function(e){ } 

document.getElementById('aaa').onclick = cFunc; 
function cFunc(e){
}

Netscape系ではイベントハンドラに直結してる関数の第1引数に自動的にイベントオブジェクト(event)が入ります。 従って取り出す時は受け取る為の引数を用意しておいて、その引数にイベントオブジェクトを入れます。
addEventListenerで登録したイベントリスナの第一引数（最初の引数）に、イベントオブジェクトが自動的に渡されます。
```
target.addEventListener(type, listener, useCapture);
```

IE (IE6,IE7,IE8)の場合

IEの場合はイベントハンドラの実行箇所から渡されなくても、window.eventとしてオブジェクトを参照できます。

両方に対応する場合

document.getElementById('aaa').onclick = function(e){
  var evt = window.event || e;
} 

document.getElementById('aaa').onclick = cFunc; 
function cFunc(e){
  var evt = window.event || e;
}

HTMLの属性

使用は非推奨。代わりにaddEventListenerを使うこと。

<button onclick="foo('Hello world!')">button</button>
function foo(arg1){
   console.log(arg1);//Hello World
}

イベントオブジェクトはwindow.eventから取得できる。

Firefoxの場合、argumentsを使うと取得できる。(window.eventが無い)

<button onclick="foo(arguments[0])">button</button>
function foo(arg1){
   console.log(arg1);//MouseEvent
}

https://www.softel.co.jp/blogs/tech/archives/1689

メモ

OperaとSafariはInternet Explorer、Mozilla系ブラウザ両方のスクリプトをサポートしています。

参考