如何使用javascript设置onclick？

Question

我正在尝试使用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可能尚未完全构建.此时页面已加载,用户单击按钮.该按钮执行javascript,通过调用document.body.appendChild构建一个新的div,它附加到页面.此链接是新div的成员.如果这是我的问题,我该如何解决？

Answer 1

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

完整工作 JSBin 演示。

StackOverflow 演示...

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

<a href="#" id="my-link">Link</a>

Answer 2

我一直无法重现这个问题.与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似乎不喜欢它:-(

Answer 3

正如 David 所说，您可以使用 添加 DOM 偶数侦听器addEventListener(...)。我已经包含了attachEvent与 IE 的兼容性。

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');
   });
}