簡單的代碼與普通的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）