検索

クイックアクセス

チラ裏

おなかすいた族！

リンク

人気の50件

最終更新:2015-07-06 (月) 19:21:15 (3215d)

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

https://developer.mozilla.org/ja/docs/DOM/event

DOM要素のプロパティ

イベントオブジェクトは最初の引数として渡される

function foo(arg1) {
  // arg1引数はイベントオブジェクトを自動的に割り当てられます
  alert(arg1);
}
table_el.onclick = foo;

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

JavaScript/event - Netscape、Firefox、Safari、Operaの場合

DOM要素のプロパティ/addEventListener

イベントオブジェクトは最初の引数として渡される

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

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

Netscape系ではイベントハンドラに直結してる関数の第1引数に自動的にイベントオブジェクト(event)が入ります。 従って取り出す時は受け取る為の引数を用意しておいて、その引数にイベントオブジェクトを入れます。

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

window.event - IE (IE6,IE7,IE8)の場合

IEの場合はイベントハンドラの実行箇所から渡されなくても、window.eventとしてオブジェクトを参照できます。
Google Chrome,Safari,Operaも対応。(現在のイベントオブジェクトへの参照)
Firefoxは非対応。

両方に対応する場合

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

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

プロパティ

event.altKey? - イベント中に <alt> が押されたか、boolean値を返します。
event.bubbles? - イベントが浮上(bubble up)するか、boolean値を返します。
event.button? - マウスのキーを返します。
event.cancelBubble? - 非推奨 - そのイベントの浮上(bubble up)がキャンセルされたか、boolean値を返します。
event.cancelable? - イベントがキャンセル可能か、boolean値を返します。
event.charCode? - keypress イベントで、押された文字キーの Unicode 値を示します。
event.clientX? - イベントの水平位置を返します。
event.clientY? - イベントの垂直位置を返します。
event.ctrlKey? - イベント中に <ctrl> が押されたか、boolean値を返します。
event.currentTarget - イベントが現在登録されている target へのリファレンスを返します。 - EventTarget
event.detail? - イベントの種類に依存して、イベントの詳細を返します。
event.eventPhase - 現在評価されているのがイベントの流れのうちどの段階にあたるのかを示します。
event.explicitOriginalTarget? - The explicit original target of the event (Mozilla-specific).
event.isChar? - イベントが文字入力かどうか、boolean 値を返します。
event.keyCode? - keypress イベントでは文字でないキーの、その他のキーボードイベントでは全てのキーの Unicode 値を返します。
event.layerX? - 現在のレイヤー上における相対的な水平座標を返します。
event.layerY? - 現在のレイヤー上における相対的な垂直座標を返します。
event.metaKey? - イベント中に <meta> が押されたか、boolean値を返します。
event.originalTarget? - The original target of the event, before any retargetings (Mozilla-specific).
event.pageX? - イベントのページ上における相対的な水平座標を返します。
event.pageY? - イベントのページ上における相対的な垂直座標を返します。
event.relatedTarget? - Identifies a secondary target for the event.
event.screenX? - イベントのスクリーン上における水平位置を返します。
event.screenY? - イベントのスクリーン上における垂直位置を返します。
event.shiftKey? - そのイベント中に <alt> が押されたか、boolean値を返します。
event.target - イベントが最初に送出された target への参照を返します。 - EventTarget
event.timeStamp? - イベントが生成された時刻を返します。
event.type - イベントの名前を返します。(大文字小文字を区別しない)
event.view? - イベントの生成元のAbstractView?を指定する view 要素です。
event.which? - どんなキーが押されたかにかかわらず、キーボードイベントで押されたキーの Unicode 値を返します。

メソッド

event.initEvent? - DocumentEvent? インターフェースによって生成されたイベントの値を初期化します。
event.initKeyEvent? - キーボードイベントを初期化します。Gecko-specific
event.initMouseEvent? - 生成時にマウスイベントを初期化します。
event.initUIEvent? - 生成時にUIイベントを初期化します。
event.preventBubble? - 廃止イベントが浮上(bubble up)しないようにします。これは、標準のevent.stopPropagation に取って代わられたため廃止され、Gecko 1.9 で削除されます。
event.preventCapture? - 廃止これは標準のevent.stopPropagation に取って代わられたため廃止され、Gecko 1.9 で削除されます。
event.preventDefault - イベントをキャンセルします。(キャンセル可能な場合のみ)
event.stopPropagation - これ以上イベントが伝播(propagate)するのを停止します。

その他

event.touches? - Mobile Safari
event.dataTransfer? - DataTransfer

Firefoxだと非対応

event.offsetX
event.offsetY?

関連

window.event - IE6,IE7,IE8とかの場合のイベントオブジェクト
addEventListener