niche Posted August 16, 2012 Share Posted August 16, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
justsomeguy Posted August 16, 2012 Share Posted 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 1 Link to comment Share on other sites More sharing options...
niche Posted August 16, 2012 Author Share Posted August 16, 2012 Are multiple handlers handlers with aruguments? Link to comment Share on other sites More sharing options...
justsomeguy Posted August 16, 2012 Share Posted 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. Link to comment Share on other sites More sharing options...
niche Posted August 16, 2012 Author Share Posted August 16, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
thescientist Posted August 17, 2012 Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
birbal Posted August 17, 2012 Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
ShadowMage Posted August 17, 2012 Share Posted 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. Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
ShadowMage Posted August 17, 2012 Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2012 Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
birbal Posted August 17, 2012 Share Posted 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. Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 17, 2012 Share Posted August 17, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted August 17, 2012 How does the var: divIdcount get into the var: newAddition so it can picked up by registerEvent()? Link to comment Share on other sites More sharing options...
justsomeguy Posted August 17, 2012 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted 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> Link to comment Share on other sites More sharing options...
justsomeguy Posted August 17, 2012 Share Posted 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. Link to comment Share on other sites More sharing options...
niche Posted August 17, 2012 Author Share Posted 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. Link to comment Share on other sites More sharing options...
niche Posted August 19, 2012 Author Share Posted August 19, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 19, 2012 Share Posted August 19, 2012 under heading Legacy Internet Explorer and attachEvent Link to comment Share on other sites More sharing options...
niche Posted August 19, 2012 Author Share Posted August 19, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 19, 2012 Share Posted 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 ); } } } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now