addEventHandler / addEvent conflict

[kaeli]

All,

I have a generic script to handle events. (NN/IE only)

function addEvent(elementObject, eventName, functionObject)
{
if(document.addEventListener)
elementObject.addEventListener(eventName, functionObject, false);
else
if(document.attachEvent)
elementObject.attachEvent("on" + eventName, functionObject);
}

Now, what I wanted to do was pass a parameter to the functionObject, but
this is apparently not possible.
How can I determine what object caused the event in the functionObj?
FWIU, the "this" object is fine in NN, but in IE, it refers to window.

addEvent(document.getElementById("myE"),"click",myFunction);
function myFunction()
{
// I need a reference to document.getElementById("myE") or whatever
object triggered this function to be called
}

If someone knows a way to pass a parameter, that is preferable.

TIA
--

 

[Martin Honnen]

I have a generic script to handle events. (NN/IE only)

function addEvent(elementObject, eventName, functionObject)
{
if(document.addEventListener)
elementObject.addEventListener(eventName, functionObject, false);
else
if(document.attachEvent)
elementObject.attachEvent("on" + eventName, functionObject);
}

Now, what I wanted to do was pass a parameter to the functionObject, but
this is apparently not possible.
How can I determine what object caused the event in the functionObj?
FWIU, the "this" object is fine in NN, but in IE, it refers to window.

With IE the element the event is fired on is
window.event.srcElement
with a DOM compliant browser your functionObject should have a parameter say
function functionObject (evt) {...}
and then you can access
evt.target
as the node the event was fired on.
As you are asking for the this object, that would be
evt.currentTarget

For IE you will need a closure e.g.

function addEvent(elementObject, eventName, functionObject)
{
if(document.addEventListener)
elementObject.addEventListener(eventName,
function (evt) {
functionObject(elementObject, evt)
}, false);
else
if(document.attachEvent)
elementObject.attachEvent("on" + eventName,
function () {
functionObject(elementObject);
}
)
}


with
function myFunction (element, evt) {
// access element here if needed
}

 

[kaeli]

function addEvent(elementObject, eventName, functionObject)
{
if(document.addEventListener)
elementObject.addEventListener(eventName,
function (evt) {
functionObject(elementObject, evt)
}, false);
else
if(document.attachEvent)
elementObject.attachEvent("on" + eventName,
function () {
functionObject(elementObject);
}
)
}


with
function myFunction (element, evt) {
// access element here if needed
}

Worked great, thanks!

For archival purposes, in the html, I named the elements with a number
at the end, then in myFunction used
element.name.substring(element.name.length-1)
to retrieve the number.
The purpose: correspondingly named textboxes and selects were being
synchronized and I wanted the function to be able to be used for all of
them.

textbox1, select1
textbox2, select2
etc
The function could then tell which text element to modify when a
particular select element was changed. Previously a reference to both
objects had been passed.

--

 

[Lasse Reichstein Nielsen]

I have a generic script to handle events. (NN/IE only)

NN? Not Netscape 4 for sure, but it works in all DOM 2 compliant browsers,
which include Opera 7.

function addEvent(elementObject, eventName, functionObject)
{
if(document.addEventListener)
elementObject.addEventListener(eventName, functionObject, false);
else
if(document.attachEvent)
elementObject.attachEvent("on" + eventName, functionObject);
}

Yes, this will work in most cases.

Now, what I wanted to do was pass a parameter to the functionObject, but
this is apparently not possible.

It already gets one argument, the event. There is no direct way to store
another value (or more) with it.

How can I determine what object caused the event in the functionObj?

Normally (if assigned to the "onclick" attribute or with
addEventListener), "this" would refer to the element, because the
function is treated as a method of the element object.

FWIU, the "this" object is fine in NN, but in IE, it refers to window.

..... but not with attachEvent.

addEvent(document.getElementById("myE"),"click",myFunction);
function myFunction()
{
// I need a reference to document.getElementById("myE") or whatever
object triggered this function to be called
}

If someone knows a way to pass a parameter, that is preferable.

Try this general function instead:
---
function addEvent(elementObject, eventName, functionObject /* , ... */)
{
var args = Array.prototype.slice.call(arguments,3);
function wrapper(event) {
return functionObject.apply(elementObject,[event].concat(args));
}
if (document.addEventListener) {
elementObject.addEventListener(eventName, wrapper, false);
} else if (document.attachEvent) {
elementObject.attachEvent("on" + eventName, wrapper);
}
}
---
It has the disadvantage of not allowing detachEvent or removeEventListener
to remove the function. For that you need something more complicated, but
doable.

/L

 

[kaeli]

NN? Not Netscape 4 for sure, but it works in all DOM 2 compliant browsers,
which include Opera 7.

Sorry, clarification: NN6+/IE5+ only are the only ones tested and the
only ones I care about. Just didn't want people telling me about all the
browsers it didn't work in. Intranet. *g*

It has the disadvantage of not allowing detachEvent or removeEventListener
to remove the function.

I don't need to and Martin's function worked great.
This was a workaround so I could have my taglibraries (JSP) generate my
form elements (dynamically made as normal or readonly based on user's
permissions). The problem was that I didn't want to attach javascript
from the tag libraries, as the elements aren't always scripted the same
way and I wanted the script to be modifiable and removable with no
modification to the taglib. So I needed the elements and the script
separate.

Thanks!

--
--
~kaeli~
If the funeral procession is at night, do folks drive with
their lights off?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace