Home » Tutorials » JavaScript » Events

Events

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



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Events". After Hours Programming. Accessed on October 25, 2024. https://www.afterhoursprogramming.com/tutorial/javascript/events/.

  • Stewart, Suzy. "Events". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/javascript/events/. Accessed 25 October, 2024.

  • Stewart, Suzy. Events. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/javascript/events/.



4 thoughts on “Events”

  1. “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.

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

  3. 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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.