如何用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，构建一个新的 div，它通过调用 document.body.appendChild 附加到页面。 此链接是新 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

如果您使用 JavaScript 执行此操作，则使用addEventListener()和addEventListener('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 3

正如大卫所说，您可以使用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 4

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

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

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

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