homepage Welcome to WebmasterWorld Guest from 50.17.176.149
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Isolating onclick or mouseover events
ocon




msg:4604733
 10:35 pm on Aug 24, 2013 (gmt 0)

If a user clicks or mouseovers the rating div, is there any way to isolate the specific span id without bloating the HTML?

<div id="rating">
<span id="s1" title="1 Star">&#9733;</span>
<span id="s2" title="2 Stars">&#9733;</span>
<span id="s3" title="3 Stars">&#9733;</span>
<span id="s4" title="4 Stars">&#9733;</span>
<span id="s5" title="5 Stars">&#9733;</span>
</div>

<script type="text/javascript">
<!--
document.getElementById("rating").onmouseover = function(){
console.log('The span id moused over is');}
document.getElementById("rating").onclick = function(){
console.log('The span id clicked on is');}
//-->
</script>

 

Fotiman




msg:4604746
 1:00 am on Aug 25, 2013 (gmt 0)

First, get rid of those HTML comments between your script tags. That hasn't been needed for about 15 years, yet people keep including them (old habits in some cases, cut and paste code in others).


document.getElementById("rating").onmouseover = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log('The span id moused over is ' + target.id);
}
document.getElementById("rating").onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log('The span id clicked on is ' + target.id);
}

ocon




msg:4604769
 6:22 am on Aug 25, 2013 (gmt 0)

Thanks Fotiman!

In regards to removing the HTML comments, is it just because modern day browsers all support JavaScript?

If I'm able to use progressive enhancements and not require JavaScript is there a reason besides byte savings why I should take them and the type attributes from my code?

Fotiman




msg:4604837
 9:11 pm on Aug 25, 2013 (gmt 0)


In regards to removing the HTML comments, is it just because modern day browsers all support JavaScript?

Yes. The "hack" of putting HTML comments in the script tag was needed for Mosaic and Netscape browsers which have been extinct for a loooooooooong time. It saves bytes to omit them since they're pointless, but also it's technically not correct to wrap code that's meant to be executed in comments. As I said, this was a hack.

If you put the script in an external file (which is really where it should be), then you wouldn't have those comments anyway. As for the type attribute, that's also not needed (all browsers default to type text/javascript). However, it depends on if you're going to validate your HTML, and if so, which DOCTYPE you're using. For example, it's valid to leave out the type attribute on script tags in HTML5, but they're required for HTML 4.01.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved