Events are very important to client-side programming. Events are actions that can be detected by JavaScript, with them, you can add interactivity to web pages beyond clicking links and submitting forms.
If the visitor clicks on a button fires the "Click" event. If the mouse is over a link, it triggers a "mouseover" event.
Using events is a matter of executing a function in response to an action or input. These functions are known as event listeners or event handlers.
- You can add an "event handler" in two ways:

    1) As an attribute in the HTML tag.
<a href="http://coursesweb.net" id="lk1" title="Web Courses" onclick="alert(this.href); return false;">coursesweb.net</a></pre>
   
2) In the JS script, assign a function to an event attribute of a DOM element.
<a href="http://coursesweb.net" id="lk1" title="Web Courses" onclick="alert(this.href); return false;">coursesweb.net</a>
<script type="text/javascript"><!--
var link = document.getElementById("a");
function clickHandler() {
  alert(this.href);
  return false;
}
link.onclick = clickHandler;
--></script>

- These two examples have the same rezult. Create a link that displays an Alert with the value of "href" attribute. Becouse it's added "return false", the link will not open the page.
coursesweb.net

Events that can be used in JavaScript


Objects and events they can use

Examples with JS events

To understand better what the events do, study the fallowing exddamples.

  1) - onclick
<form action="" method="post">
    <input type="button" value="Click" onclick="alert('Hy there')" />
</form>
This example opens an Alert when the user click on the button.

  2) - onmouseover - onmouseout - onclick
<html>
<head>
<script type="text/javascript">
  function setfocus() {
    document.form2.camp.select();
  }
</script>
</head>
<body>
<br>
<a href="http://www.marplo.net"
  onmouseover="this.style.color='red';"
  onmouseout="alert('Alert opened with onmouseout')">
Click here to vizit MarPlo.net!
</a>
<form name="form2" action="" method="post">
  <input type="text" name="camp" size="30" value="some text" />
  <input type="button" value="Select" onclick="setfocus()" />
</form>
</body>
</html>
The HTML page resulting from this code shows the following results:
- When the mouse is positioned over the link ("Click here to visit MarPlo.net"), the color of the text is made red (due to the expression "this.style.color = 'red'" - "this" refers to the current object).
- After you move off the mouse, the event "onmouseout" opens an alert window.
- When you click the Select button, it selects the text in textbox.
Click here to vizit MarPlo.net!

  3) - onkeyup
<html>
<head>
<script type="text/javascript">
<!--
  function nextBox(elment,text) {
    if (text.length==elment.maxLength) {
      next=elment.tabIndex;
      if (next<document.form3.elements.length) {
        document.form3.elements[next].focus();
      }
    }
  }
//-->
</script>
</head>
<body>
- The cursor moves to the next box when is completed the entire field before.<br>
<form name="form3" method="post">
  <input size="4" tabindex="1" name="field" maxlength="4" onkeyup="nextBox(this,this.value)">
  <input size="4" tabindex="2" maxlength="4" onkeyup="nextBox(this,this.value)">
  <input size="4" tabindex="4" maxlength="4" onkeyup="nextBox(this,this.value)">
</form>
</body>
</html>
- This script uses the "onkeyup" event to move the cursor to another field after it was typed the last character allowed in the textbox.
- The cursor moves to the next box when is completed the entire field before.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
JavaScript Events

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (1141)
  2. Select in MySQL, Output results in HTML Table (66)
  3. Cake Shop (295)
  4. Mahjongg Alchemy (7934)
  5. Mouse Chain (428)

Popular pages this month

  1. Bubbles3 (3397)
  2. Butterfly Kyodai (3013)
  3. Zuma Deluxe (2212)
  4. Qwop (1433)
  5. Backgammon (1307)