最終更新:2022-04-21 (木) 17:06:08 (698d)
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系ブラウザ両方のスクリプトをサポートしています。