Re: [問題] jquery attr onclick IE7 & 8

[sk1765 (鼎玉鉉)]

※ 引述《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)
→ TonyQ:給解法之前自己先稍微測過是基本禮貌吧...根本就不對啊...
推 s25g5d4:被打臉
→ sk1765:沒裝jQuery 沒法測 不過我也想了解jQuery如何移除行內註冊
→ TonyQ:就算不是jQuery ，你inline的部份也不對啊...
→ TonyQ:http://jsfiddle.net/6n4sr/
→ TonyQ:可以用這個測。
→ TonyQ:要我個人的建議的話我會建議不要用inline，因為讓html變複雜
→ TonyQ:又不直覺，直接用js binding 在外部實際一些。
→ TonyQ:還有另外在這例子我看不出你舉closure 的影響在哪裡..
→ TonyQ:我只是覺得今天喚作你是發問的人，心血來潮看到一大篇回復好
→ sk1765:請問是指哪個 inline我測過阿 我的程式碼沒問題阿
→ TonyQ:像講的很有道理，結果裡面的解沒一個對的...這感覺不太好Orz
→ TonyQ:onclick="document.getElementById('id1').onclick=
→ TonyQ:alert('334455');"
→ TonyQ:最好是這樣會對啦...
→ TonyQ:至少我的firefox/ie8/chrome都在跟我complain這樣是錯的。
→ TonyQ:test case here http://jsfiddle.net/6n4sr/1/
→ sk1765:我還是沒看出來你的意思 照你的連結連過去測試都正常阿
→ TonyQ:好吧，我說的清楚一點。你的 set new onclick 這樣寫，
→ sk1765:我用ie8 ff都正常阿 到底是指哪裏阿
→ TonyQ:會在click時就直接觸發alert in ie8,fx,chrome.
→ TonyQ:而不是assign 給id1 ...
→ sk1765:恩 我想一下 我看出來了
→ TonyQ:我有點久沒寫這種作法了，不過在這裡可能還是包個fn保險。
→ sk1765:恩 沒錯 所以onclick後面不能直接用alert
→ sk1765:我修改一下 順便測一下jquery 理論部分應該沒錯阿
→ TonyQ:jQuery的部份是要寫成 $("#id1")[0] 如果你想拿dom object
→ TonyQ:的話。 至於 jQuery unbind 我剛測過應該是看不掉原生事件
→ TonyQ:$("#id1") 是jQuery context， 不是原生dom物件。
→ sk1765:真是納悶 為什麼alert不能直接寫在=後面不是也是function
→ TonyQ:                                       *幹不掉
→ TonyQ:如果你只要用 fn 的assign 的話，是可以寫
→ TonyQ:.onclick=alert;
→ TonyQ:這樣沒有 invoke 他的描述就會過，但是你就不能夾參數。
→ TonyQ:所以在我們的這個範例沒有意義。這是常見faq之一。
→ sk1765:對 要寫成 $("#id1")[0] 或 $("#id1").get(0) 剛看到
→ TonyQ:當你寫了 alert("hi") 這是一個觸發他的描述，不是一個定義
→ sk1765:恩 反正onclick後面是傳 指標的意思 不能執行
→ sk1765:了解了 感謝 我把文章修正一下
→ TonyQ:要解釋成 function object 是指標也是ok啦...XD
→ sk1765:closure在這個inline的例子不好解釋 我決定整段拿掉
→ sk1765:感謝 TonyQ大的指正
※ 編輯: sk1765          來自: 61.59.10.91          (01/30 11:21)