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="https://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="https://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="https://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 HTML5 tag defines marked text? (can be used to highlight parts of text)
<mark> <embed> <span>
<p>Free corses: <mark>coursesweb.net</mark> for Web Development.</p>
Which CSS pseudo-class adds a style to an element when the mouse is over it?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Click on the function which returns a string value that represents the number rounded to the x digits after the decimal point.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicate the PHP function which reads an entire file into an array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
JavaScript Events

Last accessed pages

  1. Get Duration of Audio /Video file before Upload (5913)
  2. Follow the mouse cursor with a DIV inside a Parent (2703)
  3. Register and show online users and visitors (23278)
  4. Node.js Move and Copy Directory (1127)
  5. SHA1 Encrypt data in JavaScript (8256)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (390)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (332)
  3. Register and show online users and visitors (302)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (234)
  5. Insert, Select and Update NULL value in MySQL (223)