Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perfect

Zoe Xiao
Zoe Xiao
7,195 Points

What is function(e)

I don't quite understand the last two steps of creating a drawing application. 1 var lastEvent=e what does this mean? 2 why should we set true and false on function(e)?

Thanks

1 Answer

Robert Bojor
PLUS
Robert Bojor
Courses Plus Student 29,439 Points

Hi Zoe,

The "e" in the function is the event that gets passed as a parameter to the respective function by jQuery. Using the lastEvent global variable and assigning e to it will allow you to check what was the last event that happened in another function - you have to remember that each function has its own namespace and variables declared with var inside a function will only be available in that function.

Now, the mouseDown variable ( also a global variable ) is used as a switch. When the mouse button is pressed mouseDown is turned on ( equal to true ) and when you release the mouse button, mouseDown is turned off ( equal to false ). This switch is used to check if the application has to draw or not in line 53. The lastEvent global variable is also used in the same function ( line 55 ) to get the X and Y offsets where the line should start from.

Zoe Xiao
Zoe Xiao
7,195 Points

Hi Robert First, thanks for your answer and it is very detailed. Appreciate your patience. Can you provide any link of reference for the "e"? So I can check it out on my own. If lastEvent and e are the same thing, why use this: context.moveTo(lastEvent.offsetX,lastEvent.offsetY); context.lineTo(e.offsetX,e.offsetY);

Thank you!

Robert Bojor
Robert Bojor
Courses Plus Student 29,439 Points

Hi Zoe,

The logic is the following:

When you press down you mouse button you set the mouseDown to true and save in the global variable lastEvent the click event. This event contains, among other, the X and Y coordinates of your click - You need these in order for the script to know where to start drawing.

When you move you mouse, and keep in mind the button is still pressed, the mousemove will be called continuously but will also be passed the current event, which again, contains among others the new coordinates of your mouse cursor. Now using the previous coordinates ( lastEvent.offsetX and lastEvent.offsetY ) and the new coordinates of your mouse ( e.offsetX and e.offsetY ) you are able to draw a line between these coordinates.

At the end of the mousemove function you update the lastEvent variable to the current event e so next time you move your mouse the lastEvent will contain the last coordinates for your cursor and e will contain the new coordinates. Pixel by pixel you draw lines / points this way.

Please keep in mind that lastEvent and e are not the same until the mousemove function completes its code.

To demonstrate this better consider the following:

Lets say when you first press your mouse button, the cursor is at an imaginary X = 0, Y = 0. These coordinates are part of the event object and get stored into lastEvent.

Now, you move your mouse 1 pixel away. The new coordinates are X = 1, Y = 1. The script calls mousemove and passes these new coordinates inside the e variable. Because lastEvent is a global variable it is accessible inside the mousemove function and it contains the old coordinates. The script is instructed to draw a line ( in this case 1 pixel ) between the old coordinates ( 0, 0 ) and the new coordinates ( 1, 1 ). Last, before finishing the function, you update the lastEvent with the current event e. So now in lastEvent you have X = 1, Y = 1.

Moving your mouse again will call the mousemove again with the new coordinates, and so on...

Hope I made things clear :)

Zoe Xiao
Zoe Xiao
7,195 Points

Hi Robert Thanks for your explanation. I understand most of it except how the lastEvent works. How can it detect the last move is the last event? Isn't it just a variable which is named randomly by the teacher?

Andrew Chalkley
Andrew Chalkley
Treehouse Guest Teacher

Hi Zoe Xiao,

It is true that lastEvent could be called anything however we're just calling it something sensible. We could've called it previousEvent. To draw we need the previous co-ordinates and the new co-ordinates.

lastEvent is used as a variable to store the last event that took place. When you first click a click event is stored.

lastEvent = <click event>

Then when the mouse moves 1 pixel we compare the last event and the move event and we draw a line from lastEvent to mouse move event. Then lastEvent becomes the move event.

//draw line from lastEvent to e <move event 1>
//<draw code here>
//store current event e as lastEvent
lastEvent = <move event 1>

The mouse continues to move and draw a line from the previous event.

//draw line from lastEvent to e <move event 2>
//<draw code here>
//store current event e as lastEvent
lastEvent = <move event 2>

And so on...

You asked what e is. e is the event that is passed in from any event that's been triggered. A click, a mouse down, a mouse up, a double click etc You could name it anything. Most people name it e.

Here's some more info on it - http://api.jquery.com/Types/#Event