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

我无法重现这个问题。与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 2

正如David所说，你可以添加一个带有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');
   });
}

Answer 3

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

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

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

Answer 4

如果你愿意，可以这样使用：

<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>

Answer 5

如果您使用 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);
});

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

如何使用javascript设置onclick？

5 个答案: