如何用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>