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

我确信那里有一百万个帖子,但令人惊讶的是我找不到东西.

我有一个简单的脚本,我想在页面初始化时为链接设置onClick处理程序.

当我运行这个时,我立即得到一个'foo'警报框,我希望在我点击链接时才会收到警报.

我做错了什么蠢事？(我试过click =和onClick =)...

    Click to run foo

---

编辑:我改变了我对jQuery答案的接受答案.' MárÖrlygsson '的答案在技术上是我原始问题的正确答案(click应该onclick并且new应该被删除)但我强烈反对任何人直接在他们的代码中使用'document.getElementById(...) - 而是使用jQuery代替.

1> CMS..：

---

尝试:

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

---

从什么时候开始知道纯粹的javascript过时了.

---

我没有意识到new会在init页面上调用该函数.很高兴知道.

---

我肯定不再使用任何getElementbyId的东西了.在我过去一年的javascript体验中走了一段路.绝对推荐jQuery - 或其他一些这样的框架.getElementById现在已经过时了.请参阅下面的@darryl的答案

2> Már Örlygsso..：

---

使用.onclick(全部小写).像这样:

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

实际上,你可能会发现自己更好地使用一些好的库(我推荐jQuery有几个原因)让你启动并运行,并编写干净的javascript.

跨浏览器(in)兼容性对任何人来说都是一个正确的地狱 - 更不用说刚开始的人了.

---

'回归虚假;' 恕我直言,是一个重要的补充.

3> Darryl Hein..：

---

jQuery的:

$('#foo').click(function() { alert('foo'); });

或者,如果您不希望它遵循链接href:

$('#foo').click(function() { alert('foo'); return false; });

---

这不仅仅是链接,而是调用它.$('#foo').onclick =是这样做的好方法.

---

您应该使用preventDefault()来停止链接的默认操作而不是返回false,因为return false也会停止传播(当在jQuery中使用时).$('#foo').click(function(e){e. preventDefault(); alert('foo');}); [更多信息](http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false)

---

如果你不想要多次事件堆叠,请务必首先执行$('#foo').unbind().

4> 小智..：

---

前几天我或多或少尝试了所有其他解决方案,但在我尝试这个解决方案之前,它们都没有为我工作:

var submitButton = document.getElementById('submitButton');
submitButton.setAttribute('onclick',  'alert("hello");');

据我所知,它完美无缺.

5> yuttadhammo..：

---

如果要从当前函数传递变量,另一种方法是,例如:

document.getElementById("space1").onclick = new Function("lrgWithInfo('"+myVar+"')");

如果您不需要从此函数传递信息,它只是:

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");

6> Eric..：

---

OMG ......这不仅是"jQuery Library"和"getElementById"的问题.

当然,jQuery帮助我们将跨浏览器问题放在一边,但如果你真的理解JavaScript,那么使用没有库的传统方式仍然可以很好地工作!

@MárÖrlygsson和@Darryl Hein都给了你很好的ALTARNATIVES(我会说,他们只是altarnatives,而不是anwsers),前者使用传统方式,后者使用jQuery方式.但你真的知道你的问题的答案吗？您的代码有什么问题？

首先,.click是一种jQuery方式.如果您想使用传统方式,请改用.onclick.或者我建议你专注于学习只使用jQuery,以免造成混淆.jQuery是一个很好的工具,可以在不了解DOM的情况下使用它.

第二个问题,也是关键问题,new function(){}是一个非常糟糕的语法,或者说它是一个错误的语法.

无论你是想使用jQuery还是不使用它,你都需要澄清它.

声明功能有三种基本方式:

function name () {code}

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

... = new Function("code") // Function Object

请注意,javascript 区分大小写,因此new function()不是javascript的标准语法.浏览器可能会误解其含义.

因此,您的代码可以使用第二种方式进行修改

 = function(){alert();}

或者使用第三种方式

 = new Function("alert();");

详细说明,第二种方式与第三种方式几乎相同,第二种方式非常常见,而第三种方式很少见.您的两个最佳答案都使用第二种方式.

但是,由于"运行时"和"编译时间",第三种方式可以做第二种方法无法做到的事情.我希望你知道new Function()有时候会很有用.有一天你遇到问题使用function(){},别忘了new Function().

要了解更多信息,建议您阅读<< JavaScript:The Definitive Guide,第6版>>,O'Reilly.