悬停时的香草javascript classList操作答案

【问题标题】：vanilla javascript classList manipulation on hover悬停时的香草javascript classList操作
【发布时间】：2013-05-21 17:33:45
【问题描述】：

尝试对悬停和加载启动页面进行一些非常基本的类操作。不知道为什么它不起作用 - 再说一遍，以前从未用 Vanilla 编写过。

jsFiddle example.

基本 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');
}

【问题讨论】：

如果你正在寻找香草，你应该只使用 CSS：article:hover

标签： javascript html load classname

【解决方案1】：

使用小写处理程序：

article.onmouseover

但一般来说最好使用addEventListener 方法。 .onevent 方法只允许一个处理程序，而且它也快速而肮脏。但是它会弄乱代码和 html，在某些情况下，您甚至可能会从运行中删除一些其他重要代码，这就是为什么 addEventListener 更好，因为它链接并且您可以让多个处理程序监听一个事件，即正确的形式。

这是另一个stackoverflow用户关于确切差异的精彩回答（但是我在上一段中为您总结了很多）.. AddEventListener vs element.onevent

这是使用正确事件处理的固定小提琴： http://jsfiddle.net/hXjFz/1/

【讨论】：

一切都好。同时回答 - 因为你是正确的，所以仍然会给你信用。感谢您的帮助。

【解决方案2】：

我是个白痴。处理程序不是驼峰式的。

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

【讨论】：

是的，但你也不应该使用那些......最好使用 addEventListener 以便你和其他人可以链接......
@dory 在这种情况下我不需要链接，所以首选短而甜美。但是，如果您想链接到 jsfiddle 以供其他人参考，我相信会涉及到荣誉。
嘿，我只是想正确地回答这个问题 :) 你决定什么对你有好处......当我太懒或运行快速而肮脏的东西时，我多次使用 .onsomething。无论如何，我添加了答案。