I wish to share this routine (for which I must lookup the source...)
function addEvent(obj, evType, fn){
var res;
if (obj.addEventListener) {
obj.addEventListener(evType, fn, false);
res = true;
} else if (obj.attachEvent) {
var r = obj.attachEvent("on"+evType, fn);
res = r;
} else {
res = false;
}
return res;
}
obj is an HTMLElement; evType is a string like "click"; fn is a function
reference.
Let me elaborate on that last remark. This is a function definition:
function doWork(arg) {
alert(arg);
}
This is a corresponding function call:
doWork("'ello");
and this is the function reference:
doWork;
If you want to assign any function to a property like onclick, you must
assign the reference to the property:
thatDiv.onclick = doWork;
Alas, you cannot pass parameters to the function this way. Built-in
behaviour, nonetheless, is for the browser to pass the current event to
the function. Any event handling function should accept an event object
(unless you absolutely want to ignore the identity of the event, or do
not need its information). There is a little cross-browserity on it.
Microsofts browser does not pass the event, but has a global variable
'event' which carries the current event.
Lumping this together, your event handler function could look like
function doWork(e) {
if (!e) e = window.event;
// now you can be sure that e points to the current event object
// do whatever is necessary here
}
If you would put this:
thatDiv.onclick = doWork(argument);
doWork would be evaluated/executed, and its *result* is assigned to
onclick. Needless to say this will produce no effect when you actually
would click the element...
I have one other remark. When I create objects (classes, I like to call
them), I always include a private variable 'self' that is a copy of
'this'. It saves a lot of confusion as to what exactly this refers to,
when you are inside an object's functions.
function myObject() {
var self = this;
self.value = 0; // public member
// not really necessary here:
self.someMethod = functionname;
// nor here:
self.otherMethod = function(arg) {
// function body
self.value = 23; // 'this' would point to the function otherMethod!
}
}
This style may save you several "this.method is not a function" errors.
Ron Goral schreef:
Quote:
Hello
>
I am new to creating objects in javascript, so please no flames about my
coding style. =) I am trying to create an object that will represent a "div"
element as a menu. I have written several methods that are working fine. The
problem is if I want to dynamically assign an event handler to the object,
the event handler is not called. What am I doing wrong? Below is a sample
HTML doc with everything in place.
>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
>
<html>
>
<head>
<title>Menu Manager Test</title>
<script>
function testMenu (id)
{
this.addAttributes = addProperty;
this.addEvents = addProperty;
>
this.id = (id || 'mainMenu');
this.element = document.getElementById(this.id);
if (this.element == null)
{
this.element = document.createElement("<div id='" + this.id +
"'>Some Text</div>");
document.body.appendChild(this.element);
}
this.element.style.display = 'none';
}
>
function addProperty(propertyName,keyValue)
{
// this is a standalone property like an event or innerHTML
if (propertyName.indexOf("=") >= 0)
{
for (var i=0;i<addProperty.arguments.length;i++)
{
var arg = addProperty.arguments[i].split("=");
this.element[arg[0]] = arg[1];
}
}
// this adds style elements
else
{
// args should be in the form of propertyname=value.
for (var i=1;i<addProperty.arguments.length;i++)
{
var arg = addProperty.arguments[i].split("=");
this.element[addProperty.arguments[0]][arg[0]] = arg[1];
}
}
}
>
// Sample implementation in the HTML page
>
// Test function to check for use.
function testFunc()
{alert("here in testFunc.");}
>
var menuObj;
function setMenu(id)
{
// Create a new menu
menuObj = new testMenu(id);
// Adding a style works
menuObj.addAttributes("style","width=200");
menuObj.addAttributes("style","backgroundColor=gre en");
menuObj.addAttributes("style","color=white");
menuObj.addAttributes("style","border=1px solid black");
menuObj.addAttributes("style","textAlign=center");
menuObj.addAttributes("style","position=absolute") ;
menuObj.addAttributes("style","zindex=1000");
menuObj.addAttributes("style","top=200");
menuObj.addAttributes("style","left=300");
menuObj.addAttributes("innerHTML=A ball of string");
menuObj.addAttributes("style","display=");
// Dynamically assigning an event handler does not work.
menuObj.addEvents("onmouseover=testFunc()");
menuObj.addEvents("onmouseout=testFunc()");
}
</script>
</head>
>
<body onLoad="setMenu('mainMenu');">
</body>
</html>
>
Peace in Christ -
Ron Goral
>
>
--
Bas Cost Budde
Holland
www.heuveltop.nl/BasCB/msac_index.html 
