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

如果您执行以下所有操作，则可以使用：

在尝试安装事件侦听器之前等待文档加载。您可以在window.onload处理程序中运行此代码，也可以将javascript初始化代码放在正文的末尾。您可以通过查看btnClick是有效还是无效来验证这是否有效。
仅在支持addEventListener的较新浏览器中运行此代码（旧版本的IE不支持此功能）。
确保页面中只有一个元素id="button"。
确保页面中没有javascript错误导致脚本停止运行。
删除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;
 }
}

Javascript没有响应元素点击？

4 个答案: