IME（全角）入力におけるjsイベント現状調査 - Qiita
この記事で対象としているブラウザはChrome(mac/win), Safari(mac), Firefox(mac/win), Edge(win) の最新バージョンで、以降これらをモダンブラウザと表記する。 tl;dr Safariで全角入力におけるJSイベントの挙動がおかしかったため調査したところ、仕様(draft含む)上はInputEventだけで判定できそうで期待したが、現状の挙動はベンダー毎に異なった 本命のinputEvent.isComposingはSafari/Edgeで対応してなかったりChrome/Firefoxでも挙動が違って使い辛い inputEvent.inputTypeは使える場面がありそう CompositionEventはモダンブラウザ全てに実装されており最も有用 inputイベントと組み合わせる場合はFirefoxのcompositionendイベントの発
JavaScriptのイベントをたくさん見られるサイトを作る
JavaScriptのイベント、ややこしいですよね。 名前が似ているものや、使い方にクセがあるものもあり、簡単なようで実装に手間どることが多いです。なので、よく使うイベントの概要をざっくりまとめ、それぞれの実行タイミングとイベントオブジェクトをコンソールで確認できるサイトを作りました。 忘れたときに調べればいいだけの話なので、わざわざサイトを作る必要はなかったのですが、イベントを眺めるのが好きな人に見ていただけたら嬉しいです。 JavaScriptのイベントをたくさん見られるサイト ひたすらaddEventListenerしていたら、イベントに愛着が湧いたので、イベントの実装でハマりそうなところをまとめています。 なぜイベントを使うのか マウスなどはイベントじゃないと値が取得できませんが、頑張ればイベントを使わずとも実装できるものもあります。たとえば、テキストボックスの変更を知りたいだけで
押下されたキーの種類を判定するやつ - ✘╹◡╹✘
最近Twitterクライアントやエディタ、その他WebアプリなどでいわゆるSingle Page Applicationを書く機会が何度かあって、押下されたキーの種類を判定するロジックが頻出するようになったので雑にライブラリ化して r7kamura/key-string というのを書いた。 使い方 KeyStringDetectorクラスのインスタンスを作成して、KeyStringDetector#detect(event) を実行すると文字列が得られる。 const keyStringDetector = new KeyStringDetector(); keyStringDetector.detect(event1) // => 'F' keyStringDetector.detect(event2) // => 'Ctrl+Return' keyStringDetector.dete
ホイール系イベント2014年版クロスブラウザ
Updated 2014.10.15 / Published 2014.03.04 ホイール系のイベントは各ブラウザの実装がバラバラでクロスブラウザ対策に苦労するイベントのひとつとして知られているでしょうが、Document Object Model Level 3 Eventsにより標準化されたwheelイベントが多くのブラウザで実装されてきています。本エントリーでは現状のホイール操作時の各イベントについて、クロスブラウザでフォールバックしながら用いる方法を解説していきます。 ホイール系イベント比較 DOMMouseScroll, MozMousePixelScroll DOMMouseScrollイベントとMozMousePixelScrollイベントはどちらもGecko 固有のため、現存ではFirefoxしかサポートしていないイベントです。DOMMouseScrollはスクロールする
イベントハンドラの this と event.target, +α - hogehoge @teramako
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life 対応その２: event.targetを使う と 対応その４ : this を使う について 上記サイトで書いてあることが間違っているというわけじゃないんだけど、少し補足したい。 event.target その Event オブジェクトには発火元となった要素を target プロパティとして保持しています. 合っています。 が、on* や addEventListener した要素と target は必ずしも一致しない点には注意した方が良いと思います。 <ul id="list"> <li>foo <b>hoge</b></li> <li>bar <b>hoge</b></li> </ul> var list = document.getElement
jsで「最後までスクロールされた」というEventをキャッチする - Qiita
今までどういうふうに実装されているのか知らなかったので、 jquery_bottomを読み解いて理解したのでメモ。 jquery_bottomはこちら。 https://github.com/jimyi/jquery_bottom 必要な情報 要素の表示領域 要素のスクロール分を含めた高さ 要素のスクロール位置 この情報がわかれば、下記の情報を導き出せる。 「要素の表示領域」+「要素のスクロール位置」＝「現在の表示位置の高さ」 「現在の表示位置の高さ」さえわかれば、後はその値が「要素のスクロール分を含めた高さ」にどれだけ近づいているかで、スクロール位置を判断することができる。 実装してみる // スクロールさせる要素を取得 var elm = document.getElementById('scrollElement'); // 要素の表示領域を取得 var height = elm.o
EaselJSのEventDispatcher.jsを借りてJavaScriptでaddEventListener
EaselJSにEventDispatcher.jsが追加された様子。 https://github.com/CreateJS/EaselJS/ JavaScriptで困ってたのがカスタム・イベント作成と通知。 無いと困るのでオレオレ実装でだましだましやってきたけど、もっと信頼できる仕組みを作りたいと思ってました。 そんな時の、この良いお知らせ。 まじめにお仕事していると良いことがあるなぁ〜。 年末のステキなプレゼントです。 EventDispatcher.jsのソースはgithubでご覧になって下さい。 ActionScript 2, mx.events.EventDispatcher に似た仕組みを持っているようです。 使い方もかなり似ています。 jQueryを使用しています。 var EventDispatcher = createjs.EventDispatcher; functi
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
QuoJS - Micro JavaScript Library
The blog tapquo.com has been acquired by FindMyHosting.com. Its best and archived contents are kept alive as sub-pages of FindMyHosting.com/tapquo/ FindMyHosting.com takes no responsibility for the factual accuracy or anything else regarding the archived Tapquo contents posted under FindMyHosting.com/tapquo/ About Tapquo.com: Tapquo, founded in 2011, was built to develop meaningful projects design
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - DataTables/VisualEvent: Visually show Javascript events on a page