香草javascript classList操作懸停

試圖做一些真正的基本類操作懸停和加載一個啓動頁面。不知道爲什麼它不工作 - 然後再次，從來沒有寫在香草之前。香草javascript classList操作懸停

基本DOM：

<body> 
    <article> 
     <p>test</p> 
    </article> 
</body>

的JavaScript：

var bod  = document.getElementsByTagName('body')[0], 
    article = document.getElementsByTagName('article')[0]; 

article.onMouseOver = function(){ 

    bod.classList.add('focus'); 
} 

article.onMouseOut = function(){ 

    bod.classList.remove('focus'); 
} 

window.onLoad = function(){ 

    bod.classList.remove('loading'); 
}

來源

2013-05-26 technopeasant

如果你正在尋找香草，你應該只使用CSS：'article：hover' – Bergi

使用小寫處理：

article.onmouseover

但一般來說，最好使用addEventListner方法。 .onevent方法只允許一個處理程序，並且它也很快速且很髒。但是它會弄亂代碼和html，並且在某些情況下甚至可能會從運行中刪除一些其他重要代碼，這就是爲什麼addEventListener更好，因爲它鏈接並且可以有多個處理程序監聽一個事件，這是正確的形成。

這是從另一個計算器用戶精彩的回答上（上段，但是我幾乎和它爲你）的確切差別.. AddEventListener vs element.onevent

這裏是使用適當的事件處理的固定小提琴： http://jsfiddle.net/hXjFz/1/

來源

2013-05-26 20:26:22

都很好。在同一時間回答 - 仍然會給你信用，因爲你是正確的。謝謝您的幫助。 – technopeasant

我是個白癡。處理程序不會騎駱駝。

article.onmouseover; 
article.onmouseout; 
window.onload;

來源

2013-05-26 20:26:35 technopeasant

是的，但你不應該使用這些..更好地使用addEventListener所以你和其他人可以鏈接.. –

@dory我不需要在這種情況下鏈，所以短暫和甜美是首選。但如果你想鏈接到一個jsfiddle爲他人蔘考，我相信會有榮譽參與。 – technopeasant

嘿，我只是試圖正確回答這個問題:)你決定什麼是對你有好處的......當我太懶惰或運行一些快速和骯髒的東西時，我多次使用。無論如何，我添加了答案。 –

香草javascript classList操作懸停

回答

相關問題