Javascript不響應元素點擊？

Question

這是有問題的代碼：

       ...     
        var btnClick = document.getElementById("button");
        btnClick .addEventListener("click", func, false);
    }
    function func()
    {
        alert("This works");
    }

我沒有任何警報框。 看到任何問題嗎？

Answer 1

您正在使用哪個瀏覽器？ IE在版本9之前不支持.addEventListener() ，因此您需要這樣說：

var btnClick = document.getElementById("button");

if (btnClick.addEventListener){
  btnClick.addEventListener('click', func, false); 
} else if (btnClick.attachEvent){
  btnClick.attachEvent('onclick', func);
}
// and if you're really keen:
else {
  btnClick.onclick = func;
}

並且不要在尚未解析的元素上使用.getElementById() ，即，將以上代碼放入document.ready或load事件處理程序中，或將其放在頁面源中的元素之后。

Answer 2

如果您執行以下所有操作，則可以使用：

1. 等待文檔加載，然后再嘗試安裝事件偵聽器。 您可以在window.onload處理程序中運行此代碼，也可以將javascript初始化代碼放在正文的末尾。 您可以通過查看btnClick有效還是無效來驗證此方法是否有效。
2. 僅在支持addEventListener較新瀏覽器中運行此代碼（舊版本的IE不支持該代碼）。
3. 確保頁面中只有id="button"一個元素。
4. 確保頁面中沒有JavaScript錯誤，導致腳本停止運行。
5. 刪除后的空間btnClick前.addEventListener 。

您可以在這里看到它的工作： http : //jsfiddle.net/jfriend00/HQ24Z/

Answer 3

這是因為您尚未初始化它的原因。

window.onload = prepareButton;

function prepareButton()
{
    document.getElementById('button').onclick = function()
    {
        alert('you clicked me!');
    }
}

Answer 4

切勿使用諸如“按鈕”之類的非常籠統的術語，因為它們往往會被保留，如果您絕對確定它會起作用，則最終會把頭發扯掉。 對id屬性使用描述性值，例如“ form_4_button_submit”。

也是如何進行跨瀏覽器事件處理的示例...

if (window.addEventListener) {document.addEventListener('keydown',keyPressed,false);}
else {document.attachEvent('onkeydown',keyPressed);}

function keyPressed(evt)
{
 var e = evt || event;
 var key = e.which || e.keyCode;

 switch (key)
 {
  case 77:// M
  alert('m key pressed');
  break;

  case 76://L
  alert('L key pressed');
  break;
 }
}