JavaScript Events

JavaScript events are actions or occurrences that happen in the browser, such as a button being clicked, a page finishing loading, or an element being hovered over.

These events can be used to trigger JavaScript code to run, allowing you to create interactive and dynamic websites.

Some examples of common events include onclick, submit, onmouseover, onkeypress, and onload.

onchange Event

onchange is a JavaScript event that occurs when the value of an element (such as an input field or a select box) has been changed.

To use the onchange event, you can add it as an attribute to the HTML element you want to monitor for changes, and then specify the JavaScript function that should be called when the event occurs.

For example, if you have an input field with the id myInput, you can use the following code to call a function named myFunction when the value of the input field changes:

<input type="text" id="myInput" onchange="myFunction()">
<script>
  function myFunction() {
    alert("Input value has been changed");
  }
</script>

You can also use addEventListener() method to add an event listener to a DOM element, and this is the recommended way to use onchange event.

<input type="text" id="myInput">
<script>
  var input = document.getElementById("myInput");
  input.addEventListener("change", myFunction);

  function myFunction() {
    alert("Input value has been changed");
  }
</script>

It is worth noting that the onchange event will only fire when the element loses focus after the value has been changed.

onclick Event

onclick is a JavaScript event that occurs when an element, such as a button or a link, is clicked.

To use the onclick event, you can add it as an attribute to the HTML element you want to monitor for clicks, and then specify the JavaScript function that should be called when the event occurs.

For example, if you have a button with the id myButton, you can use the following code to call a function named myFunction when the button is clicked:

<button id="myButton" onclick="myFunction()">Click me</button>
<script>
  function myFunction() {
    alert("Button was clicked");
  }
</script>

Alternatively, you can use the addEventListener() method to add an event listener to a DOM element, and this is the recommended way to use onclick event.

<button id="myButton">Click me</button>
<script>
  var button = document.getElementById("myButton");
  button.addEventListener("click", myFunction);

  function myFunction() {
    alert("Button was clicked");
  }
</script>

In addition to the onclick event, there are many other events you can use to add interactivity to your website, such as onmouseover, onkeypress, and onload, among others.

onmouseover Event

onmouseover is a JavaScript event that occurs when a user moves their mouse cursor over a specific HTML element.

To use the onmouseover event, you can add it as an attribute to the HTML element you want to monitor for mouseover events, and then specify the JavaScript function that should be called when the event occurs.

For example, if you have a <div> element with the id myDiv, you can use the following code to call a function named myFunction when the mouse cursor is moved over the <div>:

<div id="myDiv" onmouseover="myFunction()">Hover over me</div>
<script>
  function myFunction() {
    alert("Mouse cursor is over the div");
  }
</script>

Alternatively, you can use the addEventListener() method to add an event listener to a DOM element, and this is the recommended way to use onmouseover event.

<div id="myDiv">Hover over me</div>
<script>
  var div = document.getElementById("myDiv");
  div.addEventListener("mouseover", myFunction);

  function myFunction() {
    alert("Mouse cursor is over the div");
  }
</script>

It's worth noting that you can also use the onmouseout event to detect when the cursor is moved out of an element.

onkeypress Event

onkeypress is a JavaScript event that occurs when a user presses a key on the keyboard while an HTML element is in focus.

To use the onkeypress event, you can add it as an attribute to the HTML element you want to monitor for key presses, and then specify the JavaScript function that should be called when the event occurs.

For example, if you have an input field with the id myInput, you can use the following code to call a function named myFunction when a key is pressed in the input field:

<input type="text" id="myInput" onkeypress="myFunction()">
<script>
  function myFunction() {
    alert("A key has been pressed");
  }
</script>

Alternatively, you can use the addEventListener() method to add an event listener to a DOM element, and this is the recommended way to use onkeypress event.

<input type="text" id="myInput">
<script>
  var input = document.getElementById("myInput");
  input.addEventListener("keypress", myFunction);

  function myFunction() {
    alert("A key has been pressed");
  }
</script>

It's worth noting that you can also use the onkeydown and onkeyup events to detect when a key is pressed and released respectively.

onkeypress event will not fire for certain keys such as the Tab or Shift keys, For that you can use onkeydown or onkeyup events.

submit Event

submit is a JavaScript event that occurs when a user submits an HTML form, typically by clicking a submit button or pressing the Enter key while a form input is in focus.

To use the submit event, you can add it as an attribute to the <form> element, and then specify the JavaScript function that should be called when the event occurs.

For example, if you have a form with the id myForm, you can use the following code to call a function named myFunction when the form is submitted:

<form id="myForm" onsubmit="myFunction()">
  <!-- form inputs here -->
  <input type="submit" value="Submit">
</form>
<script>
  function myFunction() {
    alert("Form has been submitted");
  }
</script>

Alternatively, you can use the addEventListener() method to add an event listener to a DOM element, and this is the recommended way to use submit event.

<form id="myForm">
  <!-- form inputs here -->
  <input type="submit" value="Submit">
</form>
<script>
  var form = document.getElementById("myForm");
  form.addEventListener("submit", myFunction);

  function myFunction(event) {
    event.preventDefault();
    alert("Form has been submitted");
  }
</script>

It's worth noting that, when the form is submitted, the default behavior is for the page to refresh and the form data to be sent to the server.

To prevent this, you can call the event.preventDefault() method inside the function that is called on submit to prevent the default behavior of the event and instead do whatever you want to do with the form data.

onload Event

onload is a JavaScript event that occurs when a web page has finished loading all of its resources, such as images and scripts.

To use the onload event, you can add it as an attribute to the <body> or window element, and then specify the JavaScript function that should be called when the event occurs.

For example, you can use the following code to call a function named myFunction when the page has finished loading:

<body onload="myFunction()">
  <!-- page content here -->
</body>
<script>
  function myFunction() {
    alert("Page has finished loading");
  }
</script>

Alternatively, you can use the addEventListener() method to add an event listener to the window object, and this is the recommended way to use onload event.

<body>
  <!-- page content here -->
</body>
<script>
  window.addEventListener("load", myFunction);

  function myFunction() {
    alert("Page has finished loading");
  }
</script>

It's worth noting that, you can also use the onDOMContentLoaded event, which will fire when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images and subframes to finish loading.

document.addEventListener("DOMContentLoaded", myFunction);

This event is a more efficient way to handle the initial load of a page, if you don't need to wait for all resources to be loaded.

In addition, you can also use $(document).ready() in Jquery to execute a function when the document is fully loaded, it is equivalent of onload and onDOMContentLoaded events.

$(document).ready(myFunction);

HTML DOM Events List

Here is a list of some common HTML DOM events:

  • onload: Fires when the browser finishes loading the page.
  • onunload: Fires when the user leaves the page.
  • onchange: Fires when the value of an element changes.
  • onclick: Fires when an element is clicked.
  • ondblclick: Fires when an element is double-clicked.
  • onmousedown: Fires when a mouse button is pressed down on an element.
  • onmouseup: Fires when a mouse button is released on an element.
  • onmouseover: Fires when the mouse cursor moves over an element.
  • onmouseout: Fires when the mouse cursor moves out of an element.
  • onmousemove: Fires when the mouse cursor is moved over an element.
  • onkeydown: Fires when a key is pressed down.
  • onkeyup: Fires when a key is released.
  • onkeypress: Fires when a key is pressed and released.
  • onfocus: Fires when an element receives focus.
  • onblur: Fires when an element loses focus.
  • onsubmit: Fires when a form is submitted.
  • onreset: Fires when a form is reset.
  • onselect: Fires when an element's text is selected.
  • onchange: Fires when the content of a field changes, after the field loses focus.
  • oninput : Fires when the value of an element changes, or the content of an element with the attribute contenteditable is modified.
  • oncut : Fires when the user cuts the content of an element.
  • oncopy : Fires when the user copies the content of an element.
  • onpaste : Fires when the user pastes some content in an element.
  • oncontextmenu : Fires when the right button of the mouse is clicked.
  • onwheel : Fires when the mouse wheel is rotated.
  • onanimationstart : Fires when an animation starts.
  • onanimationend : Fires when an animation ends.
  • onanimationiteration : Fires when an animation is repeated.
  • ontransitionend : Fires when a CSS transition has completed.
  • onpointerdown : Fires when the pointer is pressed on an element.
  • onpointerup : Fires when the pointer is released on an element.
  • onpointermove : Fires when the pointer is moved on an element.
  • onpointerover : Fires when the pointer is moved over an element.
  • onpointerout : Fires when the pointer is moved out of an element.
  • onpointercancel : Fires when a pointer is canceled.
  • onpointerleave : Fires when the pointer is moved out of an element.
  • onpointerenter : Fires when the pointer is moved over an element.

Please note that this list is not exhaustive, and there are other events that can be used depending on the specific needs of your project.

JS Basics