How to use events in Javascript - What is an event in the first place?
Topics

How to use events in Javascript

What is an event?

Events are one of the things that you have to understand to master programming. When you search for something on the internet, you eventually land on some page. There you do stuff, you click on a button, a banner or an image, or whatever... The page must react, though, to what input you give and offer some kind of response. This input is regarded as an event. That is, a single input, like clicking, scrolling, moving the mouse over something (mouseover or hover). The click can be even reduced to three events, pushing the device down, which is mousedown, or letting it jolt up, which is mouseup, these two events make a "click" event. To the user it is a click, to the website it is an event that needs to be "handled" in some way or the other. That is why in programming there is the technical term event handling, which is just this, reaction to a new event. Even on a windows system, the OS (operating system) is constantly "listening" to events. When you double click (event: dblclick) on an icon to open a file the OS has to react and do what you requested (the request). When you have two windows open side by side and when you want to change to the other window, the OS has to listen to the position of your clicks to "understand" or "know" that you you are now wishing to activate the other window (set focus) and the window has to react. So it's the OS telling the window: "Hey, they have clicked on you, go to work." That is the reason why we call this device or program, listening, an "event listener". Now you've got the main terminology and lets get started with a single inline event listener. It is inline, because it is nested in the html code itself. If you take a peek at the script (sneak peak button below) you will find there that this page has implemented an event. Which event is it? What have you got to do for the page to show you a message box?

Javascript event, onscroll, click, mousedown, mouseup, dblclick, 
learn Javascript made easy, 
this is a symbol for the ease of understanding
Scroll right down and press the "sneak peak" button to see the code.

tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Scriptum javae idoneum est.




submit to reddit



Sneak peek of the server side code