Prototype: bind() vs bindAsEventListener()

D

danf

Can anyone tell me what the difference is between these two protoype
methods?
They are extensions of Javascript's Function class.

Is bindAsEventListener just used to be compatible with IE's Event
model?
I'm thinking the only difference between the 2 methods is that
bindAsEventListener passes the event into the function.

I want to know how I can practically apply these.

METHODS FROM prototype-1.5.0_rc1.js
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}

Function.prototype.bindAsEventListener = function(object) {
var __method = this, args = $A(arguments), object = args.shift();
return function(event) {
return __method.apply(object, [( event ||
window.event)].concat(args).concat($A(arguments)));
}
}
 
Y

Yanick

danf said:
Can anyone tell me what the difference is between these two protoype
methods?
They are extensions of Javascript's Function class.

Roughly, the only different is that bindAsEventListener sets the first
argument of the function (arguments[0]) as the event objet. But also,
it ensures that event is consistent in both IE and firefox. Meaning
that you won't need to add this line : event = event || window.event,
at the beginning of you event function. So, yes, it is cross-browser
compatible.

Consider this :

function clickEvent(arg1, arg2) {
alert( "this = " + this + "\narg1 = " + arg1 + "\narg2 = " + arg2 );
}

var element1 = $('someElement1');
// this = inconsistent, arg1 = inconsistent, arg2 = undefined
element1.onclick = clickEvent;

var element2 = $('someElement2');
// this = element2, arg1 = 1, arg2 = 2
element2.onclick = clickEvent.bind(element2, 1, 2);

var element3 = $('someElement3');
// this = element3, arg1 = event, arg2 = 1
element3.onclick = clickEvent.bindAsEventListener(element3, 1, 2);

Is bindAsEventListener just used to be compatible with IE's Event
model?

As you see, bind and bindAsEventListener may be applied to any DOM
event model as they ensure a consistency in most implementations.
I'm thinking the only difference between the 2 methods is that
bindAsEventListener passes the event into the function.

Yes, that's the main thing, but as I said, bindAsEventListener's first
parameter will always be the event object in most browsers (meaning
that the only browsers making exception here are barely used by less
than 8% of the population, and in most case, they don't even implement
proper JS, CSS, XML, etc. see
http://www.w3schools.com/browsers/browsers_stats.asp)


I suggest that you read about function binding to have a better
understanding of what these two functions actually do in your code. A
good start is here :
http://developer.mozilla.org/en/doc...nce:Operators:Special_Operators:this_Operator
 
T

tdan

Thanks for the response - and the link was a great resource.
danf said:
Can anyone tell me what the difference is between these two protoype
methods?
They are extensions of Javascript's Function class.

Roughly, the only different is that bindAsEventListener sets the first
argument of the function (arguments[0]) as the event objet. But also,
it ensures that event is consistent in both IE and firefox. Meaning
that you won't need to add this line : event = event || window.event,
at the beginning of you event function. So, yes, it is cross-browser
compatible.

Consider this :

function clickEvent(arg1, arg2) {
alert( "this = " + this + "\narg1 = " + arg1 + "\narg2 = " + arg2 );
}

var element1 = $('someElement1');
// this = inconsistent, arg1 = inconsistent, arg2 = undefined
element1.onclick = clickEvent;

var element2 = $('someElement2');
// this = element2, arg1 = 1, arg2 = 2
element2.onclick = clickEvent.bind(element2, 1, 2);

var element3 = $('someElement3');
// this = element3, arg1 = event, arg2 = 1
element3.onclick = clickEvent.bindAsEventListener(element3, 1, 2);

Is bindAsEventListener just used to be compatible with IE's Event
model?

As you see, bind and bindAsEventListener may be applied to any DOM
event model as they ensure a consistency in most implementations.
I'm thinking the only difference between the 2 methods is that
bindAsEventListener passes the event into the function.

Yes, that's the main thing, but as I said, bindAsEventListener's first
parameter will always be the event object in most browsers (meaning
that the only browsers making exception here are barely used by less
than 8% of the population, and in most case, they don't even implement
proper JS, CSS, XML, etc. see
http://www.w3schools.com/browsers/browsers_stats.asp)


I suggest that you read about function binding to have a better
understanding of what these two functions actually do in your code. A
good start is here :
http://developer.mozilla.org/en/doc...nce:Operators:Special_Operators:this_Operator
 

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,794
Messages
2,569,641
Members
45,355
Latest member
SJLChristi

Latest Threads

Top