blocks|key|357983|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|357984|document.getElementById("foo").onclick+=+function+(){alert('foo');};|code-block|syntax|javascript|357985|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try:

<pre><code>document.getElementById("foo").onclick = function (){alert('foo');};
</code></pre>

blocks|key|3358050|text|jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358051|$('#foo').click(function()+{+alert('foo');+});|code-block|syntax|javascript|3358052|或者，如果您不希望它跟随链接href：|3358053|$('#foo').click(function()+{+alert('foo');+return+false;+});|3358054|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

jQuery:

<pre><code>$('#foo').click(function() { alert('foo'); });
</code></pre>

Or if you don't want it to follow the link href:

<pre><code>$('#foo').click(function() { alert('foo'); return false; });
</code></pre>

blocks|key|361372|text|使用.onclick+(全部小写)。如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|361373|document.getElementById("foo").onclick+=+function+()+{
++alert('foo');+//+do+your+stuff
++return+false;+//+<--+to+suppress+the+default+link+behaviour
};|code-block|syntax|javascript|361374|实际上，你可能会发现自己最好使用一些好的库(我推荐jQuery有几个原因)来启动和运行，并编写干净的javascript。|361375|跨浏览器(In)兼容性对于任何人来说都是一个很难处理的地狱--更不用说那些刚刚起步的人了。|361376|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jquery.com/^0|2|8|0|0|P|6|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Use <code>.onclick</code> (all lowercase). Like so:

<pre><code>document.getElementById("foo").onclick = function () {
 alert('foo'); // do your stuff
 return false; // &lt;-- to suppress the default link behaviour
};
</code></pre>

Actually, you'll probably find yourself way better off using some good library (I recommend <a href="http://www.jquery.com/" rel="noreferrer">jQuery</a> for several reasons) to get you up and running, and writing clean javascript.

Cross-browser (in)compatibilities are a right hell to deal with for anyone - let alone someone who's just starting.

blocks|key|3358193|text|我同意使用jQuery是最好的选择。您还应该避免使用body的onload函数，而使用jQuery的ready函数。至于事件监听器，它们应该是只接受一个参数的函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358194|document.getElementById("foo").onclick+=+function+(event){alert('foo');};|code-block|syntax|javascript|3358195|或者在jQuery中：|3358196|$('#foo').click(function(event)+{+alert('foo');+}|3358197|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I agree that using jQuery is the best option. You should also avoid using body's onload function and use jQuery's ready function instead. As for the event listeners, they should be functions that take one argument:

<pre><code>document.getElementById("foo").onclick = function (event){alert('foo');};
</code></pre>

or in jQuery:

<pre><code>$('#foo').click(function(event) { alert('foo'); }
</code></pre>

blocks|key|358052|text|这是与上面的jQuery帖子对应的YUI。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358053|<script>
++YAHOO.util.Event.onDOMReady(function()+{+++
++++document.getElementById("foo").onclick+=++function+(){alert('foo');};
++});
</script>|code-block|syntax|javascript|358054|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is the YUI counterpart to the jQuery posts above.

<pre><code>&lt;script&gt;
 YAHOO.util.Event.onDOMReady(function() { 
 document.getElementById("foo").onclick = function (){alert('foo');};
 });
&lt;/script&gt;
</code></pre>

blocks|key|3145533|text|前几天我或多或少地尝试了所有其他的解决方案，但在我尝试这个解决方案之前，它们都不起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145534|var+submitButton+=+document.getElementById('submitButton');
submitButton.setAttribute('onclick',++'alert("hello");');|code-block|syntax|javascript|3145535|据我所知，它工作得很好。|3145536|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I tried more or less all of the other solutions the other day, but none of them worked for me until I tried this one:

<pre><code>var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick', 'alert("hello");');
</code></pre>

As far as I can tell, it works perfectly.

blocks|key|3358247|text|上面的YUI示例应该是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3358248|<script>
++YAHOO.util.Event.onDOMReady(function()+{+++
+++++Dom.get("foo").onclick+=++function+(){alert('foo');};
++});
</script>|code-block|syntax|javascript|3358249|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The YUI example above should really be:

<pre><code>&lt;script&gt;
 YAHOO.util.Event.onDOMReady(function() { 
 Dom.get("foo").onclick = function (){alert('foo');};
 });
&lt;/script&gt;
</code></pre>

blocks|key|3145576|text|如果你想从当前函数中传递变量，另一种方法是，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3145577|document.getElementById("space1").onclick+=+new+Function("lrgWithInfo('"%2BmyVar%2B"')");|code-block|syntax|javascript|3145578|如果您不需要从此函数传递信息，则只需：|3145579|document.getElementById("space1").onclick+=+new+Function("lrgWithInfo('13')");|3145580|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you want to pass variables from the current function, another way to do this is, for example:

<pre><code>document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");
</code></pre>

If you don't need to pass information from this function, it's just:

<pre><code>document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
</code></pre>

blocks|key|356795|text|我认为您应该使用jQuery的.bind和.unBind方法。在我的测试中，使用.click和.onclick更改单击事件实际上调用了新分配的事件，导致了一个永无止境的循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|356796|例如，如果要在hide()和unHide()之间切换的事件是hide()和unHide()，并且单击其中一个事件会将单击事件切换到另一个事件，则会导致连续循环。更好的方法是这样做：|356797|$(element).unbind().bind(+'click'+,+function(){+alert('!')+}+);+|code-block|syntax|javascript|356798|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/bind/|1|http://api.jquery.com/unbind/^0|F|5|0|L|7|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

I think you want to use jQuery's <a href="http://api.jquery.com/bind/" rel="nofollow">.bind</a> and <a href="http://api.jquery.com/unbind/" rel="nofollow">.unBind</a> methods. In my testing, changing the click event using .click and .onclick actually called the newly assigned event, resulting in a never-ending loop. 

For example, if the events you are toggling between are hide() and unHide(), and clicking one switches the click event to the other, you would end up in a continuous loop. A better way would be to do this:

<pre><code>$(element).unbind().bind( 'click' , function(){ alert('!') } ); 
</code></pre>

blocks|key|356804|text|没有人解决正在发生的实际问题，解释为什么发出警报。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|356805|这段代码：document.getElementById("foo").click+=+new+function()+{+alert('foo');+};将#foo元素的click属性分配给一个空对象。这里的匿名函数用于初始化对象。我喜欢把这种类型的函数看作是一个构造函数。您将警报放在其中，这样它就会被调用，因为函数会立即被调用。|offset|length|style|CODE|356806|参见this+question。|356807|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2274695/new-function-with-lower-case-f-in-javascript^0|0|5|20|26|4|0|2|D|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

Nobody addressed the actual problem which was happening, to explain why the alert was issued. 

This code: <code>document.getElementById("foo").click = new function() { alert('foo'); };</code> assigns the click property of the <code>#foo</code> element to an empty object. The anonymous function in here is meant to initialize the object. I like to think of this type of function as a constructor. You put the alert in there, so it gets called because the function gets called immediately. 

See <a href="https://stackoverflow.com/questions/2274695/new-function-with-lower-case-f-in-javascript">this question</a>.

blocks|key|358988|text|天哪..。这不仅仅是"jQuery库“和"getElementById”的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358989|当然，jQuery可以帮助我们把跨浏览器的问题放在一边，但是如果你真的足够了解JavaScript，使用没有库的传统方法仍然可以很好地工作！|358990|@MárÖrlygsson和@Darryl+Hein都给了你很好的altarnatives+(我想说，他们只是祭坛人，而不是anwsers)，前者使用传统方式，后者使用jQuery方式。但是你真的知道你的问题的答案吗？你的代码出了什么问题？|358991|首先，.click是一种jQuery方式。如果您想使用传统的方式，请改用.onclick。或者，我建议您集中精力只学习使用jQuery，以防混淆。在对DOM了解不多的情况下，jQuery是一个很好的工具。|offset|length|style|CODE|358992|第二个问题，也是关键问题，new+function(){}是一个非常糟糕的语法，或者说它是一个错误的语法。|358993|无论你是想使用jQuery还是不使用它，你都需要澄清这一点。|358994|声明函数有3种基本方式：|358995|function+name+()+{code}

...+=+function()+{code}+//+known+as+anonymous+function+or+function+literal

...+=+new+Function("code")+//+Function+Object|code-block|syntax|javascript|358996|请注意，javascript是case-sensitive，，所以new+function()不是javascript的标准语法。浏览器可能会误解它的含义。|BOLD|358997|因此，可以使用第二种方法修改代码，如下所示|358998|+=+function(){alert();}|358999|或者使用第三种方法，如|359000|+=+new+Function("alert();");|359001|详细地讲，第二种方法与第三种方法的工作原理几乎相同，并且第二种方法非常常见，而第三种方法则很少见。你的两个最好的答案都使用第二种方法。|359002|然而，由于“运行时”和“编译时”的原因，第三种方法可以做第二种方法不能做的事情。我只希望你知道new+Function()有时候是有用的。如果有一天你在使用function(){}时遇到问题，别忘了new+Function()。|359003|要了解更多信息，建议您阅读O‘’Reilly的<<+JavaScript:+The+Definitive+Guide，第6版>>。|359004|entityMap^0|0|0|0|3|6|0|D|G|0|0|0|0|F|E|X|E|0|0|0|0|0|0|1B|E|26|C|2R|E|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1G|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1I|8|@$H|1J|I|1K|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1L|8|@$H|1M|I|1N|J|K]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1O|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1P|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1Q|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1R|8|@$H|1S|I|1T|J|Y]|$H|1U|I|1V|J|K]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1W|8|@]|9|@]|A|$]]|$1|11|3|12|5|T|7|1X|8|@]|9|@]|A|$U|V]]|$1|13|3|14|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|15|3|16|5|T|7|1Z|8|@]|9|@]|A|$U|V]]|$1|17|3|18|5|6|7|20|8|@]|9|@]|A|$]]|$1|19|3|1A|5|6|7|21|8|@$H|22|I|23|J|K]|$H|24|I|25|J|K]|$H|26|I|27|J|K]]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|28|8|@]|9|@]|A|$]]|$1|1D|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|1E|$]]

OMG... It's not only a problem of "jQuery Library" and "getElementById".

Sure, jQuery helps us to put cross-browser problems aside, but using the traditional way without libraries can still work well, if you really understand JavaScript ENOUGH!!!

Both @Már Örlygsson and @Darryl Hein gave you good ALTARNATIVES(I'd say, they're just altarnatives, not anwsers), where the former used the traditional way, and the latter jQuery way. But do you really know the answer to your problem? What is wrong with your code?

First, <code>.click</code> is a jQuery way. If you want to use traditional way, use .onclick instead. Or I recommend you concentrating on learning to use jQuery only, in case of confusing. jQuery is a good tool to use without knowing DOM enough.

The second problem, also the critical one, <code>new function(){}</code> is a very bad syntax, or say it is a wrong syntax.

No matter whether you want to go with jQuery or without it, you need to clarify it.

There are 3 basic ways declaring function:

<pre><code>function name () {code}

... = function() {code} // known as anonymous function or function literal

... = new Function("code") // Function Object
</code></pre>

Note that javascript is case-sensitive, so <code>new function()</code> is not a standard syntax of javascript. Browsers may misunderstand the meaning.

Thus your code can be modified using the second way as

<pre><code> = function(){alert();}
</code></pre>

Or using the third way as

<pre><code> = new Function("alert();");
</code></pre>

Elaborating on it, the second way works almost the same as the third way, and the second way is very common, while the third is rare. Both of your best answers use the second way.

However, the third way can do something that the second can't do, because of "runtime" and "compile time". I just hope you know <code>new Function()</code> can be useful sometimes. One day you meet problems using <code>function(){}</code>, don't forget <code>new Function()</code>.

To understand more, you are recommended read &lt;&lt; JavaScript: The Definitive Guide, 6th Edition >>, O'Reilly.

I'm sure there are a million posts about this out there, but surprisingly I'm having trouble finding something. 

I have a simple script where I want to set the onClick handler for an <code>&lt;A&gt;</code> link on initialization of the page.

When I run this I immediately get a 'foo' alert box where I expected to only get an alert when I click on the link.

What stupid thing am I doing wrong? (I've tried click= and onClick=)...

<pre><code>&lt;script language="javascript"&gt;

 function init(){

 document.getElementById("foo").click = new function() { alert('foo'); };
 }

&lt;/script&gt;

&lt;body onload="init()"&gt;
 &lt;a id="foo" href=#&gt;Click to run foo&lt;/a&gt;
&lt;/body&gt;
</code></pre>

<hr>

Edit: I changed my accepted answer to a jQuery answer. The answer by '<a href="https://stackoverflow.com/questions/249074/how-to-change-onclick-handler-dynamically/249093#249093">Már Örlygsson</a>' is technically the correct answer to my original question (<code>click</code> should be <code>onclick</code> and <code>new</code> should be removed) but I strongly discourage anyone from using 'document.getElementById(...) directly in their code - and to use <a href="http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery" rel="noreferrer">jQuery</a> instead.

How to change onClick handler dynamically?

jQuery

我敢肯定有一百万篇关于这方面的帖子，但令人惊讶的是，我很难找到一些东西。我有一个简单的脚本，我希望在页面初始化时为<A>链接设置onClick处理程序。当我运行这个命令时，我立即得到一个'foo‘警告框，我期望在我点击这个链接时只会得到一个警告。我做错了什么愚蠢的事？(我已经尝试过click=和onClick=)......

问如何动态更改onClick处理程序？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态更改onClick处理程序？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何动态更改onClick处理程序？
EN