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() 的元素上使用 .getElementById()尚未被解析，即，将上述代码放在 document.ready 或 load 事件处理程序中，或者将其放在页面源中的元素之后。

Answer 2

这是因为你没有初始化它......!!!

window.onload = prepareButton;

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

Answer 3

如果执行以下所有操作，这将起作用：

1. 在尝试安装事件侦听器之前等待文档加载。您可以在 window.onload 处理程序中运行此代码，也可以将 javascript 初始化代码放在正文的末尾。您可以通过查看 btnClick 是否有效或为空来验证这是否有效。
2. 仅在支持 addEventListener 的较新浏览器中运行此代码（旧版本的 IE 不支持）。
3. 确保页面中只有一个带有 id="button" 的元素。
4. 确保页面中不存在导致脚本停止运行的 JavaScript 错误。
5. 删除 .addEventListener 之前 btnClick 后面的空格。

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

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