ページ内の画像が全部読まれた場合にイベントを発生させられるjQueryプラグイン「onImagesLoad」:phpspot開発日誌
ページ内の画像が全部読まれた場合にイベントを発生させられるjQueryプラグイン「onImagesLoad」 2010年11月12日- Official documentation for the jQuery 'onImagesLoad' plugin - by Cirkuit Networks, Inc. ページ内の画像が全部読まれた場合にイベントを発生させられるjQueryプラグイン「onImagesLoad」 ブラウザの標準機能ではonloadはありますが、画像を読み込んだタイミングで発生させるonImageLoadを発生させられるjQueryプラグインです。 単純に、ページ全体の画像というくくりだけでなく、特定の<div>内の画像を全部読み込んだ後で発生させることも出来るみたいです。 AJAXを活用したダイナミックなサイトで活用できそうですね。 具体的な動作サンプルはサイトでチェ
[JS]キーボードのイベントを取得できるスクリプト -jQuery Hotkeys Plugin
jQuery Hotkeys Pluginは、単独のキーからキーを組み合わせたものまで、キーボードのイベント取得ができるスクリプトです。
Javascript/イベントのバブリングという現象 - 俺の基地
バブリングとは バブリングとは・・・イベント発生源（クリックされたりした要素）からの親ノード親ノードへとイベントが伝わること。深い部分の要素から泡が浮き上がってくるようにイベントが伝播するからバブリング ▲ ▼ JavaScriptのイベントハンドラ JavaScriptではこのイベントの伝播をイベントハンドラ（onclickとかonmouseoverとか）でキャッチすることによって、イベントを関数キックのトリガーに使うことができる。 いつもonclickとかで書いているのは、自分発生のイベントを自分でキャッチしているってこと 別の見方をすると、イベント発生源とイベントハンドラがくっついているものは一緒な必要が無い だからイベントハンドラが登録してあれば、子要素をクリックした場合、親をクリックしてもないのに親のイベントハンドラにセットしてある関数が呼び出されたりします バブリングはキャ
IE の innerHTML や appendChild で要素が挿入された瞬間を取得する方法 - IT戦記
要素が挿入された瞬間を取得する 今までは出来ないと思っていたのですが、今日いろいろ試していて出来る方法が分かりました。 ですので、ちょっと紹介したいと思います。今のところアイデアなので、実用性は？です。 方法 HTML に以下の style 要素を挿入することで実現することができます。 <style type="text/css"> * { display: expression(function() { if (!this.__mark) { this.__mark = true; alert('inserted node: ' + this.tagName); } return ''; }.apply(this)); } </style> 実際に例を見てみましょう http://amachang.art-code.org/ieexpression/000.html <!DOCTYPE
JavaScriptのイベントハンドラ説明
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 を読んで，思うところあって書いてみました（決してカウンターアーティクルではない）。 むかしむかし JavaScript を触っていた むかしむかしに書かれた JavaScript の本で勉強している／した 人向けに。大元記事（そろそろ本気で学びませんか？ | Think IT（シンクイット））の想定読者に近いかなと思います。よって以下は JavaScript の初学者にはまったくおすすめできない（余計な知識がついてしまう）です。 Step 1: はじめのいっぽ ボタンを押したらメッセージボックスが出現する HTML を書いてみます。 <html><body> <script type="text/javascript"> function ShowMes
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
重くなる原因でもなければバージョンが変わるのはライブラリだけではない - VTuberになったプログラマーの魂の残滓
昨日書いたエントリに次のような反応をいただきました。 紅茶屋くいっぱのあれこれ日記 反対する理由として 初期読み込みが重たくなる バージョンは変わる ということでしたので、引用しつつ反論してみたいと思います。 最初に aタグにonClick書いてる時点でなにか違うことをやっている気がしなくもない。 もともとこういうのは超苦肉の策で始めたものだ。 ボタンが嫌だ！リンクにしたいっていうご要望をうけいれるところから始まった。 これですが、もはや過去の経緯などは関係ありません。 今、ウェブを見ているユーザが一般的にクリックできると考える要素はアンカータグだと思います。 ユーザがアクションを起こすことができると考える要素にイベントハンドラをセットするのはごく普通の流れだと思います。 この時点で違うと言われてしまうとユーザに優しくないページだらけになってしまいます。 WEB標準といった流れも考慮すると
ページ移動の前に確認をする、onbeforeunloadサンプル:phpspot開発日誌
ページ遷移前に確認をする、onbeforeunload - 実用 windowのonbeforeunloadハンドラで、Event#returnValueに値を入れると、ページ遷移直前にユーザーに確認ダイアログを表示することができる(んだって)。ネタとしては古いかもしれませんが、ページ移動時にダイアログで確認する際のonbeforeloadイベントの使い方。 ページ移動時の確認ダイアログをどうやるんだったか、うろ覚えで、ちょっと調べるのに手間取ったのでメモ。 次のように書いておけば、ページ移動時に確認ダイアログを表示して移動するかどうかを確認できます。 window.onbeforeunload = function(event){ event = event || window.event; event.returnValue = ' ページ移動時の確認文言 '; } Firefox2と
JavaScriptのonbeforeunloadをPrototype.jsで使う:phpspot開発日誌
cl.pocari.org - prototype.js の Event.observe を使った onbeforeunload について JavaScript のイベントに、Windows が閉じられる直前に起こる onbeforeunload があります。 JavaScriptのonbeforeunloadをPrototype.jsで使う。 ページを移動しようとすると、ダイアログが表示され、移動するかどうか聞いてくる、という画面を見たことがあると思いますが、これは onbeforeunload イベントによるものらしいです。 WEBサイトでは、間違ってリンクをクリックしてしまって、誤って別のページに移動してしまい、編集中の内容が消えてしまったりすることがあります。 利用者側としては、移動する前に確認してほしい、という思いが生まれると思いますが、onbeforeunload で移動前に確
JavaScriptで外部ライブラリを読み込むためのスクリプトをCodeRepos.orgに上げた。 - ヒルズで働く@robarioの技ログ
Sjaxを使わないJavaScript Loader - ヒルズで働く@robarioの技ログ と JavaScriptから外部JavaScriptを読み込む方法 - ヒルズで働く@robarioの技ログ の改良版です。この二つの記事は忘れてもらって結構です。 前振りとか ライブラリを読み込みたい（＞＜） 「script要素をappendChildする」でやると読み込み完了を待ってくれないので「setTimeoutで3000ms後に本処理」とか、嫌だ。 そこで「指定したプロパティが存在するか」を監視するスクリプトloader.js.incを書きました。http://coderepos.org/share/に置いてあります。 http://coderepos.org/share/browser/lang/javascript/misc/loader.js.inc http://coderep
第6回 イベントハンドラから脱却しよう
今回はイベントについて学んでいきましょう。JavaScriptによるアプリケーションを作成するうえでは，イベントは欠かすことができない要素です。 ここでは，旧来より使われてきたイベントハンドラのおさらいと，イベントハンドラの問題点を考察します。そして，イベントハンドラに置き換わるW3C DOMイベントモデルの基礎を学んでいきます。 イベントとは イベントとは，ブラウザ上で発生した出来事全般のことを表します。例えば，ブラウザに表示された画面上でマウスをクリックしたり，テキストボックスに文字を入力するといったように，閲覧者が何か操作したときにイベントが発生します。また，HTMLがブラウザに読み込まれたり，別のページに移動したという現象もイベントとして認識されます。 まずはじめに，旧来より使われてきたイベントハンドラについておさらいしましょう。 イベントハンドラ イベントをJavaScriptで
Firefox、onoverflow/onunderflow、文字の溢れを検出するイベント - FAX
Firefox、onoverflow/onunderflow、文字の溢れを検出するイベント JavaScript Event Handlers ボックス要素などで、文字の溢れが発生した時にoverflowイベントが起きる。 以下を開き、ウィンドウを小さくし文字を画面外に出すとoverflowが発生する。 逆に、拡げて文字を全て表示するとunderflowが起きる。 <html> <body> <div id="main" style="overflow:auto" >-------------------------------</div> </body> <script> var main = document.getElementById('main'); main.addEventListener('overflow', function(e){ console.log(e); },
Re:href=
Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容
ハタさんのブログ : javascriptの暗黒面
javascript の暗黒面については、ちょっと書かれているので何も言わずもがな。なのですが、最近こういった質問が増えてきたので少し書く。 via - JavaScript の暗黒面を覗く nullはオブジェクトだ！ nullは歴史的理由からobjectです。なので、typeofするとobjectって返ってきます。 alert(typeof null); // object なので、この事に気がついている方は次のようなコードを書きます。 if(typeof hoge == 'undefined' || hoge == null){ // do something } たとえば、次のようなコード var hoge = function (a){ if(typeof a == 'number'){ // was number // 数値計算とか return a + 1; } if(type
テキストエリアでリターンキーを押した際に、submitイベントの発生を抑止する方法 - Enjoy*Study
テキストエリアでのリターンキーで、submitイベントが発生しないようにする場合、ブラウザ毎にどのような処理を書けばいいのか調べてみました。(submitイベント自体に処理を追加せずに、テキストエリアでのイベントで制御したかったので) テキストエリアでのリターンを拾えるイベントとしては、下記の3つがあります。 keypress keydown keyup イベントをキャンセルする方法は、IEのJScriptの実装と、DOM 2のEventモデルでの実装である下記の2パターンを試しました。 event.preventDefault() event.returnValue=false そして確認の結果、上記のイベント×キャンセル処理の組み合わせでsubmitイベントがキャンセル出来るのは、下記のパターンとなりました。 IE 6 keydown - event.returnValue=false
classに値を指定するだけでクリックイベントを付与できる「behavior.js」:phpspot開発日誌
duck_typer - Automating JS behavior registration I created a behaviors javascript class to handle all my (prototype) Event observe registrations. Annotating DOM elements with the metadata needed to register itself automatically, which would save you from having to call Behavior.register(..). classに値を指定するだけでクリックイベントを付与できる「behavior.js」。 次のようにタグを書いておくとします。 <a class="bvr-observe-click-xhrTheFunction"
Yahoo! UI Libraryでキーボードイベントを扱う方法 - F.Ko-Jiの「一秒後は未来」
Yahoo! UI Library のリファレンスを見てもキーボードイベントを取り扱う方法がいまいち分かりにくかったので、以下に簡単なサンプルを掲載しておきます。少々理解できていない部分があるので必要最小限の情報です。 必要なライブラリ イベントを扱うだけであれば、yahoo-min.jsとevent-min.jsをインクルードしておけばいいです。ライブラリはYahoo!がホスティングしてくれます。 <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo/yahoo-min.js" ></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/event/event-min.js" >
[ThinkIT] 第2回：jQueryライブラリの内部とonloadイベント記法 (1/2)
※注3： http://jquery.com/ 本稿では執筆時点の最新版であるバージョン1.0.4を解説しますが、2007年3月現在では、バージョン1.1.2がリリースされています。下記の解説部分は、1.1.2でも同様の処理が実装されています。 Prototypeライブラリがscript.aculo.usライブラリとの組み合わせで実現していたエフェクト処理の一部も、jQueryではそれ単体のみで対応しており、プログラマにとってWebページを制作する際に必要となる、かゆい所に手が届いた実装が魅力のようです。 また、jQueryライブラリのソースコードにはJavaScriptプログラミングの最新ノウハウがギッシリと詰まっています。リスト1にjQueryのコードを一部抜粋しましたので、実装方法を解析してテクニックの一部を確認してみましょう。 Prototypeライブラリは、JavaScriptの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ラジオボタンの変化を検知するためのイベント
http://youmos.com/news/event_js