Using elements with a specified classname to trigger functions

[Fmdpa]

I've been experimenting lately, trying to write things that jQuery does in pure JS. It has been puzzling me how jQuery handles the the class selector so simply. My most recent attempt is to trigger a function (using unobtrusive JS) when an element with the specified class is hovered over. I've tried several things unsuccessfully. What I can't figure out is this. In order to select a elements by class, you must put them in an array:

var elems = document.getElementsByTagName('span'),	  class_elems = [];for ( i in elems ) {   if (elems[i].className == 'my_class') {	   class_elems.push(elems[i]); //"class_elems" now is an array containing elements with a className of "my_class"   }}class_elems.onmouseover = function() {   //here's where I am confused. This trigger isn't working. }

I'm stumped on how to do this. Any tips?

[Synook]

class_elems is an array, and you can't mouseover an array - you'd need to loop through it and attach the handler to each actual element individually (or just attach it the first time you loop).

[Fmdpa]

var elems = document.getElementsByTagName('span'),	  class_elems = [];for ( i in elems ) {   if (elems[i].className == 'my_class') {	   class_elems.push(elems[i]); //"class_elems" now is an array containing elements with a className of "my_class"   }}for ( j in class_elems ) {   class_elems[j].addEventListener('onmouseover', show_details, false);}function show_details() {   alert(this.innerHTML); //how do I make this method act upon the object to which it was attached? Will "this" work?}

Edit: yup, this works. Thanks for your help, Synook. This is the first time I've attached an event successfully.

[dsonesuk]

why create another array to hold elements with class name, then assign onmouseover event function to it when you do it from the original array of found span tags elements?

<script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var elems = document.getElementsByTagName('span');for(i=0; i<elems.length; i++){if (elems[i].className == 'my_class'){elems[i].onmouseover=function(){ show_details(this)}}}}function show_details(chosen_elem) {   alert(chosen_elem.innerHTML); //how do I make this method act upon the object to which it was attached? Will "this" work?}/*--*//*]]>*/</script>

[ShadowMage]

how do I make this method act upon the object to which it was attached? Will "this" work?

The way you have it won't work. The way dsonesuk showed you does work. What you are trying to do can be done like this: (I think)

elems[i].onmouseover=function(){ show_details.apply(this, [])}...function show_details() {   alert(this.innerHTML); //By using the apply method above, you can enable the use of 'this' within this method}

Have a look at the apply method, it's very powerful:https://developer.mozilla.org/en/JavaScript.../Function/apply

[Fmdpa]

I guess my way was redundant. Thanks dsonesuk, for showing me that. ShadowMage, the code I posted was inside of a larger block of code that was triggered automatically when the document loaded. Thanks for sharing the apply method. It looks very useful. What's the difference between this:

elems[i].onmouseover=function(){ show_details.apply(this, [])}

...and this:

elems[i].addEventListener('onmouseover', show_details, false);

Do they act differently?

[dsonesuk]

addEventListener is/was specifically for browsers other than IE (may have changed for IE8), IE uses attachEvent, so you would have to run a condition to determine which browser used which method before using that method, whereas the onmouseover triggering a function method works in all browsers, and less hassle.