469,353 Members | 2,053 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,353 developers. It's quick & easy.

addEventHandler / addEvent conflict


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",my Function);
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
--
--
~kaeli~
Local Area Network in Australia:... the LAN down under.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #1
4 10100


kaeli wrote:
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
}
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 20 '05 #2
In article <40********@olaf.komtel.net>, ma*******@yahoo.de enlightened
us with...


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.

--
--
~kaeli~
Dancing cheek-to-cheek is really a form of floor play.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

Jul 20 '05 #3
kaeli <ti******@NOSPAM.comcast.net> writes:
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",my Function);
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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #4
In article <hd**********@hotpop.com>, lr*@hotpop.com enlightened us
with...
kaeli <ti******@NOSPAM.comcast.net> writes:
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.


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

Jul 20 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Adam | last post: by
reply views Thread by Zoury | last post: by
53 posts views Thread by Aaron Gray | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.