Re: [問題] jQuery 的 attr 與 bind

看板Ajax作者ybite (小犬)時間16年前 (2009/08/26 03:17)推噓2(2推 0噓 3→)

留言5則, 2人參與討論串2/2 (看更多)

先當個鄉民Review Code XD ※ 引述《s5846125 (陸奧鬼一)》之銘言： : 這是原本的寫法: : <img src="xxxx" : onmouseover="showtrail('XXXX',YY,ZZ);" : onmouseout="hidetrail();" /> : 後來改成這樣: : <img src="xxxx" onload="imgInit(this);" /> : javascript 用了三種寫法才找到解決方法。 : function imgInit(obj) { : // XXXX 是一個字串, YY ZZ 是計算出來的數字 : // 寫法一: (在 FF 可以執行，在IE 會沒有反應) : jQuery(obj).attr({ : onmouseover:"showtrail('XXXX',YY,ZZ);", : onmouseout:"hidetrail();" : }); 坦白講不建議這樣作因為這樣會遇到 IE 的 Bug（就是你遇到的），見下 : // 寫法二: (在 FF、IE，都可以執行) : jQuery(obj).bind("mouseover",function(){ : eval("showtrail('XXXX',YY,ZZ);"); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 這個Eval好奇怪，不懂 : }).bind("mouseout",function(){ : hidetrail(); : }); : // 寫法三: (在 FF、IE，都可以執行) : jQuery(obj).mouseover(function(){ : eval("showtrail('XXXX',YY,ZZ);"); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 同上 : }).mouseout(function(){ : hidetrail(); : }); : } : 這樣是不是代表 .bind("mouseover", fn()) 跟 .mouseover(fn()) : 都是綁成 method，而 .attr("mouseover",fn) 只是綁成 attrib，不會有反應？ : 如果是的話，就寫法一的結果，是不是代表 Firefox 跟 IE 的處理方式有不同？ : 有請板上高手解答。謝謝///////////！這實際上說來很複雜，可以去看 jQuery 的原始碼 attr() 系列是透過 DOM 中的 setAttribute / getAttribute 來實作而舊版的 IE 無法對 on____ 系列的事件作 setAttribute （參考 http://msdn.microsoft.com/en-us/library/ms536739%28VS.85%29.aspx ）如果你用 IE8 ，加上 IE8 在「IE8 標準模式」下執行就會是對的了 XD （有關 IE8 神秘的三種文件模式請參考小弟拙文 http://bit.ly/1SpToE ）而因為 IE Bug 的關係，加上 jQuery 自己有提供事件處理所以不建議用 attr('on_____', '...') 的方式 bind() 和其他 Event 系列的函數則使用完全不同的方式在 IE 下是利用 attachEvent() 或 detachEvent() （非標準）在其他瀏覽器是利用 addEventListener() 和 removeEventListener()（W3C 標準） jQuery 的 Event 系列函數考量並修正了到很多瀏覽器的問題首先光 IE 不支援 W3C 標準的事件處理方式就讓人頭大（所幸 jQuery 都偷偷修好了）再來在 IE 下使用 attachEvent() 又會有記憶體洩漏的問題...（所幸也偷修了）大概是這樣子吧， jQuery 的事件處理真的很方便，請務必愛用！ :D -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 218.170.58.124