I have a small problem with Javascript events which I hope some of you can help me with.
Let's say I have two Javascript classes. Both of these classes adds an onmousemove event to the <HTML> tag(document.documentEleme
nt). What I need to know is how to make sure that when the second event is added it doesn't delete the first one. I need some way to "concatinate" events.
This code illustrates what I mean:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test of js events</title>
<style type="text/css">
#event1,#event2{
width:300px;
height:300px;
border:1px solid #000;
background-color:#EEE;
margin-right:10px;
float:left;
}
</style>
<script type="text/javascript">
function Class1()
{
}
Class1.prototype = {
addEvent : function()
{
if(document.documentElemen
t.onmousem
ove){ // Event allready exists
// What can I put in here. I don't want to delete the old event.
}else{
document.documentElement.o
nmousemove
= this.me;
}
}
,
me : function(e)
{
if(document.all)e = event;
document.getElementById('e
vent1').in
nerHTML = 'From object of Class1: x: ' + e.clientX + ', y: ' + e.clientY;
}
}
function Class2()
{
}
Class2.prototype = {
addEvent : function()
{
if(document.documentElemen
t.onmousem
ove){ // Event allready exists
// What can I put in here. I don't want to delete the old event.
}else{
document.documentElement.o
nmousemove
= this.me;
}
}
,
me : function(e)
{
if(document.all)e = event;
document.getElementById('e
vent2').in
nerHTML = 'From object of Class2: x: ' + e.clientX + ', y: ' + e.clientY;
}
}
</script>
</head>
<body>
<div id="event1"></div>
<div id="event2"></div>
<script type="text/javascript">
var obj1 = new Class1;
obj1.addEvent();
var obj2= new Class2;
obj2.addEvent();
</script>
</body>
</html>
As you can see, I have two classes, and at the bottom I create one object of each class. If it had worked as I hoped, the x and y position of the mouse should have been written into both of the gray boxes.
