香草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操作悬停

回答

相关问题