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://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 attribute can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
}
JavaScript Events

Last accessed pages

  1. Get Lower, Higher, and Closest Number (1574)
  2. Mahjong Long (687)
  3. jQuery ajax() method (13416)
  4. SHA512 Encrypt hash in JavaScript (7775)
  5. Mahjong Games (17768)

Popular pages this month

  1. Qwop (3030)
  2. Drag Racer V3 (1516)
  3. Bubbles3 (727)
  4. Flash Games - Free online Games (677)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (665)