Question

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

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

Answer 1

使用小写处理程序：

article.onmouseover

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

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

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

Answer 2

我是个白痴。处理程序不是基于CamelCased。

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

悬停时的vanilla javascript classList操作

2 个答案: