54

我敢肯定那里有一百万个关于此的帖子，但令人惊讶的是，我很难找到一些东西。

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

当我运行它时，我立即得到一个“foo”警报框，我希望只有在单击链接时才会收到警报。

我做错了什么愚蠢的事情？（我试过 click= 和 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应该被删除），但我强烈反对任何人直接在他们的代码中使用 'document.getElementById(...) -而是使用jQuery .

4

11 回答 11

73

尝试：

document.getElementById("foo").onclick = function (){alert('foo');};
于 2008-10-30T02:06:55.467 回答
36

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

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

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

跨浏览器（内）兼容性对任何人来说都是一个正确的问题——更不用说刚刚开始的人了。

于 2008-10-30T02:10:47.733 回答
23

jQuery：

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

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

$('#foo').click(function() { alert('foo'); return false; });
于 2008-10-30T02:10:13.603 回答
13

前几天我或多或少地尝试了所有其他解决方案，但在我尝试了这个之前，它们都不适合我：

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

据我所知，它工作得很好。

于 2009-12-23T14:59:20.833 回答
11

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

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

如果你不需要从这个函数传递信息，它只是：

document.getElementById("space1").onclick = new Function("lrgWithInfo('13')");
于 2011-05-07T12:10:00.740 回答
5

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

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

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

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

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

无论您是否想使用 jQuery 或不使用它，您都需要澄清它。

有 3 种基本方式声明函数：

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：权威指南，第 6 版>>，O'Reilly。

于 2013-01-15T08:28:02.650 回答
2

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

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

或在 jQuery 中：

$('#foo').click(function(event) { alert('foo'); }
于 2008-10-30T07:37:12.287 回答
1

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

<script>
  YAHOO.util.Event.onDOMReady(function() {   
    document.getElementById("foo").onclick =  function (){alert('foo');};
  });
</script>
于 2009-04-07T04:41:00.553 回答
0

上面的 YUI 示例应该是：

<script>
  YAHOO.util.Event.onDOMReady(function() {   
     Dom.get("foo").onclick =  function (){alert('foo');};
  });
</script>
于 2010-03-16T11:40:43.653 回答
0

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

例如，如果您正在切换的事件是 hide() 和 unHide()，并且单击一个将单击事件切换到另一个，您将最终进入一个连续循环。更好的方法是这样做：

$(element).unbind().bind( 'click' , function(){ alert('!') } );
于 2012-04-04T21:38:51.107 回答
0

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

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

看到这个问题。

于 2012-05-24T19:51:45.130 回答