4

Trying to do some really basic class manipulation on hover and load for a splash page. Not sure why it's not working- then again, never written in Vanilla before.

jsFiddle example.

basic 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');
}
4

2 回答 2

6

使用小写处理程序：

article.onmouseover

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

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

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

于 2013-05-26T20:26:22.153 回答
3

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

article.onmouseover;
article.onmouseout;
window.onload;
于 2013-05-26T20:26:35.207 回答