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

Hi!
I'm Karsten and I want to help people learn German.
Buy me a coffee if you feel I did well.

How to use events in Javascript - the object

What is an event? What is an object?

event bubbling and the (javascript) object in programming, a quiz

If you take a peek at the script (sneak peak button below) you will find there that this page has implemented a different kind of event handling with the two brackets behind the name of the function ("()") missing. Events are a prerequisite to master programming, not the complete knowledge, but the understanding of the concept. Likewise another concept, being understood, is absolutely essential: the "object". Why is this so? Well, if you understand how something works, you don't have to know and understand every detail. You look at the detail, when it is important to you, right? You don't go learning every single command by heart. That saves an immense amount of time and effort. Understanding the concept of an "object" also helps you understand how the computer does things, and you will already know the answer when you ask yourself a question, only to continue consulting some list or go ask some helpful people for a particular implementation of a particular problem.

If you peek at the code you will find this code:"window.onclick = answer;", whereas in the inline event handling you will find the doubled round brackets. These double brackets signal that a function is to be immediately executed (a direct function call). The name of the function without brackets is a reference to the function (called "answer"). The function itself doesn't do much and only serves to show that an event handler can be implemented in this fashion or that fashion. So why a reference to the function and not a call? The window object has got quite an inventory. You see, an object encapsules everything, that you can identify it by, the context that it is composed of. A car for example is identified by a motor, wheels etc. You won't say that a keyboard belongs to the object "car". It is part of the object "computer". You might also regard it as a separate object. Every object encapsules stuff you can do to it or with it (methods), for example with a car you can drive, change its wheels, accelerate, make it stop etc. On top of that every object contains properties, for example a car can be red, can be of a certain brand, etc. Likewise (a simple analogy) the window is an object. This object contains the document object, which is accessed through the DOM, being in essence our document (html webpage), consisting of "nodes", that we can manipulate. By saying "window.onclick = answer;" we integrate this into the window object, adding it to the object. The window did not have an event handler, but with this line of code an event handler becomes part of the window object. The window already "knows" that it can be clicked on, but it doesn't do anything, because it hasn't yet been told that something is to be done. By giving the property a reference to the function "answer" you are saying: "Hello, there, window, look, take this reference into your inventory and add it to the property "onclick". If someone clicks on you, go to this address." So in essence the name of the function without brackets is giving a postal address to the onclick property.

You will also find the event handled as an inline event, next to having been assigned to the window object. Now for one more quiz: If you click on this paragraph. How many times will you be prompted to click the ok button of the modal alert? (A modal window is one such window that will not let you continue on the site unless you click "ok".) Will you get one modal window or two? Try it. And if you click on the image, how many times will you be prompted? Do you know why this happens?

The answer to this is bubbling. If you click on the paragraph, the paragraph will show a modal window, because an event has been implemented inline (<p onclick = "answer()";>). Since the paragraph is part of the document object which is part of the window object, the event is sent to the paragraph and from there it travels "upwards" in the DOM. If you have clicked on a specific word, you have also clicked on the paragraph and having clicked on the paragraph, you have also clicked on the window. Because there is also a handler implemented for the whole of the window (window.onclick = answer;), you get the message twice. Also notice, if you click on a link in the paragraph containing the event handler, you have to close two prompts before you get to the link target. Why this? This is because the javascript event handlers have got a higher priority over the native anchor handling.

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