作者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)