屋 其實我也被打過臉 說真的出來說嘴只是想賺文章數這樣 ※ 引述《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').onclick=function(){};" value="C"> : <input type="button" onclick="$('#id1').onclick=function() { : alert('334455'); }" "value="RE"> 這裡取出來的是jQuery物件 不能直接套上.onclick屬性 很多很方便取出HTML物件的framework都會直接包成一個特定的Object 因為你不可能在HTML Node上新增如.attr()等的屬性、函式 所以jQuery就將他打包成jQuery物件 使它可以支援一堆功能 然而有時總是會遇到必須取得原始Node的情況 這時只要把它當作一個陣列 也就是jQuery把match到的所有node都存入這個陣列中 所以要取得第一項就是$(selector)[0]這樣 不過這邊稱他為陣列也不太對 應該說是物件 或說關聯陣列 javascript在這邊本來就是有著複雜的關係 jQuery本身程式碼 因為小弟才疏學淺沒有研究 所以也不知道到底是哪種 不過應該是物件沒錯... 所以這邊正確寫法是$('#id1')[0].onclick=function(){}; 如果很不幸的 match到不只一個 而且必須每個元件都要執行後面的動作 那就剛好可以呼叫jQuery內建的.each()函式 $(selector).each(function(i, obj) { ... 傳進來的obj就是原始的Node 不是jQuery物件 所以可以直接呼叫.onclick屬性 i是代表第幾項 ) : 不用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"> : 也就是直接用Javascript property映射就好啦 : 不能用W3C的方法 : 在inline event handler裏寫 匿名函式要注意會形成closure的效果 請小心使用 : <input id="btn1" type="button" onclick="document.getElementById('id1'). : onclick=function () { : alert('334455'); : }" : value="set new onclick"> 拍謝 這裡我也看不懂... : 翻回傳統註冊法就會變成 : var x = document.getElementById('btn1'); : x.onclick = function () { : document.getElementById('id1').onclick = function () { : alert('334455'); : } 其實這樣跟行內註冊沒啥差耶... 只有美醜的差別而已 正確來說應該呼叫W3C的addEventListener 然後要刪掉就要呼叫removeEventListener 當然匿名函式要怎麼刪掉是個問題 所以應該這樣寫 var obj = document.getElementById('id'), f = function () { alert('test'); }; obj.addEventListener('click', f, true);//第三個參數是要不要觸發上一層Node的事件 obj.removeEventListener('click', f, true); 範例: http://jsfiddle.net/5DgfQ/1/ 忘了說...這裡有瀏覽器相容性問題 至於是哪款..大家都知道我就不搬出來鞭了 : } : -------------------------------------------- : 另外在jQuery中使用 : $('#id1')[0].click(function(){ : alert('334455'); : }); : $('#id1')[0].bind('click', function(){ : alert('334455'); : }); 都說將元素取出陣列就不是jQuery物件了 當然無法呼叫.click()或.bind() : 這些都是利用進階模式 註冊事件 : 也就是透過addEventListener 和 attachEvent完成的 : 這兩者的第一個參數都是事件名稱繫結 事件名稱在javascript中和 : javascript property的使用又不相同 利用這兩者具有附加的效果而非取代效果 : 所以在取消時 必須用 unclick ,unbind 否則新的click只是附加動作 : 同時利用進階模式來取消 無法移除傳統註冊以及行內註冊事件 : <input type="button" id="id1" onclick="alert('001122');" value="alert"> : <input type="button" onclick="$('#id1')[0].unclick();" value="C"> //->不生效? 阿又沒有unclick可以讓你叫... 應該要用unbind jQuery API Refrence:http://api.jquery.com/unbind/ 用法差不多同上 範例: http://jsfiddle.net/5DgfQ/2/ 不過對於onclick行內註冊綁上去的function 是不能透過.unbind()去掉的 至少我剛剛試是這樣 : <input type="button" onclick="$('#id1')[0].click(function(){alert('334455');});" : value="RE"> //->無法附加event handler? : <input type="button" onclick="$('#id1')[0].click(function(){});" value="C"> : 應該是不行的 因為他是附加動作不是覆蓋動作 : 同時在jQuery中使用 $('#id1')[0].click(); 很容易讓人迷惘 : 因為在javascript中 他明明是 事件模擬(event simulation) : 但是到了Jquery中變成繫結方法 : 所以如果不傳參數 是否就是事件模擬 : 而他的事件模擬 是否有修正javascript中只對表單欄位動作的問題則不確定 : 結論 行內註冊建議還是用javascript property mapping的方式來取代原來的handler -- --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 59.116.108.169 addEventListener後面註解打錯了 應為第三個不是第二個... ※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:26) 另外說明一下為甚麼不能寫obj.onclick = f(a,b); 當瀏覽器讀取到f時他會認得他是一個function 之後接上()造成他被觸發(執行) 所以到那邊不管三七二十一都會跑一次 然後勒? onclick綁上去的將會是f(a,b)的傳回值 如果很不幸的 傳回的是null 那就是onclick沒有綁任何東西上去 一個簡單的範例就是 var f=function () { alert('test'); return function () {alert('test2');}; }; obj.onclick = f(); obj2.onclick = f; http://jsfiddle.net/5DgfQ/3/ ※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:34) ※ 編輯: s25g5d4 來自: 59.116.108.169 (01/29 22:44) 夭壽...each的參數寫反了 ※ 編輯: s25g5d4 來自: 59.116.108.169 (01/30 00:24)