EventTarget の継承可能化による EventEmitter の代替 | blog.jxck.io
Intro 念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。 これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。 Allow constructing and subclassing EventTarget Update Chrome Canary 64 で実装が確認できたため、 DEMO を追加した。 EventTarget EventTarget には addEventListener, removeEventListener, dispatchEvent が定義されている。 これは、ブラウザが内部で生成する Event や、任意に生成された CustomEvent を発火/補足するために利用される。 callback = console.log.bind(con
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
jQueryのmouseoverメソッドとmouseenterメソッドの違い
jQueryのmouseoverメソッドとmouseenterメソッドの違い このエントリーはjQuery Advent Calendar 2013の 2日目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 1日目ではJavaScriptのイベントデリゲートやイベントバブリングについて解説をしたので、それを踏まえて2日目はjQueryのmouseoverメソッドとmouseenterメソッドの違いについて解説します。 mouseoverメソッドとmouseoutメソッド mouseoverメソッドとmouseoutメソッドはその名のとおり、要素のマウスカーソルが乗った場合やマウスカーソルが外れた際に発火するイベントです。次のように記述するとdiv要素にマウスカーソルが乗った際に横幅、高さが200pxに拡
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
スマートフォンWebのフロントエンドを高速化する取り組み - クックパッド開発者ブログ
ユーザファースト推進部の丸山(@h13i32maru)です。 先日「撮るレシピ」というサービスを cookpad.com にて公開しました。「撮るレシピ」というサービスは料理本や雑誌のレシピを写真に撮ってクックパッド上に保存できるというものです。料理本や雑誌でレシピを良く見る方はぜひ使ってみてください(Androidアプリ版もあります)。 この「撮るレシピ」は全体公開前に一部のユーザに限定公開をしていました。そして全体公開をするにあたりフロント側のコードを全面的に書き換え高速化を行いました。その結果、最大で30倍高速化することができユーザの使い勝手が向上しました。以下が「書き換え前」と「書き換え後」の計測結果です(Android端末8機種 + iOS3機種で各操作のターンアラウンド時間*1を計測)。 閲覧系 最大: 30倍高速化(4.2秒→0.14秒) 平均: 15.7倍高速化(3.6秒→
Paw.jsというのを書いたのと今から始めるマルチタッチイベント処理 - damelog
どうも、連載予定は絶対に次回を書かないでおなじみの僕です。 Paw.js is 何 マルチタッチに対応してない、いわゆるfastclickを実現するものやtapイベントを発行するライブラリ、やたら機能が多くかつ特にtouchmoveでのイベント過多で処理落ちしかねないライブラリが多かったので、現実的に使うであろう範囲でめちゃ軽なやつが欲しかったので作りました。 Paw.js あなたがもしモバイルWeb開発者で60fpsを出さなければ死ぬのであれば使えばいいと思いますし、そんな必要が無いもしくはフリックやジェスチャも取りたいと言うのであればHammer.jsとか使えばいいんじゃないでしょうか。 シンプル, 小さい, 速い touchevent, pointereventのマルチタッチ対応 tap, doubletap, pressの3つのカスタムイベントを発行 fastclick機能 です。
CSS Click Events | Codrops
An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifications. We can now do a lot of stuff we couldn’t have done without Java
【JavaScript】 MutationObserverの使い方 個人的まとめ - はりをきば
DOMの変更を検知するイベントが非推奨になり 代わりに新しく作られたMutationObserverなるもの。 MutationObserver - Web API インターフェイス | MDN https://developer.mozilla.org/ja/docs/Web/API/MutationObserver DOM変更検知は結構よく使うもの（特にユーザースクリプト）なのに 日本語の解説サイトが↑のMDNとMSDN、ここくらいしかなく その都度ググったり手探りで片っ端から試すのが面倒なので以下に自分用にまとめる。 コンストラクタ まずインスタンスを作る。 window.MutationObserverコンストラクタの引数に、DOM変更を検知した際に実行する関数を渡す。 function omega(data1, data2) { alert("ﾜﾚﾊﾒｼｱﾅﾘ"); consol
scrollイベントが呼ばれすぎることへの対処 - 素人がプログラミングを勉強していたブログ
onscrollを監視していると大量にeventが来てパフォーマンスが劣化するというのはよく聞く話で、 underscore.jsなどでイベントをthrottleやdebounceさせて対処していることが多い。 ただ、scrollに応じてスタイルを変更させたりする場合は、0.1秒くらい遅れがあると視覚的にカクカクしがちで、仕方なくsetTimeout(fn, 0)でthrottleさせることも多いと思う。 scrollイベントは画面のフラッシュレートと同期していないので、マウスやトラックパッドの動きに応じて大量に呼ばれていて、setTimeoutも画面のフレッシュレートとは関係なく内部の実行タイマーに応じて動いている。よって、setTimeout(fn, 0)でthrottleしてもまだ無駄が多い。実験してみたところ、requestAnimationFrameを使うと少しだけマシになること
GeckoのDOMイベント処理の実装
GeckoのDOMイベントの実装方法、処理の流れについてのドキュメントです。対象はGeckoの開発に興味のある方なので、ソースコードをある程度知らないと内容は理解出来ません。
Multi-touch web development | Articles | web.dev
Multi-touch web development Stay organized with collections Save and categorize content based on your preferences. Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these eve
はじめてのNode.js：Node.jsのイベントシステムを知る | OSDN Magazine
本記事は、3月13日にソフトバンク クリエイティブより発売された書籍「はじめてのNode.js －サーバーサイドJavaScriptでWebアプリを開発する－」から、「第7章 Node.jsアプリケーションのデバッグ方法」の一部を抜き出し再構成したものです。 出版社ページ / Amazon.co.jpの商品ページ 大型本: 384ページ、価格：3,045円（税込）、ISBN: 978-4797370904 Node.jsでのWebアプリケーション実行モデル PHPやPerlなどの言語でWebアプリケーションを実装する場合、クライアント（Webブラウザ）とのやり取りはApache HTTP ServerなどのWebサーバーが行い、プログラムはWebサーバー経由で実行される形が多い。いっぽうNode.jsの場合、Node.js自体（正確にはNode.jsに含まれるWebサーバーモジュール）が直
Node書くならEventEmitterについて知っとくべし - Qiita
Nodeの組み込みモジュール・サードパーティモジュール問わず広く使われるのが EventEmitter オブジェクト。 これはNodeで使われるデザインパターンの筆頭みたいなものなので、知っておかねばならない。 ドキュメント: Events ブラウザ上のJavaScriptで addEventListener を使ってイベントドリブンの開発を行うが、Node上でそれを行うのための機能を提供するのが EventEmitter。 例えば次のように使う var EventEmitter = require('events').EventEmitter; function asyncFunc() { var ev = new EventEmitter; console.log('in asyncFunc'); setTimeout(function () { ev.emit('done', 'fo
Tappy: A custom tap event handler | Filament Group, Inc., Boston, MA
Tappy: A custom tap event handler Posted by Scott Jehl 07/14/2014 Tappy is a minimal, normalized “tap” event that works with touch, mouse, keyboard, and more. Tappy allows you to bind to a tap event like you would with other events like click. The advantage of using Tappy’s tap event over click is that it will allow you to execute code immediately on touch devices, eliminating the brief but notice
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Telerik & Kendo UI - .NET Components Suites & JavaScript UI Libraries
How to differentiate single click event and double click event?
README
GitHub - cihadturhan/jquery-aim: jQuery plugin which guesses which element user is going to be hovered/clicked.
Done Resizing Event | CSS-Tricks
window.onload vs document.onload
