Adding an event to a created element

How do you add an event to a created element?

I need the div I’m appending to have this event: onmouseover=“coordinates(event)”

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

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

Thanks for the offer.

Here’s the relevant part of my 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?

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


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

...
newAddition.onmouseover = coordinates;

is this what you had in mind:

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;
    //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>

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:

newAddition.onmouseover = coordinates;

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 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>