Isolating onclick or mouseover events

[ocon]

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]

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]

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]

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.