简单的代码与普通的js：addEventListener没有响应

Question

我只是想做一个测试，我习惯于在jQuery上工作，但不是“纯”的JavaScript，我试图绑定这个事件，我没有得到事件的答案，我只是在html代码中创建了一个链接和一个脚本标签，其中：

var li = document.getElementById（'first'）;
li.addEventListener（ '的onmouseover'，函数（）{
警报（ 'OK'）;
}）

能否请你告诉我什么是错呢？我没有看到这个错误。
感谢

Answer 1

第一，您需要删除addEventListener()的“on”部分。其次，事件名称必须全部小写。第三，你错过了第三个参数，布尔值指示是否在捕获阶段处理事件，而不是冒泡阶段（如果有疑问，请使用false）。

您需要考虑的另一个问题是，IE < = 8不支持addEventListener()，因此您需要使用专有的attachEvent()方法包含特定于IE的回退。

有了这一切，你的例子就变成：

var li = document.getElementById('first'); 
if (typeof li.addEventListener != "undefined") { 
    li.addEventListener('mouseover', function() { 
     alert('ok'); 
    }, false); 
} else if (typeof li.attachEvent != "undefined") { 
    li.attachEvent('onmouseover', function() { 
     alert('ok'); 
    }); 
} 

最简单的跨浏览器的解决方案是所谓的DOM0方法，使用元素的onmouseover财产。然而，这具有每个元素仅允许每个事件有一个事件监听器的缺点，因此可能容易被其他代码覆盖。

li.onmouseover = function() { 
    alert('ok'); 
}; 

Answer 2

您可以在DOM直接分配处理函数到所选元素的onmouseover属性：

var lis = document.getElementById('first'); 
lis.onmouseover = function() { 
    alert('yo'); 
}; 

上的jsfiddle：http://jsfiddle.net/entropo/YMGAy/

文档：

• https://developer.mozilla.org/en/DOM/element.addEventListener#Older_way_to_register_event_listeners
• https://developer.mozilla.org/en/DOM/element.onmouseover

编辑：
这里实在是太使用addEventListener ...

li = document.getElementById('first'); 
li.addEventListener('mouseover', function(e) { 
    alert('ok'); 
}, false); 

http://jsfiddle.net/entropo/7FvZ7/
你失踪的最后一个参数addEventListener（为useCapture）