Give an object multiple same-event handlers

K

kebians

Hi,


I am using AddEvent Menthod with the following code for adding
multiple even handlers for same object within same event. ie. call 2
or more functions when click event of a button fires...

my code works fine... the code is as follows:

<code>
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {
obj.addEventListener( type, fn, false );
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
</code>

I attach events like following:
<code>
addEvent(myInputObj, 'click', isEmpty);
addEvent(myInputObj, 'click', isNumber);
addEvent(myInputObj, 'click', isInRange);
</code>

here the code works fine... three functions isEmpty, isNumber,
isInRange serially fires when a user clicks myInputObj.

Now my problem starts here. I have checked the conditions in each
functions and set the flags to true or false. I want to execute the
remaining functions if and only current function returns true. I don't
want to run isNumber and isInRange if isEmpty returns false.

any help can be appreciable.

thanks,
KoolKabin
 
J

Jorge

Now my problem starts here. I have checked the conditions in each
functions and set the flags to true or false. I want to execute the
remaining functions if and only current function returns true. I don't
want to run isNumber and isInRange if isEmpty returns false.

function clickHandler (e) {
if ( isEmpty.call(this, e) ) {
isNumber.call(this, e);
...
} else {
...
}
}

addEvent(myInputObj, 'click', clickHandler);
 
E

Elegie

(e-mail address removed) a écrit :

Hello,
I am using AddEvent Menthod with the following code for adding
multiple even handlers for same object within same event. ie. call 2
or more functions when click event of a button fires...

Now my problem starts here. I have checked the conditions in each
functions and set the flags to true or false. I want to execute the
remaining functions if and only current function returns true. I don't
want to run isNumber and isInRange if isEmpty returns false.

This looks like a design issue, the correct pattern here would be to
create a controller which would be associated to the event target; the
controller would then call all check functions, and make decisions based
on their return values.

---
// pseudo-code
elem.onclick = function (evt) { // controller
var ret ;
ret = !isEmpty .apply(this, arguments) ;
if (ret) ret = isNumber.apply(this, arguments) ;
if (ret) ret = isInRange .apply(this, arguments) ;
return ret ;
}
---


Also, I think you should be made aware that, according to the
specification...

"although all EventListeners on the EventTarget are guaranteed to be
triggered by any event which is received by that EventTarget, no
specification is made as to the order in which they will receive the
event with regards to the other EventListeners on the EventTarget".

<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-basic>


HTH,
Elegie.
 
T

Thomas 'PointedEars' Lahn

I am using AddEvent Menthod with the following code for adding
multiple even handlers for same object within same event. ie. call 2
or more functions when click event of a button fires...

my code works fine...

No, it doesn't.
the code is as follows:

<code>
function addEvent( obj, type, fn ) {
if (obj.addEventListener) {

Insufficient feature test. That a property is there is no indication that
it is callable.
obj.addEventListener( type, fn, false );
}
else if (obj.attachEvent) {

See above.
obj["e"+type+fn] = fn;

You SHOULD NOT augment host objects.
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }

Again, unnecessary error-prone host object augmentation.
obj.attachEvent( "on"+type, obj[type+fn] );
}

Not equivalent to the former.
else {
obj["on"+type] = obj["e"+type+fn];
}

Not equivalent to any of the above at all; obj["e"+type+fn] must be
undefined at this point. This is copy & pray, yes?
}
</code>

I attach events like following:
<code>
addEvent(myInputObj, 'click', isEmpty);
addEvent(myInputObj, 'click', isNumber);
addEvent(myInputObj, 'click', isInRange);
</code>

here the code works fine... three functions isEmpty, isNumber,
isInRange serially fires when a user clicks myInputObj.

Now my problem starts here. I have checked the conditions in each
functions and set the flags to true or false. I want to execute the
remaining functions if and only current function returns true. I don't
want to run isNumber and isInRange if isEmpty returns false.

With your current error-prone approach, it is fairly easy:

addEvent(myInputObj, 'click', function(e) {
if (!e)
{
e = (typeof window.event != "undefined")
? window.event
: null;
e && isEmpty(e) && isNumber(e) && isInRange(e);
});
addEvent(myInputObj, 'click', isNumber);
addEvent(myInputObj, 'click', isInRange);

Your approach does not work because call order of event listeners is
arbitrary with attachEvent(). Find a better approach. Google is your
friend. [psf 6.1]


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top