Summary goes here...
An event triggers an object to do something. Typical events include mouse (e.g., mouse up/down), keyboard (e.g., key up/down), or system (e.g., load/unload).
In another programming construct topic (Action Containers), you learned two simple techniques for creating events. In review:
A simple event is added to HTML element as regular HTML attribute. For example, a common technique is to use the onclick event attribute in a button to trigger the code to do something. In the examples below, when the Click Me button is clicked, the alert dialog box appears with the message "Hello, World."
<button onclick="alert('Hello, World')">Click Me</button>
Besides writing the code DIRECTLY INSIDE the HTML element, a better approach is to create a function within a set of <script> tags and then call that function from within the button:
<script>
function helloWorld()
{
alert("Hello, World");
}
</script>
<body> <button onclick="helloWorld()">Click Me</button> </body>
Key points relating to event types:
Now, you will learn some advanced techniques for creating an event using the the onclick property and the addEventListener() method and the advantages of using them:
In the two previous examples, the event was called DIRECTLY FROM the object either by:
There are two additional methods that uses the HTML Document Object Model (DOM) to assign an event to an object. It is important to note that when you use the HMTL DOM methods, you have to define the object before you execute t the JavaScript code. That is the reason the <script> tag is at the bottom of the page.
The FIRST method is to assign the object an event and a function (e.g., myObject.onclick = helloWorld;)
<body> <button id="myButton">Click Me</button> </body>
<script>
var myObject = document.getElementById("myButton");
myObject.onclick = helloWorld;
function helloWorld()
{
alert ("Hello, World");
}
</script>
NOTE: It is important to note that the function "helloWorld" does NOT have parenthesis. If you do add the parenthesis the function will execute immediately when the page loads instead of when the button is clicked.
The SECOND method is to use an addEventListener. When using an addEventListener, the event is ATTACHED to the object from a DISTANCE. The addEventListener method is used to "tie" the event to an event handler by "registering" an event to an object.
An event handler, as the name implies, handles the event when it occurs by using a specialized function. It defines the actions that will occur when the event is trigger. The different between a regular function and an event handler function is that a regular function has to be called or invoked; whereas, an event handler is automatically "triggered" based on an event. The event handler is the second argument in an addEventListener (e.g., myObject.addEventListener("eventName", myEventHandler)). It is important to note that the argument is not a function but a reference to a function so it will not have parenthesis.
A least common format is to include the event handler inside of the addEventListener method using a named or an anonymous (no name) function.
<body> <button id="myButton">Click Me</button> </body>
<script>
var myObject = document.getElementById("myButton");
myObject.addEventListener("click", function helloWorld(){alert("Hello, World");});
</script>
A more elegant format to read and write is to use a named function that is created OUTSIDE of the addEventListener method but called from WITHIN it:
<body> <button id="myButton">Click Me</button> </body>
<script>
var myObject = document.getElementById("myButton");
myObject.addEventListener("click", helloWorld);
function helloWorld()
{
alert("Hello, World");
}
</script>
NOTE: It is important to note that the event handler "helloWorld" inside of the addEventListener method does NOT have parenthesis. If you do add the parenthesis the function will execute immediately when the page loads instead of when the button is clicked.
Notes regardiing addEventListeners:
An event Handler can It take a single argument called an eventObject that is a reference to the event.
You can ascertain properties of the object that registered the event through a property called target that contains a reference to the oject that triggered the event. For example, to see the name of the object use myObject.target.name. To determine other properties you could use eventObject.target.x or eventObject.target.y or any other property of that object. Another property called currentTarget can also be used. Usually target and currentTarget will be the same; however, they can refer to different objects. The target property is the object the was being "targeted" as the name suggest. However, the currentTarget property is the object that is currently listenting for the event as the name suggest again. For example, if you embed a button inside a <div> tag and add an addEventListener to the button, the target is the actually button that is clicked; whereas, currentTarget is the <div> tag that is currently listening for the event when you click on it. (See example below)
You can name an eventObject whatever you want; however, there are some common names like e, evt or event. In this tutorial, we use the word eventObject because it better describle what it is. The eventObject "sneak" in event and object properties of the object that trigger the event. This information can be useful inside of the event handler to perform specific task without having to use an object name using property names like target, currentTarget and type. (e.g., eventObject.target.name will return the name of the object that trigger the event.).
An eventObject encapsulates most of the properties of the object who fired the event. However, you have to drill down to get to its data:
Key points to remember about events: