JavaScriptのinputイベントのイベントオブジェクトに存在するプロパティの状態検査をするためのコード。
Last active
March 13, 2018 09:13
-
-
Save sounisi5011/d6328ef4026e8bc3f4b5e5955a2f56cd to your computer and use it in GitHub Desktop.
JavaScriptのinputイベントのイベントオブジェクトに存在するプロパティの状態検査をするためのコード
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset=utf-8> | |
| <meta name=viewport content="width=device-width,initial-scale=1"> | |
| <meta name=format-detection content="telephone=no,email=no,address=no"> | |
| <title>JavaScriptのinputイベントのイベントオブジェクトに存在するプロパティの状態検査をする</title> | |
| <h2>Gist</h2> | |
| <a href=https://gist.github.com/sounisi5011/d6328ef4026e8bc3f4b5e5955a2f56cd>https://gist.github.com/sounisi5011/d6328ef4026e8bc3f4b5e5955a2f56cd</a> | |
| <script src=main.js></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| const inputElem = document.createElement("textarea"); | |
| const compositionListener = e => console.log({type: e.type, e}); | |
| const inputListener = e => { | |
| /* | |
| * Input Events Level 2 - InputEvent | |
| * @see https://www.w3.org/TR/2017/WD-input-events-2-20170905/#interface-InputEvent | |
| */ | |
| const inputType = e.inputType; | |
| const dataTransfer = e.dataTransfer; | |
| const getTargetRanges = e.getTargetRanges(); | |
| /* | |
| * UI Events - InputEvent | |
| * @see https://w3c.github.io/uievents/#interface-inputevent | |
| * @see https://developer.mozilla.org/ja/docs/Web/API/InputEvent | |
| */ | |
| const data = e.data; | |
| const isComposing = e.isComposing; | |
| /* | |
| * UI Events - UIEvent | |
| * @see https://w3c.github.io/uievents/#interface-uievent | |
| */ | |
| const detail = e.detail; | |
| /* | |
| * DOM Standard - Event | |
| * @see https://dom.spec.whatwg.org/commit-snapshots/56ca18c09a3ffc713f0e94ab3a3a4d515df5758c/#interface-event | |
| * @see https://developer.mozilla.org/ja/docs/Web/API/Event#Properties | |
| */ | |
| const eventPhase = e.eventPhase; | |
| console.log({ | |
| inputType, | |
| dataTransfer, | |
| getTargetRanges, | |
| data, | |
| isComposing, | |
| detail, | |
| eventPhase: ( | |
| ["NONE", "CAPTURING_PHASE", "AT_TARGET", "BUBBLING_PHASE"] | |
| .filter(prop => Event[prop] === eventPhase) | |
| )[0], | |
| e, | |
| }); | |
| }; | |
| inputElem.addEventListener("input", inputListener, {passive: true}); | |
| inputElem.addEventListener("compositionstart", compositionListener, {passive: true}); | |
| inputElem.addEventListener("compositionend", compositionListener, {passive: true}); | |
| document.body.prepend(inputElem); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment