ラッキーな日々

望んでも望んでも、叶わないから望み続ける

javascript vue 共通

イベントオブジェクト 教えてイルカさん JavaScript

投稿日:

Pocket

イベントオブジェクトとは

イベントが発生したときはイベントオブジェクトを通してイベントの様々な情報を得ることができます。

イベントオブジェクトは、イベントハンドラーおよびイベントリスナーにおいて実行される関数の引数として受け取ることのできるオブジェクトです。

イベントに関する情報を取り扱うオブジェクト。

タグ内に設定されたイベント・ハンドラからだけでなく,ウインドウ上のどこからでもイベントを取得できる。

要素のクリック時にイベントを設定するには以下のように記述します.
引数によりオブジェクトを取得でき,以下の例では引数をeventとしています.

JavaScriptでイベントオブジェクトを取得

var clickElement = document.getElementById(“clickTarget”);
clickElement.addEventListener(“click”, function(event) {
//クリック時のイベントを記述
},false);

イベントオブジェクト例

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 41
clientY: 17
composed: true
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isTrusted: true
layerX: 41
layerY: 17
metaKey: false
movementX: 0
movementY: 0
offsetX: 31
offsetY: 7
pageX: 41
pageY: 17
path: (6) [button, div#app, body, html, document, Window]
relatedTarget: null
returnValue: true
screenX: 364
screenY: 521
shiftKey: false
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
srcElement: button
target: button
timeStamp: 48585.10000000001
toElement: button
type: “click”
view: Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
which: 1
x: 41
y: 17

 

type イベントのタイプ
screenX イベントが発生したディスプレイ上のX座標
screenY イベントが発生したディスプレイ上のY座標
clientX イベントが発生したクライアント上のX座標
clientY イベントが発生したクライアント上のY座標
pageX イベントが発生したページ上のX座標
pageY イベントが発生したページ上のY座標
offsetX イベントが発生した要素上のX座標
offsetY イベントが発生した要素上のX座標
keyCode イベントが発生した時のキーのASCIIコード
which イベントが発生した時のキーのASCIIコード
(Mozilla系ブラウザ独自)
メソッド
toString オブジェクトを文字列で返す
valueOf オブジェクト内の値を返す
toSource オブジェクト内の値を文字列で返す

スポンサーリンク
スポンサーリンク

関連記事

いまさらjquery mobile

jQuery Mobileにおけるページ遷移  jQuery Mobileでは、同一ドメインに対するリンクは、自動的にAjax式リンクとなります。Ajax式リンクでは、リンク先のページをいったん非同期 …

javascript

お役立ち MDN javascriptリファレンス  で検索。 グローバルで作成された変数はWindowオブジェクトのプロパティになる for(key in window){ console.log( …

モグラとすすむ ビュージェーエスの森 

ディレクティブ 意味 役に立つリンク 出典元 v-for item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリ …

Dynamic Rendering(ダイナミック レンダリング)に関する技術ドキュメントをGoogleが正式公開

Dynamic Rendering(ダイナミック レンダリング)に関する技術ドキュメントをGoogleが正式公開 Source:Dynamic Rendering(ダイナミック レンダリング)に関する …

助けてモグラさん ビュージェーエスの森で迷子になったよ

pwaを勉強していたはずが サイトをpwa化しようと、PWAを勉強していたはずが、 いつのまにかVUE.js(ビュージェーエス)の森(というか砂漠)に迷い込んで 迷子になってしまったよん。 迷子になっ …

調べよう

ありがとう

【プロフィール】
はじめまして EveryDayisaGoodDayです。日本語に直すと日々是好日となります。
個人事業者です。望んでいたわけではないですが、いつのまにかそうなっていました。

病気をしてから、物忘れがひどいのでこのブログは私的な備忘録です。
さっきやったことも忘れるのでブログ自体も迷走中。
望んでも 望んでも 叶わないから望み続ける。

ペットのおうち

鍵開け 鍵修理 24時間 緊急対応
24時間対応鍵トラブル緊急サービスの全国展開おなじみのマルチ救急24岡山市鍵トラブル修理サービスホームページがリニューアル。

岡山市で、お住い 金庫 バイク 原付の鍵トラブルに緊急対応。

  • 鍵をなくしてドアが開けられない。
  • 鍵穴の不具合で鍵が回らない。
  • 鍵が折れた

鍵のトラブルでお困りならお気軽にお問合せ下さい。

深夜の突然の水漏れやトイレのつまりに困ったことは、ありませんか?

全国24時間対応で水漏れ修理 トイレつまりに深夜でも緊急に出動してくれる水道修理サービスがあります。

水漏れ 排水つまりでお困りならこちらの安心の水道修理サービスをご利用してみてください。