イベントの作成と起動 - 開発者ガイド | MDN
この記事では、 DOM イベントを作成して処理する方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。 イベントは、次のように Event コンストラクターを使用して作成できます。 var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { /* ... */ }, false); // Dispatch the event. elem.dispatchEvent(event); 上記のコード例は EventTarget.dispatchEvent() メソッドを使用します。 このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet E
KeyboardEvent.keyCodeとは何か - WebStudio
Tweet (list) 導入 KeyboardEvent.keyCodeとは何なのかについて少し解説してみたいと思います。 Webアプリでキーボードからの入力を処理する場合に、KeyboardEvent.keyCodeと、 KeyboardEvent.charCodeの二つ(さらにKeyboardEvent.whichを使う人も希に見かけますが)を最初に見かけられた方が多いのではないかと思います。 あなたがこれらの属性を初めて知った時、そのドキュメントはどのように解説していたでしょうか。 KeyboardEvent.charCodeはシンプルで誤解するのも難しいぐらいです。 しかし、KeyboardEvent.keyCodeはそうではありません。 多くの人は、この属性を根本的に間違った情報と共に知ったと思います。 KeyboardEvent.keyCodeの歴史 KeyboardEven
Javascriptの実行順序(Web Worker、非同期処理、イベント ) | iret.media
cloudpack あら便利カレンダー 2017 16日目の記事です。 JavaScriptには非同期処理やイベント発火で実行されるもの、またWeb Workersを利用した別スレッドでの実行など記述した順序どおりではない実行タイミングのものがわりと多用されます。 そこでふと気になったのでそれぞれの実行順序ってどうなっているのか Web Workersの別スレッドで実行された結果がどのタイミングで受取ったイベント発行されるのか気になったので サンプルのコードを書いてざっくり調査してみました。 実行される処理 Web Worker1での1つめの処理 Web Worker2で2つめのループ処理 Web Worker1で3つめのループ処理 非同期で実行される処理(setTimeout) べた書きでのループ処理1 べた書きでのループ処理2 ボタンクリックでのイベント発火 記述した順序は上に書いたと
DOMContentLoaded周りの処理を詳しく調べてみました - Qiita
利用者が一定数いるIE6,7,8を除いて、現在利用されているほぼ全てのブラウザで標準仕様として扱えるようになっています。2006年ごろから登場したjQueryの$(document).readyは有名ですが、この存在もDOMContentLoadedが正式に取り入れられるきっかけの1つになっています。 2. jQueryのreadyとの違い HTML5で定義されているDOMContentLoadedとjQueryの$(document).readyは、DOMツリーの構築が完了したことを判定するという点で役割は一緒といえます。ただ、jQueryは古いバージョンのブラウザをサポートするためにDOMContentLoadedを使わないready判定の実装を行っていました。 1. jQuery Core 1.0のready判定（1.0から1.2.1まで） jQyer Core 1.0を見るとIE/
特定の要素以外で発生したイベントをキャッチする（jQuery Advent Calendar 2014 jQuery） - ksk1015のブログ
jQuery Advent Calendar 2014 の6日目の記事です。 空いていたので書きます。 特定の要素で発生したイベントで処理行う場合は と書きます。普通ですね。 特定の要素以外で発生したイベントで処理行う場合は、こんなふうに書けます 解説 documentにイベントリスナー貼ると、どこでイベントが発生してもキャッチできます。 （バブリングするイベントの場合ですが。 イベントバブリングについて解説した記事） そしてイベントオブジェクトからイベント発生元の要素を取得できます。 その要素自体またはその要素が指定セレクタ内かどうかは、.closest()メソッドで簡単に判定できます。 ドロップダウンメニューみたいなUIの閉じる処理、それ以外がクリックされたときは閉じたいけど、操作不能にはしたくないときとかで使ったりします。 調べてみたらjQueryUIのSelectmenuも同じふう
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
DOM Performance (JSNext Bulgaria)
In the client-side development we manipulate the DOM very often. Some of these manipulations take some time to execute, others take even more time. In a complicated JS-based software, it is very important to find the optimal approaches in order to get best performance. We will meet few very common cases, where standard DOM manipulations are very expensive, and we will see what is the optimal way t
『お仕事メモ Javascript イベントを強制的に発生させるヽ(`Д´)ノｵﾘｬ』
競馬とは関係なのでスルーしてくださいｍｍ Javascriptで価格計算などを行う際、 --- document.getElementById("total").value = arguments; --- などとテキストフィールドの値をセットしても、 onchangeイベントが発生しない。 そこでイベントを強制的というかエミュレートする方法を見つけたのでメモ。 // onChangeをエミュレート var elem = document.getElementById("total"); // ブラウザ判定 if( /*@cc_on ! @*/ false ) { // IEの場合 elem.fireEvent( "onchange" ); } else { // Firefoxの場合 var evt = document.createEvent( "MouseEvents" ); //
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
preventDefault()で無効にしたイベントを有効にする方法
preventDefault()で無効にしたイベントを有効にする方法を紹介します。 １．はじめに preventDefault()は、「preventDefault()について」で紹介したとおり、実行したイベントがキャンセル可能である場合、イベントをキャンセルするためのメソッドです。 が、preventDefault()でイベントキャンセルしたあと、再びイベントを有効にする方法が分かりません。 ということで、preventDefault()で無効にしたイベントを有効にする方法について紹介します。 ２．jQueryを使ってpreventDefault()で無効にしたリンクを有効にする ここではa要素を使って、preventDefault()で無効にしたリンク先への遷移を再び有効にするサンプルを用います。 jQueryでは、preventDefault()メソッドをon()とoff()と組み合
jQuery の.on()をもういっぺん理解してみる - あまり新しくないもの
jQueryのイベントハンドリングには、現在 .on(),.off()のみが推奨されて利用されています。 その基本的な使い方はこんなかんじでした。 $(element).on(event, function() { console.log('event fired!'); }); この場合、対象となる$(element)において指定したeventが発火した時に、コールバック関数が呼び出されます。非常に直感的ですね。 ところで、これは以前の.bind()と全く同じです。 .bind()の場合は、指定したずばりその要素に対してのみ、イベントハンドリングを行います。よって、.bind()が呼び出されたその時点で存在しない要素に対しては、たとえセレクタが一致していたとしてもハンドリングが行われません。 このことを利用すれば、イベントハンドリングをしたいまさにその要素にのみ、たとえその後同じセレクタ
サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
要素リストをループで回して addEventListener するみたいな、よくあるサンプルを断罪してみる - hogehoge @teramako
function setButtonHandler () { var buttons = document.querySelectorAll(".hogeButton"); for (var i = 0, len = buttons.length; i < len; ++i) { (function(n) { buttons[i].addEventListener("click", function() { alert(n); }); }(i)); } } って感じのコードってあるじゃないですか。JavaScript で陥りがちな落とし穴を解決するみたいな感じで。 でも、これって本当は良いコードじゃないよね。 (function(n) {.... }(i)) が格好わるいっていうか、毎回即時関数実行かよっていうね click のハンドラーも同じコードなのにループ数分生成しちゃってるよねー
イベントハンドラの 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
OperaにはonBeforeUnloadイベントが無いらしい・・・HTML5に移行するときも思いやられるよ。まったく(*_*)
日経14.06.08朝 芸術と科学のあいだ １７ 鏡文字に込めた天才の思惑 福岡伸一 …ダ・ビンチの筆の特徴は、線が左上から斜め右下へと流れていることである。これは彼が左利きだったかららしい。 もう一つの際立った特徴は、文字がすべて鏡文字、左右反転で書かれていることだ… アイディアを盗まれないよう暗号化したのだという説があるが、暗号にしては簡単に解読されてしまう… ダ・ビンチは天才であり完璧主義者であると同時に、大いなる山っ気を持った人物でもあった。 いつも自分を売り込むこと、プランやアイディアを広めることを考えていた。そのためには何が必要か。マスメディアである。 ダ・ビンチの鏡文字は自分の原稿をいつの日か活版印刷するために意図された周到な準備だったのではなかったか。 日経記事より レオナルド・ダ・ビンチは過去の人物の中で最も尊敬する人物だ。彼は本当に何でも出来た。芸術も、科学も、工学も。
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
addEventListener()の第３引数の意味とかをちゃんと理解する為のメモ - 今日もスミマセン。
Web上でUIをマジメに作ろうとするとイベントの仕組みをちゃんと理解しておく必要がある。 jQueryとか便利なライブラリつかえばある程度簡単にできるんだろうけど、いろいろ制約あってそれらのライブラリが使えない場合もあるので、ちゃんと理解するためにメモしておく。 イベント伝播の順番 W3Cのドキュメントに分かりやすい図があったので引用する。 The capture phase: the event is dispatched to the target's ancestors from the root of the tree to the direct parent of the target node. The target phase: the event is dispatched to the target node. The bubbling phase: the event
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Make a resizable element - HTML DOM
ページ内に仕掛けられた全てのEventListenersの設定元の一覧をダンプし、必要な対策を施す方法 - latest log
