adding an event to a created element Solved with thanks

niche · August 16, 2012

How do you add an event to a created element? I need the div I'm appending to have this event: onmouseover="coordinates(event)"

Edited August 21, 2012 by niche

justsomeguy · August 16, 2012

For a single event handler the traditional model works fine: http://www.quirksmode.org/js/events_tradmod.html For multiple handlers, there's this: http://www.quirksmode.org/js/events_advanced.html

niche · August 16, 2012

Are multiple handlers handlers with aruguments?

justsomeguy · August 16, 2012

Multiple handlers are more than one function that gets called when an event fires. All kinds of pre-built scripts out there use the body's load event, if they use the traditional model then they overwrite other load handlers.

niche · August 16, 2012

Here's the relevant part of my code so far:

if (y > 463) {  var div = document.getElementById('wrapper');  var newAddition = document.createElement('div');  newAddition.style.margin = '0px 0px 10px 0px';  newAddition.style.width = '500px';  newAddition.style.height = '200px';  newAddition.style.background = 'blue';  newAddition.style.cssFloat = 'left';  //newAddition.element.onmouseover=coordinates(event);  div.appendChild(newAddition);	}

It successfully executes with the line in question commented-out. With it uncommented, it fails to execute. How does the commented-out line need to be changed? I need this in my div: onmouseover="coordinates(event)"

Edited August 16, 2012 by niche

thescientist · August 17, 2012

I've come to prefer this method (the concept advocated in JSG's second post)https://developer.mo...ddEventListener

Here's the relevant part of my code so far:
if (y > 463) {  var div = document.getElementById('wrapper');  var newAddition = document.createElement('div');  newAddition.style.margin = '0px 0px 10px 0px';  newAddition.style.width = '500px';  newAddition.style.height = '200px';  newAddition.style.background = 'blue';  newAddition.style.cssFloat = 'left';  //newAddition.element.onmouseover=coordinates(event);  div.appendChild(newAddition);	}
It successfully executes with the line in question commented-out. With it uncommented, it fails to execute. How does the commented-out line need to be changed? I need this in my div: onmouseover="coordinates(event)"

probably because newAddition.element is undefined and possibly event and coordinates. If you were looking in your browsers errors console, it would tell exactly what the problem is. Look again at the references we've given you. It's a matter of defining the function or attaching the event to the element itself, not a property of it. Edited August 17, 2012 by thescientist

niche · August 17, 2012

I ended up teasing this out of jsg's first ref:

newAddition.onmouseover = function(){coordinates(event)};

Which successfully executes when put in the whole script (creates an infinite scroll):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>infinite scroll</title> <script type="text/javascript"> function coordinates(event) {	var x=event.screenX;	var y=event.screenY;	var nextToLast = screen.availHeight;	nextToLast =  nextToLast - 200;	if (y > 463) {		var div = document.getElementById('wrapper');		var newAddition = document.createElement('div');		newAddition.style.margin = '0px 0px 10px 0px';		newAddition.style.width = '500px';		newAddition.style.height = '200px';		newAddition.style.background = 'blue';		newAddition.style.cssFloat = 'left';		newAddition.onmouseover = function(){coordinates(event)};		div.appendChild(newAddition);	}} </script><style type="text/css"></style></head><body><?php			echo '<div id="wrapper" style="float:left;width:600px;margin:0px">';echo '<div onmouseover="coordinates(event)" id="div1" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div2" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div3" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div4" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '</div>';?> </body> </html>

Wasn't able to get thescientist's addEventListener to work however. What would the addEventListener notation look like using this example? I'd like to know if you don't mind.

Edited August 17, 2012 by niche

birbal · August 17, 2012

like this

newNode=div.appendChild(newAddition);newNode.addEventListener("mouseover"						  ,function(evt){						   cordinate(evt);						   }						  ,false);

echo '<div id="wrapper" style="float:left;width:600px;margin:0px">';echo '<div onmouseover="coordinates(event)" id="div1" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div2" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div3" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div4" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '</div>';

as all element isside wrapper div is triggering same event it is better to delegate the event. you can bound event listenerto wrapper div itself and then can test the childNodes if it matches exxecute some function.

newNode=document.getElementById("wrapper");newNode.addEventListener("mouseover"						  ,function(evt){							    if(evt.target.tagName=='div')							    cordinate(evt);						   }						  ,false);

Edited August 17, 2012 by birbal

niche · August 17, 2012

Thanks birbal. Before proceeding with the points you an thescientist are making, please explain how the appended divs using

newAddition.onmouseover = function(){coordinates(event)};

can produce a functioning listener/handler when the listener/handler doesn't show up in the newly appended tag according to my firebug?

Edited August 17, 2012 by niche

ShadowMage · August 17, 2012

Thanks birbal. Before proceeding with the points you an thescientist are making, please explain how the appended divs using
newAddition.onmouseover = function(){coordinates(event)};
can produce a functioning listener/handler when the listener/handler doesn't show up in the newly appended tag according to my firebug?

Could be a problem with FireBug. If the handler is called, then it is obviously a member of the new element.

niche · August 17, 2012

Thanks ShodowMage. That reminds me to to upgrade my ff. Back to the point's birbal & thescientist were making. Using addEventListener cause the script to execute 1x instead of infinitely. Why? Here's the complete script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>infinite scroll</title> <script type="text/javascript"> function coordinates(event) {	var x=event.screenX;	var y=event.screenY;	var nextToLast = screen.availHeight;	nextToLast =  nextToLast - 200;	//alert(nextToLast);	//if (y > nextToLast) {	if (y > 463) {		//alert("X=" + x + " Y=" + y);		var div = document.getElementById('wrapper');		var newAddition = document.createElement('div');		newAddition.style.margin = '0px 0px 10px 0px';		newAddition.style.width = '500px';		newAddition.style.height = '200px';		newAddition.style.background = 'blue';		newAddition.style.cssFloat = 'left';		//newAddition.onmouseover = function(){coordinates(event)};  //works to produce an infinite scroll		//newAddition.onmouseover = coordinates; //works to produce an infinite scroll			newNode=div.appendChild(newAddition); //only executes 1x			newNode.addEventListener("mouseover",function(event){cordinate(event);},false);  //only executes 1x		   //newNode=document.getElementById("wrapper");  //only executes 1x			  //newNode.addEventListener("mouseover",function(evt){if(evt.target.tagName=='div')cordinate(evt);},false);//only executes 1x  div.appendChild(newAddition);	}} </script><style type="text/css"></style></head><body><?php			echo '<div id="wrapper" style="float:left;width:600px;margin:0px">';echo '<div onmouseover="coordinates(event)" id="div1" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div2" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div3" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div4" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '</div>';?> </body> </html>

Edited August 17, 2012 by niche

ShadowMage · August 17, 2012

Check your spelling on the handler. Also, I don't think this is correct:

newNode=div.appendChild(newAddition);newNode.addEventListener("mouseover",function(event){cordinate(event);},false);

I'm not sure what the value of newNode will be, but I can almost guarantee it isn't what you want it to be. Just get rid of newNode altogether and add the listener to newAddition like you did for the last two methods:

newAddition.addEventListener("mouseover",function(event){cordinate(event);},false);

Besides, you really don't need to append newAddition twice... (I left the spelling exactly as you had it, so you'll still have to find your typo... )

Edited August 17, 2012 by ShadowMage

dsonesuk · August 17, 2012

eventt created usingnewAddition.onmouseover = function(){} or newNode.addEventListener("mouseover",function(event){cordinate(event);},false); newNode.addEventListener never show on the actual html tags themselves. and also newNode.addEventListener will not work and the use of 'mouseover' won't work with crappy IE, as it uses different method as in attachEvent() with prefix of 'on' for 'mouseover'

Edited August 17, 2012 by dsonesuk

birbal · August 17, 2012

you are adding event listener inside the callback itself. put it outside of the callback cordinate(). inside the cordinate() just use the behaviour of event. add event listener to wrapper div and delegates events rather than appending event on each child div. if you want to add more div on mouseover just create and append it in cordinate() they will be delegated to mousover event automatically as parent wrapper div is bound to mouseover event. the second example in post 8 is a example of "event delegation" you can google more on the topic to get more information.

niche · August 17, 2012

dsonesuk's post puts addEventListener in the deep 6.

newAddition.onmouseover = coordinates;

Is much simpler.

add event listener to wrapper div and delegates events

I can't imagine that. Please provide an example of the concept. Edited August 17, 2012 by niche

dsonesuk · August 17, 2012

if you want to add cross browser events use this script from my prevoius topic, it was designed to work with id ref, but i converted to target created object as well

  function registerEvent( sTargetID, sEventName, fnHandler ){   var oTarget = document.getElementById( sTargetID );  if ( oTarget != null )   {		  if ( oTarget.addEventListener ) {  //for better browsers				 oTarget.addEventListener( sEventName, fnHandler, true );		  } else {				var sOnEvent = "on" + sEventName;				if ( oTarget.attachEvent )// for crappy IE				{				   oTarget.attachEvent( sOnEvent, fnHandler );				}		  }   }   else   {   if ( sTargetID.addEventListener ) {	//for better browsers				 sTargetID.addEventListener( sEventName, fnHandler, true );		  } else {				var sOnEvent = "on" + sEventName;				if ( sTargetID.attachEvent )// for crappy IE				{				   sTargetID.attachEvent( sOnEvent, fnHandler );				}		  }           }    }  var divIdcount=100;function coordinates(event) {		var x=event.screenX;		var y=event.screenY;		var nextToLast = screen.availHeight;		nextToLast =  nextToLast - 200;				if (y > 463 && divIdcount < 130) {						var div = document.getElementById('wrapper'); 				var newAddition = document.createElement('div');				newAddition.style.margin = '0px 0px 10px 0px';				newAddition.style.width = '500px';				newAddition.style.height = '200px';				newAddition.style.background = 'blue';				newAddition.style.cssFloat = 'left'; 				div.appendChild(newAddition);				registerEvent( newAddition, 'mouseover', coordinates )				divIdcount++;		}}

Edited August 17, 2012 by dsonesuk

niche · August 17, 2012

How does the var: divIdcount get into the var: newAddition so it can picked up by registerEvent()?

justsomeguy · August 17, 2012

To explain this a little more: newAddition.onmouseover = coordinates; You don't need to manually pass the event object, it automatically gets passed to the handler. The reason you needed to pass event here: newAddition.onmouseover = function(event) {coordinates(event)}; is because in that case the event handler is not coordinates, it is the anonymous function.

niche · August 17, 2012

That's very Zen of you jsg. That was an important question to me, that I may not of asked given the way this topic developed. Any ideas on how divIdcount gets into registerEvent()? As usual, the team's doing great, but I'm trying to catch-up. Here's everything so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="description" content="Save money" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>infinite scroll</title><script type="text/javascript">function registerEvent( sTargetID, sEventName, fnHandler ) {    var oTarget = document.getElementById( sTargetID );    if ( oTarget != null ) {	    if ( oTarget.addEventListener ) {  //for better browsers		    oTarget.addEventListener( sEventName, fnHandler, true );	    } else {		    var sOnEvent = "on" + sEventName;		    if ( oTarget.attachEvent ) {  // for crappy IE			    oTarget.attachEvent( sOnEvent, fnHandler );		    }	    }    } else {	    if ( sTargetID.addEventListener ) {  //for better browsers		    sTargetID.addEventListener( sEventName, fnHandler, true );	    } else {		    var sOnEvent = "on" + sEventName;		    if ( sTargetID.attachEvent ) { // for crappy IE			    sTargetID.attachEvent( sOnEvent, fnHandler );		    }	    }    }}var divIdcount=100;function coordinates(event) {    var x=event.screenX;    var y=event.screenY;    var nextToLast = screen.availHeight;    nextToLast =  nextToLast - 200;    if (y > 463 && divIdcount < 130) {	    var div = document.getElementById('wrapper');	    var newAddition = document.createElement('div');	    newAddition.style.margin = '0px 0px 10px 0px';	    newAddition.style.width = '500px';	    newAddition.style.height = '200px';	    newAddition.style.background = 'blue';	    newAddition.style.cssFloat = 'left';	    div.appendChild(newAddition);	    registerEvent( newAddition, 'mouseover', coordinates )	    divIdcount++;    }}</script><style type="text/css"></style></head><body><?php			echo '<div id="wrapper" style="float:left;width:600px;margin:0px">';echo '<div onmouseover="coordinates(event)" id="div1" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div2" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div3" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '<div onmouseover="coordinates(event)" id="div4" style="float:left;height:200px;width:500px;margin:0px 0px 10px 0px;background:aqua;"></div>';echo '</div>';?> </body> </html>

justsomeguy · August 17, 2012

Any ideas on how divIdcount gets into registerEvent()?

I'm not sure what you mean. It's a global variable so it's available in the coordinates function if that's what you're asking.

niche · August 17, 2012

I've never used a global var in JS before and was wondering about why that var definition was out there by itself. Now I know. I'm on another deadline and still need to go over registerEvent() to make sure I get it. So, I'll check back later if needed. The script does execute as expected.

niche · August 19, 2012

dsonesuk, This is obviously interpreted as true/false

if ( oTarget.addEventListener ) {  //for better browsers

Where does that say that in the ref:https://developer.mo...ddEventListeneror how could I know that on my own?

Edited August 19, 2012 by niche

dsonesuk · August 19, 2012

under heading Legacy Internet Explorer and attachEvent

niche · August 19, 2012

Thanks. Why does the "} else {" portion of registerEvent() exist? I thought it was there in case the wrapper started out empty, but that proved untrue.

Edited August 19, 2012 by niche

dsonesuk · August 19, 2012

The script was originally set to take an id ref only

  var oTarget = document.getElementById( sTargetID );  if ( oTarget != null )   {                  if ( oTarget.addEventListener ) {  //for better browsers                                 oTarget.addEventListener( sEventName, fnHandler, true );                  } else {                                var sOnEvent = "on" + sEventName;                                if ( oTarget.attachEvent )// for crappy IE                                {                                   oTarget.attachEvent( sOnEvent, fnHandler );                                }                  }   }

but now, should accept a calling of function targeting the current element using 'this' or 'event' as wellonmouseover="coordinates(this)" onmouseover="coordinates(event)" using

  else   {   if ( sTargetID.addEventListener ) {  				 sTargetID.addEventListener( sEventName, fnHandler, true );		  } else {			    var sOnEvent = "on" + sEventName;			    if ( sTargetID.attachEvent )			    {				   sTargetID.attachEvent( sOnEvent, fnHandler );			    }		  }               }

adding an event to a created element Solved with thanks

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in