Home > 技術 > Event.observeでセットするfunction内のthisについて

• Newer
• Older

Event.observeでセットするfunction内のthisについて

• 2008-08-14 (木)
• 技術

例えば以下のようにセットすることは多々あると思うのですが、

Event.observe(window, "load", function(){ Event.observe("hoge", "click", function(){ alert(this.id); // ここのthisってどこ？ }); });

注意したいのは「this.id」としている部分。
ここのthisはもちろん"hoge"オブジェクトになっててほしいところなんですが、IEではwindowオブジェクトになってしまいます。
以下のサンプルではalert(this.id)でhogeが表示されてほしいところですが、windowIdが表示されます。

window.id = "windowId"; Event.observe(window, "load", function(){ Event.observe("hoge", "click", function(){ alert(this.id); // windowId }); });

が～～ん！

これはPrototype.jsの中でattachEventを使ってイベントを登録しているのが原因かな～なんて思っています。
まぁIEでイベント登録するときはattachEvent使うしかないのですが・・・

ためしにEvent.observeの部分を自分で書いてみたのですが、やっぱりattachEventの部分が「windowId」になる。

window.id = "windowId"; if(window.attachEvent){ window.attachEvent("onload", function(){ $("hoge").attachEvent("onclick", function(e){ alert(this.id); // windowId alert(Event.element(e).id); // hoge }, true); }, true); }else if(window.addEventListener){ window.addEventListener("load", function(){ $("hoge").addEventListener("click", function(e){ alert(this.id); // hoge alert(Event.element(e).id); // hoge }, true); }, true); }

さらっと使っていますが、「Event.element(e).id」を使って自分自身のオブジェクトを取得できるようです。
一応これで解決かと思いきや、まだダメなパターンがありそうです。

クリックされたエレメントの上位エレメントにイベントが登録されている場合

クリックされるアンカータグのひとつ上のエレメントにIDがふられて、そのエレメントにイベントが登録されているパターン。

<script type="text/javascript" src="prototype1.5.js"></script> <script type="text/javascript"> //![CDATA[ window.id = "windowId"; if(window.attachEvent){ window.attachEvent("onload", function(){ $("hoge").attachEvent("onclick", function(e){ alert(this.id); // windowId alert(Event.element(e).id); // bar }, true); }, true); }else if(window.addEventListener){ window.addEventListener("load", function(){ $("hoge").addEventListener("click", function(e){ alert(this.id); // hoge alert(Event.element(e).id); // bar }, true); }, true); } //]] </script> <span id="hoge"> <a id="bar" href="#">hogehoge</a> </span>

この場合だとまずIEでthis.idはwindowオブジェクトだし、Event.element(e).idで取れてくるのはアンカータグのIDだし・・・
んもうっ。

結局のところ

なんか嫌だけど、こうなの？ｗ

Event.observe(window, 'load', function(){ var ele = $("hoge"); // 一旦退避 Event.observe(ele, 'click', function(e){ alert(ele.id); // hoge }, true); }, true);

すんごい初歩的なところで悩んでいますが、jQuery使っているとこのあたりが非常にもどかしい。
というかもっといい方法がありそうだｗ

• Newer: Firefoxプラグインで入力補完が使えるCSSエディタ
• Older: JavaScriptでアニメーション（animate）するときに気をつけたいこと

Trackback:0

TrackBack URL for this entry

http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1093

Listed below are links to weblogs that reference

Event.observeでセットするfunction内のthisについて from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > Event.observeでセットするfunction内のthisについて

Search

HouseTect, JavaScriptな情報をあなたに内の検索

Ads

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

• RSS Feedを登録する

作ったもの :

• products

他に運営しているサイト：

• NoTechnoNoLife, フェティッシュな情報をあなたに
• DigitalGrounder, クリエイティブな情報をあなたに

人気のエントリー

JavaScript本

誰もが通る道… それはサイ本。

JavaScriptだけでなく、CSSやフロントエンドのパフォーマンスアップがぎっしりと詰まっててすばらしい良書です。

執筆されたのは結構前なのですが、いろいろなJavaScriptの手法が書いてあるステキな本。特にJohn ResigがjQueryの初期を制作しているときの本なので、英語ですがコードだけでも追うと面白いと思います。

書評 - jQuery Mobileポケットリファレンスで書評を書きました。

Recent Entries

• Vimをちゃんと使い始めてみる
• さくらVPSでnginxをインストールしたときのメモ
• 書評 - jQuery Mobileポケットリファレンス
• iDance - Thank you Steve.
• さくらVPSにApacheをインストールする方法
• さくらVPSを使うときの初期設定メモ
• jQueryMobileのXSSに関する調査メモ
• jQueryMobileのかゆいところに手が届くお作法メモ
• jQueryMobileを使ってのスマートフォンサイトの構築メモ
• 新しいMacbook Proにインストールしたものメモ Part2

Tag cloud

ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Tomcat Tool Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding

カテゴリー

• Firefox
• Lifehack
• Mac
• News
• Photoshop
• Web
• アイテム
• ガジェット
• ゲーム
• サービス
• デザイン
• ブログ
• 技術
• 映像
• 本
• 画像
• 考え方
• 言葉
• 雑記

月別アーカイブ

月を選択 2012年1月 2011年10月 2011年7月 2011年6月 2011年2月 2011年1月 2010年12月 2010年11月 2010年10月 2010年9月 2010年8月 2010年6月 2010年5月 2010年3月 2010年2月 2010年1月 2009年12月 2009年11月 2009年10月 2009年9月 2009年8月 2009年7月 2009年6月 2009年5月 2009年4月 2009年3月 2009年2月 2009年1月 2008年12月 2008年11月 2008年10月 2008年9月 2008年8月 2008年7月 2008年6月 2008年5月 2008年4月 2008年3月 2008年2月 2008年1月 2007年12月 2007年11月 2007年10月 2007年9月 2007年8月 2007年7月 2007年6月 2007年5月

Powered by

Powered by
Movable Type Commercial 4.261