Jquery event 'e' and mouse coordinates

[Violet_82]

Hi there,
I am having some problem understanding an event in jquery.
Given the following example http://api.jquery.com/event.pageY/, I don't quite understand what 'e' is and what it does. The rest of the code is kinda clear, it basically gets the coordinates but I don't understand what is the function of 'e' and where it comes from because it doesn't seem to have been declared anywhere, so it is a parameter holding what?
Any simple suggestion?!
thanks

[Airshow]

Hi Violet, e is a formal variable of the callback function passed to .bind .

$(document).bind('mousemove',function([B]e[/B]){
    $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); 
});

e seemingly arises out of nowhere but the truth is actually very simple. The callback function (that you write) is called somewhere in the jQuery.bind code, passing back an internally generated object.

It's easier to understand when you can see (or when you have written for yourself) the internal code that does the calling.

As your javascript gets stronger, you will find it's not at all uncommon to write functions which accept a callback function. Thus, you can write a generalised "worker" (eg. a freestanding function or a jQuery plugin) and allow some aspect of its behaviour to be specified at each point where the worker is called. Importantly here, selected internal object(s)/value(s) of the worker can be made available to the callback function by passing them back.

Not all programming languages allow this but in javascript functions are "first class objects" which is key to allowing them to be passed as formal variables to (and sometimes returned by) other functions.

I hope this helps.

Airshow

[MartinRinehart]

Let's have an example.

function double( x ) {
    return 2 * x;
}

// 'x' is a placeholder, waiting for a value

y = double( 23 ); // y === 46

When you put the 'double()' function into service, its parameter, 'x', is given a value. That value is used, inside the function where 'x' occurs. This gets a wee bit less obvious when you start passing the function around like an old slipper:

var doub_func = function( x ) { return 2 * x; };

var y = doub_func; // y is a function now

z = y( 23 ); // again, 46

Again, the value '23' is passed into the function and used in place of 'x'. To clean up my language (I wasn't swearing, but I wasn't precise, which is worse) in the above example both 'doub_func' and 'y' are names that refer to a function, correctly called "references" to a function.

In JavaScript, functions are "first-class" objects, meaning that you can pass them around just like you can pass around numbers and strings. Examples:

var x = "I'm a string!",
    y = function() { return "I'm a function!"; }

function look( e ) {
    // does something useful (we hope) with 'e'
    return e;
}

var z = look( x ); // "I'm a string!"

var z = look( y ); // y is a function

alert( z ); // reports that it's a function
alert( z() ); // executes the function, returning "I'm a function!"

Ask Wikipedia about "first-class functions" and "functional programming" to learn more. Or use jQuery, as it is a big-time user of JavaScript's functional programming.

[Violet_82]

Hi, thanks for that.
I think the way functions pass parameters around is kind of clear but I am still a little confused about this "e" formal variable. My confusion arises from the fact that I saw the (almost)same function written in a different way. I was watching one of those jquery tutorial videos and the tutor was creating a image hovering script and at one point he had this function:

...

$(function(){
	$('a').hover(function(e){
		var href = $(this).att('href');
		$('<img id="largeImage" src="' + href + '" alt="image"/>')
		.css('top', epageY)
		.css('left', epageX)
		.appendTo('body');
	
	}, function(){
	$('#largeImage').remove();

	});

});
...

Here you see there is no bind() just the callback function (which I didn't know it was a callback function - how do I determine that a function is a callback function by the way?). The tutor didn't really explain where that 'e' came from so I went onto http://api.jquery.com/event.pageX/ and got more confused : - )!

So my callback function (in both the above examples), you said Airshow, generates an internal object (which I assume it is 'e') and passes it back to the bind function: now few things: 1)how do I know when a function generates an internal objects, in other words, how do I know when to use 'e' and when not?

2)what does 'e' contain and what pass back to the bind() ?
3) Does any callback function contain and pass back an object (for the sake of argument this callback function doesn't pass back any parameter http://www.w3schools.com/jquery/jquery_callback.asp)
Sorry, just trying to understand it correctly : - )

[Airshow]

Here you see there is no bind() just the callback function (which I didn't know it was a callback function - how do I determine that a function is a callback function by the way?). The tutor didn't really explain where that 'e' came from so I went onto http://api.jquery.com/event.pageX/ and got more confused : - )!

There's no bind() but in this example there's a hover() instead.

You can spot callback functions because they appear inside the round brackets of a call to another function. The hover example actually has two callbacks separated by a comma. It's easier to understand when simplified to:

$('a').hover(
		function(e){ ... },
		function(){ ... }
	);

hover's round brackets are highlighted in red. To understand why you might need two callbacks and what the they do, you have to read jQuery's API entry for hover().

So my callback function (in both the above examples), you said Airshow, generates an internal object (which I assume it is 'e') and passes it back to the bind function: now few things: 1)how do I know when a function generates an internal objects, in other words, how do I know when to use 'e' and when not?

Not quite. The "outer" function (bind() in the earlier example) generates an internal object, which gets passed to the callback. We don't know how the object is referenced inside bind but we choose in the callback to reference it as e .

2)what does 'e' contain and what pass back to the bind() ?

e is a jQuery event. Again, we know this by reading the API. jQuery events are another whole topic in their own right, so let's not get hung up with them here.

The formal variable name e is fully under our control; we could use anything we like (eg. x , y , z , event , evt ). By convention, e is often used for jQuery events.

3) Does any callback function contain and pass back an object (for the sake of argument this callback function doesn't pass back any parameter http://www.w3schools.com/jquery/jquery_callback.asp)

Any callback function that doesn't need to access any of its outer function's internal variables, doesn't need a formal parameter list.

Moreover, since javascript is tolerant of missing entries in a formal variable list (not all languages are tolerant), they can be omitted even when available. You can see this in your hover() example where the second callback has () not (e) . If you look in the API, you will find that a jQuery event object ( e by convention) is available.

Airshow

[Violet_82]

Hi Airshow, thanks for that. I think I am getting there, just one thing you mentioned:

Any callback function that doesn't need to access any of its outer function's internal variables, doesn't need a formal parameter list.

Now, say for the sake ok argument that I want to create a script like the one we discussed earlier on (the one with the hover method) to get the coordinates of the mouse: when I build my script I have one thing in mind: getting the coordinates of the pointer, so I have my hover method (by the way I looked up the API as you suggested) but how do I know that in order to get the coordinates I need access to the hover function's internal variable? I mean is it something that I pick up by looking at the api for that particular function or is it sth I am ought to know? I mean, let's put it this way: if my goal was to get the coordinates of the mouse and I was trying to build a jquery script on my own (as I said that script was taken from somewhere else) to achieve that I wouldn't even dream to include a parameter because I just don't know
cheers

[MartinRinehart]

Very few things to 'just know' but this may be one of them. Look up the 'event' object and either memorize the whole thing, or get the principles down. Mouse event? All the questions you might ever ask re the mouse. Keyboard event? Well ...

Learn all about events, and then forget most of it. Design for single clicks (main button) and keydown events and you'll be pretty safe. Get half fancy (double clicks, mouse wheel, ...) and you're in cross-browser trouble.

Bon chance!

[Airshow]

Yes, what Martin said. You have to sort of know that mouse position is event-related.

I know because - well, that's where it has always been (in raw js, before the advent of jQuery) and to me it seems logical but probably because I already know the answer - and essentially, it can't come from anywhere else.

Airshow

[Violet_82]

I see, thanks for that guys, I got the feeling I will need some help in the future with event-related functions. that said I will make sure I will always look at the API first
thanks guys