Skip to Content

Advertisement

You (Level 0)
0% Complete
Last Badge Earned
None

JavaScript events are a response to a user's action. We have already used an event when we were explaining functions. Events are very common and you should invest time learning them. JavaScript is boring if you only use it when a page loads. However, JavaScript events allow you to execute a function full of code anytime that event is activated. An example of this in action is using events to validate form data before you send it to the server. If you have ever tried registering for an account and your username was already taken, you might have just saw a JavaScript event write code onto the page telling you your username was already taken.

Common Events:

  • A mouse click
  • Mousing over something
  • Submitting a form
  • Selecting an input field
  • A keystroke
  • Window scroll
Example <html>
<head>
<script type="text/javascript">
function eventExample()
{
alert(" It worked ");
}
</script>
</head>
<body>
<button type="button" onclick="eventExample()">Click Me!</button>
</body>
</html>

Our button has an onclick event that calls our function eventExample(). Our function calls the alert, which we see when we click the button.

Event Attributes:

Above we used our HTML elements to call the JavaScript functions. This is the best an easiest way to launch an event. Below is a list of all attributes you can add to an HTML element to trigger an event. However, most of these are not common, but every now and then; you will find yourself in a situation where they are perfect for the job. You should at least become comfortable with the onclick attribute because it is by far the most commonly used.

  • onclick - when the mouse is clicked
  • ondblclick - when the mouse is double-clicked
  • onmousedown - when the mouse is pressed down
  • onmouseup - when the mouse is released from being pressed
  • onmousemove - when the cursor is moved
  • onmouseout - when the cursor moves out of element
  • onmouseover - when the cursor moves over an element
  • onkeydown - when a key is pressed down
  • onkeypress - when a key is pressed and released
  • onkeyup - when a key is released from being pressed
  • onreset - when a form is reset
  • onsubmit - when a form is submitted
  • onload - when the user opens page
  • onunload - when the user leaves page
  • onfocus - when an element gains the focus
  • onblur - when an element loses the focus
  • onchange - when an element's value is changed

References

I've attached my favorite JavaScript and jQuery book. I would encourage you to read it as well.

Your code will execute in this window.



Let's explore some more tutorials or topics!

Next Tutorial Previous Tutorial

Advertisement

If you enjoyed this resource, support me by sharing this page with others.

Comment on

Show Comments
  • User

    Free April 16, 2015, 9:38 p.m.

    "An example of this in action is using events to validate form data before you send it to the server." Tipp: Never validate on client side only before you accept user inputs. You can easilie bypass the client side validation.

  • User

    chekkal Feb. 1, 2014, 5:21 p.m.

    It should also be noted that this style of attaching event to the element is what is called &quot;DOM Level 0 event Model&quot; which is not recommended for serious application because it mixes up structure (html) and behavior (JavaScript).

  • User

    Manni Sept. 19, 2013, 5:45 a.m.

    Hi, I just have a query.Difference between onkeypress and onkeyup .

  • User

    Prasanth Yerrapragada July 15, 2013, 5:18 a.m.

    There is a typing error for onclick event explanation in the line Our button has an onlick event that calls our function eventExample(). Our function calls the alert, which we see when we click the button.



Advertisement