如何使用 JavaScript 设置 onClick？答案

【问题标题】：How to set onClick with JavaScript?如何使用 JavaScript 设置 onClick？
【发布时间】：2012-11-30 00:16:21
【问题描述】：

我正在尝试使用 javascript 设置 onclick 事件。以下代码有效：

var link = document.createElement('a');
link.setAttribute('href', "#");
link.setAttribute('onclick', "alert('click')");

然后我使用 appendChild 将链接添加到文档的其余部分。

但我显然想要一个比警报更复杂的回调，所以我尝试了这个：

link.onclick = function() {alert('clicked');};

还有这个：

link.onclick = (function() {alert('clicked');});

但这无济于事。当我单击链接时，没有任何反应。我使用 chrome 进行了测试，浏览 DOM 对象显示该元素的 onclick 属性为 NULL。

为什么我不能将函数传递给 onclick？

编辑：

我尝试使用下面建议的 addEventListener 并获得相同的结果。链接的 DOM 将 onclick 显示为 null。

我的问题可能是该元素的 DOM 可能尚未完全构建。此时页面已经加载完毕，用户点击了一个按钮。该按钮执行构建一个新 div 的 javascript，它通过调用 document.body.appendChild 将其附加到页面。此链接是新 div 的成员。如果这是我的问题，我该如何解决？

【问题讨论】：

试试addEventListener('click', function() {...})
我实际上最终写了an article 关于这个。
link.onclick = function () { ... }; 应该可以工作：jsfiddle.net/sZHkt/1
对我有用，不知道这里有什么问题。
在您的文章中，您提到要小心确保 DOM 已准备好进行操作。也许我的问题是我试图设置 onclick 太快了？我正在构建一个完整的 div 并在页面加载后将其附加到页面。因此页面加载，用户单击一个运行 javascript 的按钮，该按钮创建一个 div，其中包含我的链接。在设置 onclick 之前，我是否需要做一些事情来确保链接已建立？

标签： javascript

【解决方案1】：

我无法重现该问题。与 OP 的发现相反，以下行在最新版本的 IE、FF、Opera、Chrome 和 Safari 上运行良好。

link.onclick = function() {alert('clicked');};

您可以访问这个 jsFiddle 在您自己的浏览器上进行测试：

http://jsfiddle.net/6MjgB/7/

假设我们在 html 页面中有这个：

<div id="x"></div>

以下代码在我尝试过的浏览器上运行良好：

var link = document.createElement('a');
link.appendChild(document.createTextNode("Hi"));
link.setAttribute('href', "#");
link.onclick= function() {link.appendChild(document.createTextNode("Clicked"));}

document.getElementById("x").appendChild(link);

如果存在浏览器兼容性问题，使用 jQuery 应该可以解决它并使代码更加简洁：

var $link = $("<a>").html("Hi").attr("href","#").click(function (){$link.html("Clicked")})

$("#x").html($link)

如果简洁不是使用 jQuery 的有力论据，浏览器兼容性应该是……反之亦然:-)

注意：我没有在代码中使用 alert() 因为 jsFiddle 似乎不喜欢它:-(

【讨论】：

我不知道为什么它以前不起作用，但 jquery 代码似乎神奇地修复了任何错误。
jsfiddle 不允许警报，因为有人可以轻松制作像 while(true) alert("gotcha sucka") 这样的小提琴，我认为我不需要解释为什么这是一个问题
@Werlious 我可能会感到困惑，但为什么会出现问题？ JSfiddle 在客户端运行沙盒代码，对吧？
是的，假设我和你分享一个小提琴。直到你打开它你才会知道，但小提琴中的 JS 是while(true) alert("harhar")。您打开小提琴看看它是什么，当 jsfiddle 加载小提琴时，它还会生成运行 js 的预览，现在您的计算机正在向您发送垃圾邮件警报，通常会降低您的浏览器/计算机的速度，而不是您可以做出反应.现在你已经被DOSed了。将其替换为说舞台恐惧时代的 android 上的受感染图像，现在您遇到了一些真正的问题

【解决方案2】：

正如大卫所说，您可以使用addEventListener(...) 添加一个 DOM 甚至监听器。为了与 IE 兼容，我已包含 attachEvent。

var link = document.createElement('a');
link.setAttribute('href', "#");
if(link.addEventListener){
   link.addEventListener('click', function(){
      alert('clicked');
   });
}else if(link.attachEvent){
   link.attachEvent('onclick', function(){
      alert('clicked');
   });
}

【讨论】：

【解决方案3】：

如果您使用 JavaScript 执行此操作，则使用 addEventListener() 和 addEventListener('click', function(e) {...}) 将事件存储为 e。如果你不传递这样的事件，它将无法访问（尽管 Chrome 看起来很聪明，可以解决这个问题，但并非所有浏览器都是 Chrome）。

Full Working JSBin Demo.

StackOverflow 演示...

document.getElementById('my-link').addEventListener('click', function(e) {
  console.log('Click happened for: ' + e.target.id);
});

&lt;a href="#" id="my-link"&gt;Link&lt;/a&gt;

【讨论】：

【解决方案4】：

设置属性看起来不正确。最简单的方法就是这样：

link.onclick = function() {
    alert('click');
};

但是按照 JCOC611 的建议使用 addEventListener 更加灵活，因为它允许您将多个事件处理程序绑定到同一个元素。请记住，您可能需要回退到 attachEvent 以与旧 Internet Explorer 版本兼容。

【讨论】：

【解决方案5】：

如果你喜欢，可以这样使用：

<button id="myBtn">Try it</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};

function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>

【讨论】：