adding an event to a created element

**nichemtktg** · Aug 16, 2012 15:46

How do you add an event to a created element?

I need the div I'm appending to have this event: onmouseover="coordinates(event)"

**cpradio** · Aug 16, 2012 16:05

Code:

element.onmouseover = function() { .... }

If you paste your code, I can assist you even further.

**nichemtktg** · Aug 16, 2012 16:43

Thanks for the offer.

Here's the relevant part of my code.

Code:

           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.

I need this in my div: onmouseover="coordinates(event)"

How close was I?

**paul_wilkins** · Aug 16, 2012 17:20

Originally Posted by nichemtktg

It successfully executes with the line in question commented-out. With it uncommented, it fails to execute.

I need this in my div: onmouseover="coordinates(event)"

How close was I?

If you have a coordinates function, it is just the name of the function that you assign to the event.

Code javascript:

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

**nichemtktg** · Aug 16, 2012 19:05

is this what you had in mind:

Code:

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

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

Code:

<!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)};
        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>

**paul_wilkins** · Aug 16, 2012 19:12

Originally Posted by nichemtktg

is this what you had in mind:

Code:

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

That's going to have issues on web browsers that don't use the global event variable, which is pretty much only used with Internet Explorer.
All web browsers either provide the event information as the global variable, or pass it directly to the function itself, so there's no need to wrap the call.

This does the job perfectly well, without needing the added complexity:

Code javascript:

newAddition.onmouseover = coordinates;

**nichemtktg** · Aug 16, 2012 19:16

Wow! How does that work? Firebug says there's no event listener in the created div.

**paul_wilkins** · Aug 16, 2012 20:22

Originally Posted by nichemtktg

Wow! How does that work? Firebug says there's no event listener in the created div.

Here's an updated version of the above code, that demonstrates the technique.

HTML Code:

<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>
<style type="text/css">
#wrapper {
    float: left;
    width: 600px;
    margin: 0px;
}
#wrapper div {
    float: left;
    height: 200px;
    width: 500px;
    margin: 0px 0px 10px 0px;
    background: aqua;
}
</style>
</head>
<body>
<?php
echo '<div id="wrapper">';
echo '<div id="div1"></div>'; 
echo '<div id="div2"></div>'; 
echo '<div id="div3"></div>'; 
echo '<div id="div4"></div>'; 
echo '</div>'; 
?>
<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 = coordinates;
        div.appendChild(newAddition);
    }
}
</script>
<script>
document.getElementById('div1').onmouseover = coordinates;
document.getElementById('div2').onmouseover = coordinates;
document.getElementById('div3').onmouseover = coordinates;
document.getElementById('div4').onmouseover = coordinates;
</script>
</body>
</html>

User Tag List

Thread: adding an event to a created element

Thread Tools

Display

adding an event to a created element

Bookmarks

Bookmarks

Posting Permissions