Manipulation de la classe vanilla JavaScript sur survol

Question

Essayer de faire quelques manipulations de classe vraiment basiques au survol et au chargement pour une page de démarrage. Pas sûr pourquoi ça ne marche pas - d'un autre côté, je n'ai jamais écrit en Vanilla avant.

Exemple jsFiddle.

DOM de base:

        test

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

Utilisez des gestionnaires en minuscules:

article.onmouseover

Mais en général, il est préférable d'utiliser la méthode addEventListener. La méthode .onevent ne permet qu'un seul gestionnaire et est également rapide et peu soignée. cependant, elle perturbe le code et le html et dans certains cas, vous pourriez même supprimer une partie d'un autre code important en cours d'exécution, c'est pourquoi la méthode addEventListener est meilleure, car elle s'enchaîne et vous permet d'avoir plusieurs gestionnaires écoutant un événement, ce qui est la forme appropriée.

Voici une réponse merveilleuse d'un autre utilisateur de stackoverflow sur les différences exactes (bien que je les résume pour vous dans le paragraphe ci-dessus).. AddEventListener vs element.onevent

voici le Fiddle corrigé utilisant la gestion des événements correcte: http://jsfiddle.net/hXjFz/1/

Answer 2

Je suis un idiot. Les gestionnaires ne sont pas en camelCase.

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