HOLLA TECH - LEARN

Events
 

You can write JavaScript code that executes when an event occurs, such as when a user clicks an HTML element, moves the mouse, or submits a form.
When an event occurs on a target element, a handler function is executed.
Common HTML events include: 

 

NOTE!
Corresponding events can be added to HTML elements as attributes. For example:<p onclick=”someFunc()”>some text</p>
 


Handling Events
 

Let’s display an alert popup when the user clicks a specified button:

<button onclick=show()>Click Me</button>
<script>
function show() {
  alert(“Hi there”);
}
</script> 

 

Event handlers can be assigned to elements.
For example: 

var x = document.getElementById(“demo”);
x.onclick = function () {
  document.body.innerHTML = Date();

 

NOTE!
You can attach events to almost all HTML elements.

Events
 

The onload and onunload events are triggered when the user enters or leaves the page. These can be useful when performing actions after the page is loaded.

<body onload=doSomething()

 

Similarly, the window.onload event can be used to run code after the whole page is loaded.

window.onload = function() {
   //some code

 

The onchange event is mostly used on textboxes. The event handler gets called when the text inside the textbox changes and focus is lost from the element.
For example:

<input type=“text” id=“name” onchange=change()>
<script>
function change() {
var x = document.getElementById(“name”);
x.value= x.value.toUpperCase();
}
</script> 

 

NOTE!
It’s important to understand events, because they are an essential part of dynamic web pages.

Event Listeners
 

The addEventListener() method attaches an event handler to an element without overwriting existing event handlers. You can add many event handlers to one element.
You can also add many event handlers of the same type to one element, i.e., two “click” events.

element.addEventListener(event, function, useCapture); 

 

The first parameter is the event’s type (like “click” or “mousedown”).
The second parameter is the function we want to call when the event occurs.
The third parameter is a Boolean value specifying whether to use event bubbling or event capturing. This parameter is optional, and will be described in the next lesson. 

NOTE!
Note that you don’t use the “on” prefix for this event; use “click” instead of “onclick”.

Example: 

element.addEventListener(“click”, myFunction);
element.addEventListener(“mouseover”, myFunction);

function myFunction() {
  alert(“Hello World!”);

 

This adds two event listeners to the element.
We can remove one of the listeners:

element.removeEventListener(“mouseover”, myFunction); 

 

Let’s create an event handler that removes itself after being executed:

<button id=“demo”>Start</button>

<script>
var btn = document.getElementById(“demo”);
btn.addEventListener(“click”, myFunction);

function myFunction() {
  alert(Math.random());
  btn.removeEventListener(“click”, myFunction);
}
</script> 

 

After clicking the button, an alert with a random number displays and the event listener is removed.

NOTE!
Internet Explorer version 8 and lower do not support the addEventListener() and removeEventListener() methods. However, you can use the document.attachEvent() method to attach event handlers in Internet Explorer.
 

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE JAVASCRIPT MAIN COURSE PAGE. 

JAVASCRIPT MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT