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

--><!-- Nothing works without HTML -->





<div>



<h1>How to use events in Javascript - the object </h1>
<h2>What is an event? What is an object?</h2>
<img src="images_July_2015/XR5632HR0I.png" width="799" height="400" alt="event bubbling and the (javascript) object in programming, a quiz" />
<p onclick = "answer()";>
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
<a href="http://www.w3schools.com/jsref/dom_obj_all.asp" target="_blank">some list</a> or go ask some
<a href="http://stackoverflow.com/questions/4559032/easy-to-understand-definition-of-asynchronous-event" target="_blank">helpful people</a>
for a particular implementation of a particular problem.
</p>

<p onclick = "answer()";>
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
<a href="http://www.w3schools.com/jsref/obj_window.asp" target="_blank">quite an inventory</a>.
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.</p>

<p onclick = "answer()";>
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?
</p>


<p onclick = "answer()";>
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 (&lt;p onclick = "answer()";&gt;). 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
<a href="http://stackoverflow.com/questions/4416317/what-is-the-dom-and-bom-in-javascript" target="_blank">DOM</a>. 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.
</p>

<img src="images_July_2015/boat.png" width="799" height="531" alt="Javascript event, onscroll, click, mousedown, mouseup, dblclick,
learn Javascript made easy,
this is a symbol for the ease of understanding" />
<h6>Scroll right down and press the "sneak peak" button to see the code.</h6>



<script type="text/javascript">
function answer (){
alert ("Javascript is definitely not bad, I tell you.");
}
window.onclick = answer;
</script>



<p id="lorem" onclick = "answer()";>
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.
</p>



<br/>
<br/>
<br/>



<?php $Weblog->share ();?>
<br/>


</div>



Sneak peek of the server side code