HTML | DOM touchcancel Event

HTML DOM onchange Event

Last Updated : 26 Nov, 2024

The HTML DOM onchange event occurs when the value of an element has been changed. It also works with radio buttons and checkboxes when the checked state has been changed. Note: This event is similar to the oninput event but the only difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus.

In HTML:

<element onchange="myScript">

html

<!DOCTYPE html>
<html lang="en">
<body>
 <select id="LangSelect" onchange="GFGfun()">
  <option value="c">C</option>
  <option value="java">JAVA</option>
  <option value="html">HTML</option>
  <option value="python">PYTHON</option>
 </select>

 <p id="demo"></p>

 <script>
  function GFGfun() {
   let x = document.getElementById("LangSelect").value;
   document.getElementById(
    "demo").innerHTML = "You selected: " + x;
  }
 </script>
</body>
</html>

In JavaScript:

object.onchange = function(){myScript};

html

<!DOCTYPE html>
<html lang="en">
<body>
 <input type="email" id="email">

 <script>
  document.getElementById(
   "email").onchange = function () {
    GFGfun()
   };

  function GFGfun() {
   let x = document.getElementById("email");
   x.value = x.value.toLowerCase();
  }
 </script>
</body>
</html>

In JavaScript, using the addEventListener() Method:

object.addEventListener("change", myScript);

html

<!DOCTYPE html>
<html lang="en">
<body>
 <input type="email" id="email">
 <script>
  document.getElementById(
   "email").addEventListener(
    "change", GFGfun);

  function GFGfun() {
   let x = document.getElementById("email");
   x.value = x.value.toLowerCase();
  }
 </script>
</body>
</html>

HTML | DOM touchcancel Event

V

Vijay Sirra

Improve

Article Tags :

Similar Reads

HTML | DOM onratechange Event

The DOM onratechange event occurs if the playing speed of the audio/video is changed. The playbackRate property is used to sets or returns the current playback speed of an audio/video. Supported Tags: <audio><video> Syntax: In HTML: <element onratechange="myScript">In JavaScript: o

HTML | DOM onvolumechange Event

The onvolumechange event in HTML DOM occurs when the media volume is changed. Use volume property to set/return the volume of the media.This event is invoked by: Volume increasing/decreasingMuting/unmuting the media player Supported Tags <audio><video> Syntax: In HTML: <element onvolu

HTML | DOM touchcancel Event

The touchcancel event is used to execute a script when the touch event gets interrupted. It is considered a good practice to include the touchcancel event to clean up the code if the devices interrupt a touch event at different actions.Supported Tags All HTML elements supported by this event. Suppor

HTML | DOM onmessage Event

The onmessage Event in HTML DOM used when an object has received some message through an event source. The event object for onmessage Event supports the following schemes: data: It contains the actual message present inside it.origin: It contains the URL of the document that invoked the event.lastEv

HTML DOM ondragend Event

The HTML DOM ondragend event occurs when a draggable element finishes dragging. There are some events that are used and occurred in the different stages of a drag-and-drop operation: ondragstart: occurs when dragging of an element started.ondrag: occurs while an element is dragging.ondragend: occurs

HTML DOM oncut Event

The HTML DOM oncut Event occurs when the content of an element is cut by the user. The oncut event is mostly used on elements with type="text". Supported Tags It supports all HTML elements. Syntax: In HTML: <element oncut="myScript"> In JavaScript: object.oncut = function(){myScript}; In JavaS

HTML DOM onpaste Event

The HTML DOM onpaste event occurs when some content is pasted in an element. this event works on every element like in <p> element if contenteditable set is true then we can paste content in <p> element. The HTML DOM onpaste event is mostly used in input element type="text". Supported Ta

HTML | DOM Storage Event

The Storage Event in HTML DOM is used to make change in the storage area in the context of another document. When there is modification in the storage area of the window, a storage event is sent to that window. Syntax: window.addEventListener("storage", script) Example: html <!DOCTYPE html>

HTML | DOM ontoggle Event

The ontoggle event in HTML DOM occurs when the <details> element user opens or closes by the user. The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. Supported tags <details> Syntax: In HTML: <elem

HTML DOM ononline Event

The DOM ononline event occurs on the online work of the browser. The ononline event is a conflict with the onoffline event. Note: navigator.onLine property is used to check the mode of the browser. Supported Tags <body> Syntax: In HTML: <element ononline="myScript">In JavaScript: object.