BuriKaigiTechnosoft Automotive Group COO兼 Technosoft Japan Co., Ltd. /President 室長/Ryohei Yoshijima/Microsoft Regional Director Microsoft MVP for Business Applications
Debouncing Javascript Methods | John Hann
Back in 2006, I was the lead front-end architect for a mission-critical Web 2.0 application. Yah-yah, aren’t they all mission-critical? Yes, but this one really was critical since it was one of those make-or-break moments for the product. What made this project really interesting were the unrealistic expectations the product managers had of web apps. Sometimes, pressure like this can lead to creat
Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
もうなんかこの際マジで言わせていただくんですけど、知ってるか知らないか分かりませんが世の中にはすごい頻度で呼ばれうるDOMイベントって言うのがいくつかあるわけですよ 例えば scroll mousemove, touchmove devicemotion 辺りですよ。 で、高頻度で呼ばれるって言うことは必然的に処理量が増えるって分かりますよね？？？？？while(1) {}じゃないとはいえUIスレッドに十分影響を与えうる頻度で呼ばれる訳です。分かりますよね？？？？？？？？ そうなると当然そのイベント内で重い処理を行えば人間が認識できるレベルでのレスポンス遅延が起きるっていうのはご理解できますよね？ 重い処理っていうのはまぁ想像出来るとは思うんですが例えばよくあるのが DOMのレイアウトプロパティへのアクセス offsetTop、offsetLeft、offsetWidth、offsetHe
iPhone/Androidにタッチ！ - 愛と勇気と缶ビール
stats.js (https://github.com/mrdoob/stats.js) という、JavaScriptでfpsもどきの値を出すライブラリをiPhone/Androidで試していた時に気づいたんだけど、iPhone/AndroidのWebKitではデフォルトのスクロール中はsetIntervalの監視が無効になっているっぽい。 具体的には、例えば setInterval(function() { count++; }, 1000); みたいなことをやっているページがあってとして 1. タッチ開始 2. 指を動かす 3. タッチ終了 4. 慣性スクロール の流れで、4.が完全に終わるまでcountの値は変わらない。また、実行キューに入っていたものがスクロール後に一気に実行されるというわけでもない。完全にtimerが止まっている。 一瞬「指を置いて動かしている間はJSの実行は全
jQuery.fn.onに名前空間をつけることができる - Qiita
恥ずかしながら今日まで知らなかったのですが、jQueryはイベントハンドラを登録するときに名前空間をつけることができます。（名前空間というよりはクラスという言い方の方がしっくりくるのですが、jQueryのドキュメントがnamespaceと表現しているので名前空間と書くことにします） 例えば、あるボタンのクリックイベントにイベントハンドラをつける時にこういう風に書きますが $('.button').on('click', function (e) { /* イベントハンドラ */ });
新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe) - Qiita
モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 結論としてはHammer.jsをお勧めしたい
自作オブジェクトのイベントのやりとりにはjQuery.triggerではなくjQuery.triggerHandlerを使うほうがよいと思った - hitode909の日記
DOMオブジェクトには昔からdispatchEventとか，addEventListenerとかあって，最近だと，node.jsのEventEmitterとか，jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる． これまで，自作オブジェクトからイベントを発行するのに，jQueryのtriggerを使ってたけど，意図しない挙動をすることがあることが分かって，triggerHandlerを使うように変えた． jQuery.trigger()は，イベントタイプと一致する関数をレシーバが持ってるとき，その関数が呼ばれる． イベントのやりとりと，メソッドの呼び出しは独立しているというイメージがあったので，うっかり同名のメソッドを定義したときに，一見するとよく分からない挙動になって，難しい． なので，自作オブジェクトがイベントを発行
The homepage of Matt Gaunt-Seo - gaunt.dev
Hello.I’m Matt Gaunt-Seo, I’m a jack of all trades software engineer, previously a senior software engineer at Google. Projects Focus is a simple web app to help you concentrate on your work day-to-day and keep a track of what you've been working on. HTML asset manager provides a simple way to optimize CSS & JavaScripts assets in your statically generated site.
Introduction to DOM Events - DOM ECMAScripting
<body onclick="alert ('BODY');"> <div onclick="alert ('DIV');"> <p onclick="alert ('P');">バブルスライムはにげだした！</p> </div> </body> 「バブルスライムはにげだした！」をクリックすると、それは p 要素をクリックしたことになりますから「p」がアラートされます。さらに、このクリックは div 要素内で生じたものでもあるので「div」がアラートされます。さらにさらに、そのクリックは body 要素内で生じたものでもありますから「body」がアラートされます。結局、1 回のクリックで 3 個もの onclick 属性が呼び出されることになります。では、onclick 属性を呼び出す順番はどうなっているでしょうか。これは明確に決まっています。階層的に最も深い p 要素の onclick
jQuery Custom Events
Overview In the�last article�about�unobtrusive JavaScript, we learned how to use�event delegation�and markup-driven behavior to create reusable JavaScript components. This article will explore how to use custom events in jQuery to give the developer even greater control over the component’s behavior. While many facets of an�unobtrusive widget�can be controlled via the markup (data attributes), we
Ben Alman » jQuery outside events: Why trigger an event on something, when you can trigger it on everything else?
jQuery outside events: Why trigger an event on something, when you can trigger it on everything else? With jQuery outside events you can bind to an event that will be triggered only when a specific “originating” event occurs outside the element in question. For example, you can click outside, double-click outside, mouse-over outside, focus outside (and over ten more default “outside” events). Also
Windows8のChromeやFirefoxはタッチイベントとマウスイベント両方考慮すべし - Webtech Walker
タッチ系の操作をスマホでもデスクトップPCでも動くようにするため、タッチイベントがある場合はtouchstartやtouchmoveを使い、タッチイベントをサポートしていないブラウザではmousedownやmousemoveを使って同じ挙動にするというケースがあります。 例えばこういうやつ。 flipsnap.js DEMO そのようなケースでは僕はこれまで次のように書いていました。 var supportTouch = 'ontouchstart' in window; var touchStartEvent = supportTouch ? 'touchstart' : 'mousedown'; var touchMoveEvent = supportTouch ? 'touchmove' : 'mousemove'; var touchEndEvent = supportTouch
flipsnap.jsでIE10のPointer Eventsに対応した - Webtech Walker
flipsnap.jsをWindows8のIE10のタッチで動くようにしました。 flipsnap.js 思ったより簡単に対応できました。diffはこんな感じ。 IE10 for touch device support. Fix #13 · 0524fef · pxgrid/js-flipsnap IE10はiOSやAndroidのようにtouchstartやtouchmoveのようなタッチイベントが用意されておらず、代わりにタッチした際に、pointerイベントというイベントが発火します。 Pointer Events Specification Touch Input for IE10 and Metro style Apps - IEBlog - Site Home - MSDN Blogs まだMSPointerDownのようにMSというprefixがついています。 elemen
.on() | jQuery API Documentation
The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. For help in converting from older jQuery event methods, see .bind(), .delegate(), and .live(). To remove events bound with .on(), see .off(). To attach an event that runs only once and then remo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン関連イベントカレンダー | unprinted
デザインイベントカレンダー
hanabi.md
http://eightmedia.github.io/hammer.js/
GitHub - jquery/jquery-mousewheel: A jQuery plugin that adds cross-browser mouse wheel support.
Using backbone custom events and the observer pattern