作者sk1765 (鼎玉鉉)
看板Ajax
標題Re: [問題] jquery attr onclick IE7 & 8
時間Sat Jan 29 13:34:18 2011
※ 引述《gaekeamql (芋頭)》之銘言：
: 問一下
: <input type="button" id=1 onclick="alert('001122');" value="alert">
: <input type="button" onclick="$('#1').attr('onclick','');" value="C">
: <input type="button" onclick="$('#1').attr('onclick','alert(\'334455\');');"
: value="RE">
: 此動作在OPREA OK 但是在IE 清除候 再輸入
: $('#1').attr('onclick','alert(\'001122\');'); 卻是沒反應的
: 但是 是有把 oncilck="alert('334455');" 寫進去 但是不會動作
attr()這個方法 應該是用W3C DOM的屬性方法 setAttribute()寫成的
在ppk on Javascript一書第8-G節 有詳細的警告 我把它節錄如下:
------------------------------------------------------------
很多HTML標籤用特定的屬性去保存行內樣式(inline style)和
行內事件處理常式(inline event handler)如 onclick,onkeydown等
在IE中,這些屬性不能透過getAttribute()和setAttribute()來讀寫;
事實上,如果你嘗試這麼做你會遇到怪異的bug
解決的辦法是使用Javascript屬性(Javascript property)
style,onclick,onkeydown等來讀寫這些屬性
為了完全明白這一點,先來探討 HTML屬性(HTML attributes) 和
javascript 屬性(javascript property)有何區別
至於 HTML屬性(HTML attributes) 和 javascript 屬性(javascript property)
以及屬性映射 我就不打了
麻煩請自行參閱ppk on Javascript中文版8-G 圖書館就有
全部打字太累了把 讀寫屬性的最佳方式 看完你就會了解啦
------------------------------------------------------------
以下是解答
<input type="button" id="id1" onclick="alert('001122');" value="alert">
<input type="button" onclick="$('#id1')[0].onclick=function(){};" value="C">
<input type="button" onclick="$('#id1')[0].onclick=function() {
alert('334455'); }" "value="RE">
http://jsfiddle.net/6n4sr/4/
不用famework直接寫如下
<input type="button" id="id1" onclick="alert('001122');" value="alert">
<input type="button" onclick="document.getElementById('id1').
onclick=function() {};" value="set onclick null">
<input type="button" onclick="document.getElementById('id1').
onclick=function() { alert('334455'); }" value="set new onclick">
http://jsfiddle.net/6n4sr/5/
也就是直接用Javascript property映射就好啦
不能用W3C的方法
--------------------------------------------
另外在jQuery中使用
$('#id1').click(function(){
alert('334455');
});
$('#id1').bind('click', function(){
alert('334455');
});
這些都是利用進階模式 註冊事件
也就是透過addEventListener 和 attachEvent完成的
這兩者的第一個參數都是事件名稱繫結 事件名稱在javascript中和
javascript property的使用又不相同 利用這兩者具有附加的效果而非取代效果
所以在取消時 必須用 unclick ,unbind 否則新的click只是附加動作
同時利用進階模式來取消 無法移除傳統註冊以及行內註冊事件
<input type="button" id="id1" onclick="alert('001122');" value="alert">
<input type="button" onclick="$('#id1').unclick();" value="C1"> //->不生效
<input type="button" onclick="$('#id1').unbind('click');" value="C2">//->不生效
<input type="button" onclick="$('#id1').click(function(){alert('334455');});"
value="RE"> //->可以附加event handler
http://jsfiddle.net/6n4sr/15/
<input type="button" onclick="$('#id1').click(function(){});" value="C">
是不行的 因為他是附加動作不是覆蓋動作
同時在jQuery中使用 $('#id1').click(); 很容易讓人迷惘
因為在javascript中 他明明是 事件模擬(event simulation)
但是到了jQuery中變成繫結方法
所以如果不傳參數 是否就是事件模擬
而他的事件模擬 是否有修正javascript中只對表單欄位動作的問題則不確定
結論
1.行內註冊和傳統註冊建議還是用javascript property mapping的方式
來取代原來的handler 和移除
沒辦法用 removeEventListener() 和 detachEvent()移除
bind和unbind 都是用addEventListener 和 removeEventListener() 寫成的
所以也沒辦法移除行內註冊
2.在jQuery中 只用bind('click',xxx) 和 unbind('click',xxx)的寫法
來替代click()和unclick() 以避免不經意的變成事件模擬
3.其實很多問題都是來自於後繼者不想更動原來的網頁和js程式碼
因此直接在網頁上寫inline註冊事件 但是卻沒有了解inline註冊的意義
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 203.73.175.237
※ 編輯: sk1765 來自: 203.73.175.237 (01/29 15:36)
1F：→ TonyQ:給解法之前自己先稍微測過是基本禮貌吧...根本就不對啊... 01/29 18:57
2F：推 s25g5d4:被打臉 01/29 19:01
3F：→ sk1765:沒裝jQuery 沒法測 不過我也想了解jQuery如何移除行內註冊 01/29 19:23
4F：→ TonyQ:就算不是jQuery ，你inline的部份也不對啊... 01/29 20:08
6F：→ TonyQ:可以用這個測。 01/29 20:09
7F：→ TonyQ:要我個人的建議的話我會建議不要用inline，因為讓html變複雜 01/29 20:10
8F：→ TonyQ:又不直覺，直接用js binding 在外部實際一些。 01/29 20:10
9F：→ TonyQ:還有另外在這例子我看不出你舉closure 的影響在哪裡.. 01/29 20:11
10F：→ TonyQ:我只是覺得今天喚作你是發問的人，心血來潮看到一大篇回復好 01/29 20:11
11F：→ sk1765:請問是指哪個 inline我測過阿 我的程式碼沒問題阿 01/29 20:12
12F：→ TonyQ:像講的很有道理，結果裡面的解沒一個對的...這感覺不太好Orz 01/29 20:12
13F：→ TonyQ:onclick="document.getElementById('id1').onclick= 01/29 20:14
14F：→ TonyQ:alert('334455');" 01/29 20:14
15F：→ TonyQ:最好是這樣會對啦... 01/29 20:15
16F：→ TonyQ:至少我的firefox/ie8/chrome都在跟我complain這樣是錯的。 01/29 20:15
18F：→ sk1765:我還是沒看出來你的意思 照你的連結連過去測試都正常阿 01/29 20:21
19F：→ TonyQ:好吧，我說的清楚一點。你的 set new onclick 這樣寫， 01/29 20:22
20F：→ sk1765:我用ie8 ff都正常阿 到底是指哪裏阿 01/29 20:22
21F：→ TonyQ:會在click時就直接觸發alert in ie8,fx,chrome. 01/29 20:23
22F：→ TonyQ:而不是assign 給id1 ... 01/29 20:23
23F：→ sk1765:恩 我想一下 我看出來了 01/29 20:26
24F：→ TonyQ:我有點久沒寫這種作法了，不過在這裡可能還是包個fn保險。 01/29 20:28
25F：→ sk1765:恩 沒錯 所以onclick後面不能直接用alert 01/29 20:31
26F：→ sk1765:我修改一下 順便測一下jquery 理論部分應該沒錯阿 01/29 20:32
27F：→ TonyQ:jQuery的部份是要寫成 $("#id1")[0] 如果你想拿dom object 01/29 20:36
28F：→ TonyQ:的話。 至於 jQuery unbind 我剛測過應該是看不掉原生事件 01/29 20:37
29F：→ TonyQ:$("#id1") 是jQuery context， 不是原生dom物件。 01/29 20:38
30F：→ sk1765:真是納悶 為什麼alert不能直接寫在=後面不是也是function 01/29 20:38
31F：→ TonyQ: *幹不掉 01/29 20:38
32F：→ TonyQ:如果你只要用 fn 的assign 的話，是可以寫 01/29 20:38
33F：→ TonyQ:.onclick=alert; 01/29 20:39
34F：→ TonyQ:這樣沒有 invoke 他的描述就會過，但是你就不能夾參數。 01/29 20:39
35F：→ TonyQ:所以在我們的這個範例沒有意義。這是常見faq之一。 01/29 20:40
36F：→ sk1765:對 要寫成 $("#id1")[0] 或 $("#id1").get(0) 剛看到 01/29 20:41
37F：→ TonyQ:當你寫了 alert("hi") 這是一個觸發他的描述，不是一個定義 01/29 20:41
38F：→ sk1765:恩 反正onclick後面是傳 指標的意思 不能執行 01/29 20:43
39F：→ sk1765:了解了 感謝 我把文章修正一下 01/29 20:44
40F：→ TonyQ:要解釋成 function object 是指標也是ok啦...XD 01/29 20:45
41F：→ sk1765:closure在這個inline的例子不好解釋 我決定整段拿掉 01/29 22:27
42F：→ sk1765:感謝 TonyQ大的指正 01/29 22:28
※ 編輯: sk1765 來自: 61.59.10.91 (01/30 11:21)