vanilla javascript classList manipulation on hover

Question

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

If you're looking for vanilla, you should use CSS only: `article:hover` — Bergi, May 26 '13 at 20:31

score 8 · Accepted Answer · edited Jun 10 '21 at 19:29

use lowercase handlers:

article.onmouseover

But in general it's better to use the addEventListener method. The .onevent method allows for only one handler and its also quick and dirty. however it messes up the code and the html and in some cases you might even remove some other important code from running, that is why the addEventListener is better, as it chains and you can have multiple handlers listening to one event, which is the proper form.

Here is a wonderful answer from another stackoverflow user on the exact differences (however I pretty much sum it up for you in the above paragraph).. AddEventListener vs element.onevent

here is the fixed Fiddle using the proper event handling: http://jsfiddle.net/hXjFz/1/

all good. answered at the same time- will still give you credit as you're correct. thanks for the help. — technopeasant, May 26 '13 at 20:27

score 3 · Answer 2 · answered May 26 '13 at 20:26

3

I'm an idiot. Handlers arn't camelCased.

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

answered May 26 '13 at 20:26

technopeasant

7,809
31
91
149

yes but you shouldn't use those either..better use addEventListener so you and others can chain.. – Dory Zidon May 26 '13 at 20:27
@dory i have no need to chain in this case, so short and sweet is preferred. but if you'd like to link to a jsfiddle for others reference i'm sure there will be kudos involved. – technopeasant May 26 '13 at 20:29
hey I'm just trying to answer this question properly :) you decide what's good for you...I used the .onsomething many times when I'm too lazy or running something quick and dirty. anyhow, I added the answer. – Dory Zidon May 26 '13 at 20:37

vanilla javascript classList manipulation on hover

2 Answers2