#author("2022-05-11T01:33:57+00:00","default:admin","admin")
#author("2022-05-11T07:06:02+00:00","default:admin","admin")
-[[JavaScript]]
-[[JavaScript/V8]]
-[[JavaScript/イベント]]
-[[JavaScript/サーバサイド]]
-[[JavaScript/トラブル事例]]
-[[JavaScript/ライブラリ]]
-[[JavaScript/ローカルファイル]]
----

-[[JavaScriptとHTMLとDOMの基本#2 イベント編:http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0007?skip]]
-[[イベントハンドラの仕様と概要:http://omnioo.com/omnioolab/web-design/javascript/post-44.php]]
-[[イベントとイベント処理:https://sites.google.com/a/cse.kyoto-su.ac.jp/cac-wiki/reference/javascript/17]]

-[[onmousedown属性 onmousemove属性 onmouseup属性 - WorldWideWeb Guide:http://w3g.jp/xhtml/dic/onmousedown]]
-[[eventオブジェクト:http://js.cg-10.com/sub-sub-javas4.html]]

-[[javascriptのonClickにあるreturn:http://hamu888.blog133.fc2.com/blog-entry-5.html]]

-[[Onclick関数とtargetの関数が競合してしまいます。:http://a2i.jp/faq/topic/62]]


* ブラウザによる違い [#p9c4162b]
-[[ブラウザによるイベントの取り扱いの違いを吸収する:http://codezine.jp/article/detail/158]]

* イベントモデルの種類 [#i019bc8d]

| 種類 | IE以外 | IE | 説明 |h
| DOMレベル0 | o | o | HTML4標準。IE以外とIEで若干異なる部分がある。|
| DOMレベル2 | o | x | aaa |
| IE独自 | x | o |  |

** DOMレベル0 [#q3607f9e]
-ページ要素の属性として onXXXX という形式のイベントハンドラを指定
-属性名は全て小文字だけにする(例:onload)
-イベントオブジェクトへのアクセス方法
--IE ... window.event
--IE以外 ... イベントを表すオブジェクトがイベントハンドラ関数の引数として渡される

** DOMレベル2 [#i52c6ff2]
-任意のオブジェクトの任意のイベントに対して、複数のイベントハンドラを登録することが可能
-各オブジェクトが以下の3つのメソッドを持っている
--addEventListner
--removeEventLIstner
--dispatchEventListner

** IE独自のイベントモデル [#y9a81e45]
-各オブジェクトが以下の2つのメソッドを持っている
--attachEvent ... addEventLister相当
--detachEvent ... removeEventLister相当
-IEのイベントモデルでは、各イベントハンドラにメモリが割り当てられるため、ページをロードする度にメモリが割り当てられる

*イベントの取得 [#r19712ae]
-[[イベントオブジェクトまとめ:http://archiva.jp/web/javascript/event-object.html]]

-IEでもFirefoxでもイベントオブジェクトが取得できる関数
 function getEvent(){
     if (window.event) return window.event;
     var caller = arguments.callee.caller;
     while (caller) {
         var obj = caller.arguments[0];
         if (obj && (obj.constructor == MouseEvent || obj.constructor == KeyboardEvent)) return obj;
         caller = caller.caller;
     }
     return null;
 }
-[[参考:Firefoxでの擬似window.event:http://p2b.jp/1149066600]]

**フォーム関連 [#k7d3c8ec]
-[[【JavaScript】blurとfocusoutの違いについて解説:https://freelance321.com/javascript/blur-focus-focusout/]]
-[[フォーカス: focus/blur:https://ja.javascript.info/focus-blur]]

**全角入力 [#j3ce9448]
-[[全角入力の開始と終了を検出する:https://gray-code.com/javascript/detect-the-start-and-end-of-full-width-input/]]
-[[JavaScript で日本語の変換確定とその他のリターンを識別する方法:https://gotohayato.com/content/496/]]
-[[IME(全角)入力におけるjsイベント現状調査:https://qiita.com/darai0512/items/fac4f166c23bf2075deb]]

***CompositionEvent [#v94b7738]
-IMEによるテキスト編集監視に用いるイベント
-半角入力時は当然発火しない

-compositionstart ... IMEで未確定文字列の入力を開始した時
-compositionupdate ... IMEで編集中のテキストが変更された時
-compositionend ... IME確定時

-[[KeyboardEvent.isComposing:https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/isComposing]]

**キー関連 [#l0b7ff3c]
-[[onkeydown、onkeypress、onkeyupの動作の違い【JavaScript】:https://web-tsuku.life/js-onkeydown-onkeypress-onkeyup/]]

**ボタン関連 [#n4850917]
-[[どのボタンでクリックされたか判別する:http://www.programming-magic.com/20090127231544/]]
-[[JavaScriptでのキーボードイベント処理:http://javascriptist.net/docs/pract_keyboard_event.html]]

*イベントの優先順位 [#e01d0fa3]
-Netscape, Firefox, Opera, Safari では onmousedown→onmouseup→onclick→onmousedown→onmouseup→ondblclick の順にイベントが発生
-Internet Explorer のみイベント発生順序が異なり、onmousedown→onmouseup→onclick→onmousedown→ondblclick→onmouseup の不規則な順でイベントが発生

*トラブルシューティング [#hb3789dd]
-[[[Vue.js] iOSでIME入力中に他のテキストボックスにフォーカスを当てると入力していた値がコピーされてしまう問題の対処:https://qiita.com/NoUkeNoLife/items/b945737eb52e653f218f]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS