Question

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

我有一个简单的脚本，我想在页面初始化时为<A>链接设置onClick处理程序。

当我运行此功能时，我立即获取一个'foo'警告框，我希望在我点击链接时才会收到提醒。

我做错了什么蠢事？（我尝试过click = and onClick =）...

<script language="javascript">

    function init(){

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

</script>

<body onload="init()">
    <a id="foo" href=#>Click to run foo</a>
</body>

编辑：我将接受的答案更改为jQuery答案。 “Már Örlygsson”的答案在技术上是我原始问题的正确答案（click应该onclick并且new应该删除）但我强烈反对< / strong>任何人直接在他们的代码中使用'document.getElementById（...） - 而是使用jQuery代替。

Answer 1

尝试：

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

Answer 2

使用.onclick（全部小写）。像这样：

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

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

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

Answer 3

jQuery的：

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

或者，如果您不希望它遵循链接href：

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

Answer 4

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

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

据我所知，它完美无缺。

Answer 5

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

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

如果您不需要传递此功能的信息，那就是：

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

Answer 6

OMG ......这不仅是“jQuery Library”和“getElementById”的问题。

当然，jQuery帮助我们将跨浏览器问题放在一边，但如果你真的理解JavaScript，那么使用没有库的传统方式仍然可以正常运行!!!

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

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

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

无论你是想使用jQuery还是不使用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()。

要了解更多信息，建议您阅读＆lt;＆lt; JavaScript：The Definitive Guide，第6版＆gt;＆gt;，O'Reilly。

Answer 7

我同意使用jQuery是最好的选择。您还应该避免使用body的onload函数并使用jQuery的ready函数。至于事件监听器，它们应该是带有一个参数的函数：

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

或在jQuery中：

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

Answer 8

这是上面jQuery帖子的YUI对应部分。

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

Answer 9

上面的YUI示例应该是：

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

Answer 10

我想你想使用jQuery的.bind和.unBind方法。在我的测试中，使用.click和.onclick更改click事件实际上调用了新分配的事件，从而导致永无止境的循环。

例如，如果您正在切换的事件是hide（）和unHide（），并且单击一个将click事件切换到另一个事件，则最终会出现连续循环。更好的方法是这样做：

$(element).unbind().bind( 'click' , function(){ alert('!') } );

Answer 11

没有人解决正在发生的实际问题，解释警报发出的原因。

此代码：document.getElementById("foo").click = new function() { alert('foo'); };将#foo元素的click属性指定给空对象。这里的匿名函数用于初始化对象。我喜欢将这种类型的函数视为构造函数。你把警报放在那里，所以它被调用，因为函数被立即调用。

见this question。

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

11 个答案: