3

I am having some trouble searching google and stackoverflow for the answer to what this piece of JavaScript code is doing:

obj['e'+type+fn]( window.event );

To me this looks like an array element with an argument/parameter:

array[index](argument);

However, I can only guess at what this is doing. Is this equivalent to:

array[index]=argument

Which is assigning an argument to the array element?

If anyone could provide a simple/generic example of what this is doing that would be great. I am attempting to decipher John Resig's addEvent() implementation. I'm not really looking for an explanation of this implementation or example related to it, but more like a dumbed-down example like MDC has done for call which uses some imagined products.

Improve this question

4 Answers 4

Reset to default
5 
obj['e'+type+fn]( window.event );

This is just a way of accessing a property of an object. For instance, if you have an object

a = {
 name: 'someName'
 age: 20
};

You can access name by using a.name or, as above a['name'].

The reason he is using the [] notation is so that he can build the key from multiple strings.

Thus if type=click and fn=foo he's accessing obj.eclickfoo. Or obj['eclickfoo']

This property of the object must be a method as he's invoking it using (); so again, he's saying:

obj.eclickfoo( window.event );

or equivalent

obj['eclickfoo']( window.event );
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

This is what it is doing:

From the array obj, it takes the function with index 'e'+type+fn. It then executes it passing window.event as a parameter.

Remember that () invokes a function, and [] extract a value from an array.

Improve this answer

1 Comment

This is the same as running something like obj.esome_typesome_function(window.event), except that the notation you're asking about allows you to compose the property name dynamically.
0

obj['e'+type+fn] returns a function type. This is then executed with window.event as a parameter.

Improve this answer

Comments

0 
obj['e'+type+fn]( window.event );

Arrays can indeed use the "obj[...]" notation, but so can any object in JavaScript. And in this case, Resig is adding the property to any object, specifically for DOM objects.

obj['aVar'] is equivalent to obj.aVar. The advantage of the former is that it can also work with keywords which are reserved in JavaScript to have special meaning (e.g., obj['var'] if you defined a property called "var" on an object) and allows property names to be accessed dynamically, as in your example. Since type is a variable, you could not do obj.type since that would be finding a property exactly named "type", not finding a property with the name equal to the value of the type variable.

Since objects (or arrays) can hold functions as data, you can also use the invocation operator (the matching parentheses) on a function found inside of an object or array, as is done here--the property is accessed (which is a previously stored "method" or function on an object) and then invoked with the window.event object as a single argument.

Functions also have a built-in toString method on their prototype (which will get called in cases like this where you are are concatenating to a string, and therefore must want a string, as long as you don't set your own toString method on your function, since functions are also objects in JavaScript!). Resig's code is taking advantage of this, to define a new property, somewhat haphazardly which is normally a bad idea, but in a way which is pretty unlikely to clash with other applications also adding such a property.

So if document.body is the obj and if the type variable is set to "click" and "fn" is set to function () {alert('boo!');}", it will actually name a property on the document.body object as "eloadfunction () {alert('boo!');}". As he explains, creating this property (and then invoking it inside his own anonymous function), allows the function to be called with the normal behavior of any "this" keyword used inside--this will refer to the parent object, in this case obj, not to a global (unless obj is the global--i.e., the window object).

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.