Menu
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');
}
593
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/
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
