Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial![](https://ecs-static.teamtreehouse.com/assets/views/marketing/shared/community-banner-white-47072046c51352fe6a69f5e691ff5700b28bb11d45197d7bdf066d9ea3f72d0c.webp)
![Zoe Xiao](https://uploads.teamtreehouse.com/production/profile-photos/555122/micro_QQ__20140527195659.png)
Zoe Xiao
7,195 PointsWhat 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](https://uploads.teamtreehouse.com/production/profile-photos/601872/micro_avatar_new_128.jpg)
Robert Bojor
Courses Plus Student 29,439 PointsHi 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
7,195 PointsZoe Xiao
7,195 PointsHi 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
Courses Plus Student 29,439 PointsRobert Bojor
Courses Plus Student 29,439 PointsHi 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
7,195 PointsZoe Xiao
7,195 PointsHi 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
Treehouse Guest TeacherAndrew Chalkley
Treehouse Guest TeacherHi Zoe Xiao,
It is true that
lastEvent
could be called anything however we're just calling it something sensible. We could've called itpreviousEvent
. 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.The mouse continues to move and draw a line from the previous event.
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