\u2013 click on an element; occurs when the element is clicked with the left mouse button (on devices with touch screens it occurs when touched).<\/p>\n
![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/sobytiya251124.jpg\")
<\/p>\n
Pop-up recording options<\/p>\n
\r\n<input value="Press me" onclick="alert('Click!')" type="button">\r\n<a href="#" onclick="alert('Example 1 worked'); return false;">Example 1<\/a>\r\n<\/pre>\nSequence of numbers starting from 1<\/p>\n
\r\n<script>\r\n function countRabbits() {\r\n for(let i=1; i<=3; i++) {\r\n alert("Rabbit number " + i);\r\n }\r\n }\r\n<\/script>\r\n<input type="button" onclick="countRabbits()" value="Counting rabbits!">\r\n<input id="elem" type="button" value="Press me!">\r\n<script>\r\n elem.onclick = function() {\r\n alert('Thanks');\r\n };\r\n<\/script>\r\n<input type="button" id="button" value="Button">\r\n<script>\r\n button.onclick = function() {\r\n alert('Click!');\r\n };\r\n<\/script>\r\n<\/pre>\nDisplays \u201cPress me\u201d in a pop-up window – the contents of the button<\/p>\n
\r\n<button onclick="alert(this.innerHTML)">Press me<\/button>\r\n<\/pre>\nMultiple popup event handlers<\/p>\n
\r\n<input id="elem" type="button" value="Press me"\/>\r\n<script>\r\n function handler1() {\r\n alert('Thanks!');\r\n };\r\n function handler2() {\r\n alert('Thanks again!');\r\n }\r\n elem.onclick = () => alert("Hello");\r\n elem.addEventListener("click", handler1); \/\/ Thanks!\r\n elem.addEventListener("click", handler2); \/\/ Thanks again!\r\n<\/script>\r\n<\/pre>\nGetting mouse coordinates from an event object<\/p>\n
\r\n<input type="button" value="Press me" id="elem">\r\n<script>\r\n elem.onclick = function(event) {\r\n \/\/ display event type, element and click coordinates\r\n alert(event.type + " \u043d\u0430 " + event.currentTarget);\r\n alert("Coordinates: " + event.clientX + ":" + event.clientY);\r\n };\r\n<\/script>\r\n<\/pre>\nChanging the background of an object<\/p>\n
\r\n<button>Change color<\/button>\r\n<script>\r\nconst btn = document.querySelector("button");\r\nfunction random(number) {\r\n return Math.floor(Math.random() * (number + 1));\r\n}\r\nbtn.onclick = function () {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n};\r\n<\/script>\r\n<button onclick="bgChange()">Press me<\/button>\r\n<script>\r\nfunction bgChange() {\r\n const rndCol =\r\n "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";\r\n document.body.style.backgroundColor = rndCol;\r\n}\r\n<\/script>\r\n<\/pre>\nChanging the background of an object div<\/p>\n
\r\n<div id='myDiv'>Color change element<\/div>\r\n<button onclick='changeColor()'>Change color<\/button>\r\n<script>\r\nfunction changeColor() {\r\n document.getElementById('myDiv').style.backgroundColor = 'red';\r\n}\r\n<\/script>\r\n<\/pre>\nChange link color<\/p>\n
\r\n<script>\r\nfunction ChangeColor(Element) {\r\n\tif (Element.style.color == 'green') Element.style.color = 'red';\r\n\telse Element.style.color = 'green';\r\n\treturn false;\r\n}\r\n<\/script>\r\n<a href="#" style="color: green;" onclick="return ChangeColor(this);">Change color<\/a>\r\n<\/pre>\nForm Validation<\/p>\n
\r\n<form>\r\n <div>\r\n <label for="fname">Name: <\/label>\r\n <input id="fname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <label for="lname">Last name: <\/label>\r\n <input id="lname" type="text" \/>\r\n <\/div>\r\n <div>\r\n <input id="submit" type="submit" \/>\r\n <\/div>\r\n<\/form>\r\n<p><\/p>\r\n<script>\r\nvar form = document.querySelector("form");\r\nvar fname = document.getElementById("fname");\r\nvar lname = document.getElementById("lname");\r\nvar submit = document.getElementById("submit");\r\nvar para = document.querySelector("p");\r\n\r\nform.onsubmit = function (e) {\r\n if (fname.value === "" || lname.value === "") {\r\n e.preventDefault();\r\n para.textContent = "Both fields must be filled in!";\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\nIntercepting events from CSS in video with the stopPropagation() function, which, when called in an object’s event handler, causes the handler to be executed, but the event does not bubble up further down the chain<\/p>\n
\r\n<button>Display video<\/button>\r\n<div class="hidden">\r\n <video>\r\n <source src="rabbit320.mp4" type="video\/mp4" \/>\r\n <source src="rabbit320.webm" type="video\/webm" \/>\r\n <p>\r\n Your browser doesn't support HTML5 video. Here is a\r\n <a href="rabbit320.mp4">link to the video<\/a> instead.\r\n <\/p>\r\n <\/video>\r\n<\/div>\r\ndiv { position: absolute;\r\n top: 50%;\r\n transform: translate(-50%,-50%);\r\n ... }\r\n.hidden {\r\n left: -50%;\r\n }\r\n.showing {\r\n left: 50%;\r\n }\r\n<script>\r\nvar videoBox = document.querySelector("div");\r\nvar video = document.querySelector("video");\r\nvideoBox.onclick = function () {\r\n videoBox.setAttribute("class", "hidden");\r\n};\r\nvideo.onclick = function () {\r\n video.play();\r\n};\r\nvideo.onclick = function (e) {\r\n e.stopPropagation();\r\n video.play();\r\n};\r\n<\/script>\r\n<p style="text-align: justify;">Show and hide text<\/p>\r\n<button onclick='toggleVisibility()'>Show\/Hide<\/button>\r\n<div id='hiddenDiv' style='display:none'>Hide text<\/div>\r\n<script>\r\nfunction toggleVisibility() {\r\n let element = document.getElementById('hiddenDiv');\r\n if (element.style.display === 'none') {\r\n element.style.display = 'block';\r\n } else {\r\n element.style.display = 'none';\r\n }\r\n}\r\n<\/script>\r\n<\/pre>\nLoading data via AJAX, to load data from the server without reloading the page<\/p>\n
\r\nfunction fetchData() {\r\n \/\/ Here's your code for the AJAX request\r\n}\r\n<onclick="fetchData()">Download data<\/button>\r\n<\/pre>\nChanging the link name from On to Off<\/p>\n
\r\n<script>\r\n\/\/wait for the page to load completely\r\nwindow.onload = function () {\r\n\r\n \/\/get the element identifier\r\n var a = document.getElementById('switch');\r\n \r\n \/\/hang an event on it\r\n a.onclick = function() {\r\n \/\/we perform some actions\r\n if (this.innerHTML=='On') this.innerHTML = 'Off';\r\n else this.innerHTML = 'On';\r\n \/\/prevent clicking on href link\r\n return false;\r\n }\r\n}\r\n<\/script>\r\n<a id="switch" href="#">On<\/a>\r\n<\/pre>\nonabort<\/span><\/h2>\n\u2013 interruption of playback. The onabort event occurs when the download of audio or video is interrupted. The onabort event occurs only when the download is aborted, not when an error occurs. Applies to elements audio, embed, img, object, video.<\/p>\n
Notification that video loading has been interrupted<\/p>\n
\r\n<video id="myVideo" onabort="alert('Video load aborted')">\r\n<\/pre>\nNotification that image loading has been interrupted<\/p>\n
\r\n<img id="myImage" src="example.jpg" onabort="imageAborted()">\r\n<script>\r\n function imageAborted() {\r\n alert("Image load was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nNotification that form submission has been interrupted<\/p>\n
\r\n<form id="myForm">\r\n <input type="text" placeholder="Enter your name">\r\n <input type="submit" value="Submit">\r\n<\/form>\r\n<script>\r\n var form = document.getElementById("myForm");\r\n form.addEventListener("abort", formAborted);\r\n\r\n function formAborted() {\r\n alert("Form submission was aborted by the user.");\r\n }\r\n<\/script>\r\n<\/pre>\nonafterprint \u2013 printing finished<\/span><\/h2>\nThe onafterprint event occurs when the page begins printing. The onafterprint event occurs when the print dialog is closed. The browser runs onafterprint and onbeforeprint so that notes, explanations and comments can be added to the printing process. Apply to body.<\/p>\n
\r\n<body onafterprint="myFunction()">\r\n<\/pre>\nonautocomplete \u2013 form autofill completed<\/span><\/h2>\nAn attribute with which the form can be filled out in one click – the browser will insert the values \u200b\u200binto the appropriate fields.<\/p>\n
\r\n<form>\r\n <label for="name">Name:<\/label>\r\n <input type="text" id="name" name="name" autocomplete="on">\r\n<\/form>\r\n<\/pre>\nonautocompleteerror \u2013 error when autofilling form<\/span><\/h2>\nonbeforeprint \u2013 preparation for printing<\/span><\/h2>\nonbeforeunload – document uploaded<\/span><\/h2>\nWhen a user leaves the page, we can ask him if he really wants to leave. Handling the beforeunload event is responsible for this. The event occurs before the unload page unload event. This event allows the web page to trigger a confirmation dialog asking the user if they really want to leave the page. If the user confirms, the browser navigates to a new page, otherwise it cancels the navigation. According to the specification, to display a confirmation dialog, the event handler must call preventDefault() on the event. Apply to body.<\/p>\n
\r\n<body onbeforeunload="return myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n return "Are you sure you want to close this page?...";\r\n}\r\n<\/script>\r\n<\/pre>\nonblur \u2013 loss of focus<\/span><\/h2>\nThe focus event is called when the element is focused, and the blur event is called when the element loses focus. focus\/blur support is guaranteed for elements that the visitor can interact with: button, input, select, a, etc. On the other hand, div, span, table formatting elements cannot receive focus by default. The elem.focus() method doesn’t work for them and the focus\/blur events never fire. This can be changed with the tabindex HTML attribute.<\/p>\n
Validation (checking) of entered data with an inscription under the form<\/p>\n
\r\n<style>\r\n .invalid { border-color: red; }\r\n #error { color: red }\r\n<\/style>\r\n<script>\r\ninput.onblur = function() {\r\n if (!input.value.includes('@')) { \/\/ not email\r\n input.classList.add('invalid');\r\n error.innerHTML = 'Please enter a correct email.'\r\n }\r\n};\r\ninput.onfocus = function() {\r\n if (this.classList.contains('invalid')) {\r\n \/\/ We remove the error indicator, because the user wants to re-enter data\r\n this.classList.remove('invalid');\r\n error.innerHTML = "";\r\n }\r\n};\r\n<\/script>\r\nYour email: <input type="email" id="input">\r\n<div id="error"><\/div>\r\n<\/pre>\nValidation (checking) of entered data by filling the form with color<\/p>\n
\r\n<style>\r\n .error {\r\n background: red;\r\n }\r\n<\/style>\r\n<script>\r\n input.onblur = function() {\r\n if (!this.value.includes('@')) { \/\/ \u043d\u0435 email\r\n \/\/ show error\r\n this.classList.add("error");\r\n \/\/ ...and return focus back\r\n input.focus();\r\n } else {\r\n this.classList.remove("error");\r\n }\r\n };\r\n<\/script>\r\nYour email: <input type="email" id="input">\r\n<input type="text" style="width:280px" placeholder="enter an incorrect email and click here">\r\n<\/pre>\nChanging form text CLICK HERE<\/p>\n
\r\n<input type="text" value="CLICK HERE" \/>\r\n<script>\r\nlet input = document.querySelector("input");\r\ninput.onblur = inputBlur;\r\ninput.onfocus = inputFocus;\r\nfunction inputBlur() {\r\n input.value = "Focus has been lost";\r\n}\r\nfunction inputFocus() {\r\n input.value = "Focus is here";\r\n}\r\n<\/script>\r\n<\/pre>\nChecking the shape with a frame outline<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ru">\r\n <head>\r\n <meta charset="utf-8">\r\n <title>Event onblur<\/title>\r\n <style>\r\n .warning {\r\n background-color: #ffe;\r\n outline: 1px solid #dc143c;\r\n }\r\n <\/style>\r\n <script>\r\n function warning(field) {\r\n if (field.value == '') field.classList.add('warning');\r\n else field.classList.remove('warning');\r\n }\r\n <\/script>\r\n <\/head> \r\n <body>\r\n <form> \r\n <p><input placeholder="Name" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Last name" onblur="warning(this)"><\/p>\r\n <p><input placeholder="Adress" onblur="warning(this)"><\/p>\r\n <\/form>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nBacklight when focusing without onblur<\/p>\n
\r\n<style>\r\n*!*input:focus*\/!* {\r\n background: #FA6;\r\n outline: none; \/* remove frame *\/\r\n}\r\n<\/style>\r\n<input type="text">\r\n<p>The focus selector will highlight an element when you focus on it and remove the border that the browser uses to highlight this element by default.<\/p>\r\n<\/pre>\nPlaceholder – a hint value inside an INPUT that automatically disappears when focused and exists until the visitor starts typing, without onblur<\/p>\n
\r\n<style>\r\n.my*!*::-webkit-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-moz-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n.my*!*::-ms-input-placeholder*\/!* {\r\n color: red;\r\n font-style: italic;\r\n}\r\n<\/style>\r\n<input class="my" type="text" placeholder="E-mail">\r\n<\/pre>\noncancel \u2013 cancel action<\/span><\/h2>\nCancel the current operation on the device. Used for asynchronous device control. If you perform this function before starting an operation, the operation will be canceled.<\/p>\n
\r\nDevice.Cancel ();\r\n<\/pre>\noncanplay<\/span><\/h2>\n– you can start playing the specified media file<\/p>\n
The oncanplay event occurs when the browser can start playing the specified audio\/video (when it is buffered enough to start). During the audio\/video loading process, the following events occur in this order: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Execute JavaScript when the video is ready to play:<\/p>\n
\r\n<video oncanplay="myFunction()">\r\n<\/pre>\noncanplaythrough<\/span><\/h2>\n– You can start playing the specified media file without having to stop for buffering. The oncanplaythrough event occurs when the browser judges that it can play the specified media without having to stop to buffer.<\/p>\n
Execute JavaScript when the video can be played in its entirety, without stopping:<\/p>\n
\r\n<video oncanplaythrough="myFunction()">\r\n<\/pre>\nonchange \u2013 change value<\/span><\/h2>\nThe onchange event occurs when the value of an element has been changed. For radio buttons and checkboxes, the onchange event occurs when the checked state changes. This event is similar to the oninput event. The difference is that the oninput event occurs immediately after the element’s value changes, while onchange occurs when the element loses focus after the content has changed. Another difference is that the onchange event also works on the select element. A handler for the onchange event, which fires when the element’s value has changed and it has lost focus. For AudioTrackList, VideoTrackList, and TextTrackList objects, this event occurs when one or more tracks are enabled\/disabled. Executes JavaScript code when the change event occurs; that is, if a Select, Text, or Textarea field loses focus and its value has been changed.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent<\/p>\n
Run JavaScript when the user changes the selected option of a select element:<\/p>\n
\r\n<select onchange="myFunction()">\r\n<\/pre>\nHere userName is a text field. If the user changes the text and leaves the field, the onChange handler calls the checkValue function to confirm that userName is valid:<\/p>\n
\r\n<INPUT TYPE="text" VALUE="" NAME="userName" onChange="checkValue(this.value)">\r\n<\/pre>\nonclose \u2013 closing something<\/span><\/h2>\nAn event handler for close events is sent to the window. The OnClose event occurs when the dialog box is closed. You can create an event handler for the OnClose event to perform specific actions when the dialog box is closed. A handler for the close event, which is raised on dialog elements when they are closed and on WebSocket elements when the connection is completed.<\/p>\n
oncontextmenu \u2013 opening context menu<\/span><\/h2>\nThe oncontextmenu event occurs when the user right-clicks an HTML element to open the context menu. Event handler property for the right-click event inside the window element. If the standard behavior is not prevented, the browser context menu is activated (There is a bug in IE8 that the context menu will not be activated if a contextmenu event handler is defined). The event will occur along with other right-click events and is independent of the element’s “contextmenu” attribute.<\/p>\n
Run JavaScript when user right clicks on div element with context menu:<\/p>\n
\r\n<div oncontextmenu="myFunction()" contextmenu="mymenu">\r\n<\/pre>\nThe code in this example changes the default behavior of the browser by disabling right-click.<\/p>\n
\r\ndocument.oncontextmenu = function () {\r\n \/\/Use object "document" instead of "window" for compatibility with IE8.\r\n return false;\r\n};\r\nwindow.addEventListener(\r\n "contextmenu",\r\n function (e) {\r\n \/\/ Not compatible with IE versions earlier than 9\r\n e.preventDefault();\r\n },\r\n false,\r\n);\r\n<\/pre>\noncopy \u2013 copy completed<\/span><\/h2>\nThe oncopy event occurs when the user copies the content of an element. The oncopy event also occurs when the user copies an element, such as an image created using the img element. The oncopy event is mainly used for “input” elements with type=”text”. Triggered when inserting\/copying\/deleting text. If you cancel the browser action in their handlers, then insertion\/copying\/deleting will not occur. The inserted value cannot be obtained: at the time the event is triggered, the element still has the old value, and the new one is not available.<\/p>\n
Execute JavaScript when copying some input element text:<\/p>\n
\r\n<input type="text" oncopy="myFunction()" value="Try copying this text">\r\n<\/pre>\noncuechange – changing the label in the track element<\/span><\/h2>\nA handler for the cuechange event, which fires when the TextTrack element changes the currently displayed timestamps (cue).<\/p>\n
oncut \u2013 content has been cut<\/span><\/h2>\nThe oncut event occurs when the user cuts the content of an element. Although the oncut event is supported by all HTML elements, it is not actually possible to cut content in, for example, a p element UNLESS the element has set contenteditable to “true”. The oncut event is mainly used for input elements with type=”text”.<\/p>\n
Execute JavaScript when cutting out some text in an input element:<\/p>\n
\r\n<input type="text" oncut="myFunction()" value="Try shortening this text">\r\n<\/pre>\nondblclick \u2013 double click on an element<\/span><\/h2>\nA handler for the dblclick event, which occurs when the left mouse button is double-clicked. The ondblclick event occurs when the user double-clicks an HTML element; that is, when the user double-clicks a form element or hyperlink.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – Represents the location of the cursor when the event occurs.
\nwhich – Represents 1 for a left mouse click and 3 for a right mouse click.
\nmodifiers – Contains a list of modifier keys pressed when the event occurs.<\/p>\n
Run JavaScript when double clicking on an element p:<\/p>\n
\r\n<p ondblclick="myFunction()">Double click me<\/p>\r\n<\/pre>\nHere the alert dialog is displayed if the user double clicks the button:<\/p>\n
\r\n<form>\r\n<INPUT Type="button" Value="Double Click Me!" onDblClick="alert('You just double clicked me!')">\r\n<\/form>\r\n<\/pre>\nondrag – dragging an element<\/span><\/h2>\nThe ondrag event occurs when an element or selected text is dragged. Drag and drop is a very common feature in HTML5. This is when you “grab” an object and drag it to another location.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\ndata – Returns an array of strings containing the URLs of the released objects.
\nmodifiers – Contains a list of modifier keys pressed when the event occurs.
\nscreenX, screenY – Represents the location of the cursor when the event occurs.<\/p>\n
Execute JavaScript when p element is dragged:<\/p>\n
\r\n<p draggable="true" ondrag="myFunction(event)">Drag me!<\/p>\r\n<\/pre>\nondragend – element dragging completed<\/span><\/h2>\nThe ondragend event occurs when the user has finished dragging an element or text selection.<\/p>\n
Run JavaScript when the user finishes dragging an element p:<\/p>\n
\r\n<p draggable="true" ondragend="myFunction(event)">Drag me!<\/p>\r\n<\/pre>\nondragenter<\/span><\/h2>\n– the element is dragged to a valid target zone. The ondragenter event occurs when the dragged element or selected text hits a valid delete target. The ondragenter and ondragleave events can help the user understand that the dragged element is about to enter or leave the drop target. This can be done, for example, by setting the background color when the dragged element hits the drag target, and clearing the color when the element is moved away from the target.<\/p>\n
Execute JavaScript when the dragged element hits the drag target:<\/p>\n
\r\n<div ondragenter="myFunction(event)"><\/div>\r\n<\/pre>\nondragexit<\/span><\/h2>\n\u2013 exit drag and drop mode. A handler for the dragexit event, which occurs when an element is no longer the target of an element that can accept it.<\/p>\n
ondragleave<\/span><\/h2>\n– element leaves a valid target. The ondragleave event occurs when a dragged element or text selection leaves a valid drop target.<\/p>\n
Execute JavaScript when the dragged element moves away from the drag target:<\/p>\n
\r\n<div ondragleave="myFunction(event)"><\/div>\r\n<\/pre>\nondragover<\/span><\/h2>\n– the element is dragged to a valid target point. The ondragover event occurs when a dragged element or selected text is dragged over a valid drop target. By default, data\/elements cannot be removed from other elements. To allow deletion, we must disable element processing by default. This is done by calling the event.preventDefault() method on the ondragover event.<\/p>\n
Execute JavaScript when an element is dragged on top of the drag target:<\/p>\n
\r\n<div ondragover="myFunction(event)"><\/div>\r\n<\/pre>\nondragstart<\/span><\/h2>\n\u2013 start of drag and drop operation. The ondragstart event occurs when the user starts dragging an element or selected text.<\/p>\n
Run JavaScript when the user starts dragging an element p:<\/p>\n
\r\n<p draggable="true" ondragstart="myFunction(event)">Drag me!<\/p>\r\n<\/pre>\nondrop<\/span><\/h2>\n\u2013 the dragged element is released. The ondrop event occurs when a dragged element or selected text is dropped onto a valid drop target.<\/p>\n
Execute JavaScript when a dragged element is removed in an element div:<\/p>\n
\r\n<div ondrop="myFunction(event)"><\/div>\r\n<\/pre>\nondurationchange<\/span><\/h2>\n– change in media length. The ondurationchange event occurs when the duration of the audio\/video changes. When loading audio\/video, the duration will change from “NaN” to the actual duration of the audio\/video. During the audio\/video loading process, the following events occur in this order: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough<\/p>\n
Run JavaScript when video length has changed:<\/p>\n
\r\n<video ondurationchange="myFunction()">\r\n<\/pre>\nonemptied<\/span><\/h2>\n\u2013 The file suddenly became unavailable. A handler for the emptied event, which occurs when the current playlist for an audio or video element is empty. Most often due to a connection failure.<\/p>\n
onended<\/span><\/h2>\n\u2013 playback is complete. The onended event occurs when the audio\/video reaches the end. This event is useful for messages like “thanks for listening”, “thanks for watching”, etc.<\/p>\n
Run JavaScript when audio ends:<\/p>\n
\r\n<audio onended="myFunction()">\r\n<\/pre>\nonerror<\/span><\/h2>\n\u2013 an error occurred. The onerror event is fired if an error occurs while loading an external file (such as a document or image). When used on audio\/video media, related events that occur when there is any disruption to the media loading process are: onabort, onemptied, onstalled, onsuspend.<\/p>\n
The error event occurs only when a JavaScript syntax error or runtime error occurs, not when a browser error occurs. For example, if you try to install window.location.href=’notThere.html’, and file notThere.html does not exist, the resulting error message will be a browser message; hence onError will not intercept this message. However, the error event will be triggered by an invalid URL in the IMG tag or invalid image data.<\/p>\n
window.onerror applies only to errors that occur in the window containing window.onerror, not to errors in other windows.<\/p>\n
onError may have the following meanings:
\n– null to suppress all JavaScript error dialogs. Setting window.onerror to null means that your users won’t see JavaScript errors caused by your code.
\n– The name of the function that handles errors (arguments are the message text, URL, and line number with the error). To suppress standard JavaScript error dialog, this function must return true. See Example 3 below.
\n– Variable or property containing null or a valid function reference.
\nIf you are writing an error handler function, you have three options for reporting errors:
\n– Track errors, but allow them to be reported via a standard JavaScript dialog (use an error handling function that returns false or does not return a value).
\n– Report errors yourself and disable the standard dialog (use an error handling function that returns true).
\n– Disable all error messages (set null in onError handler).<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent<\/p>\n
Run JavaScript if an error occurs while loading an image:<\/p>\n
\r\n<img src="image.gif" onerror="myFunction()">\r\n<\/pre>\nExample 1: Handler with Null value. In this IMG tag, the onError=”null” code suppresses error messages if an error occurs while loading the image.<\/p>\n
\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="null">\r\n<\/pre>\nExample 2: Null handler for a window. The onError handler for a window cannot be expressed via HTML. Therefore, you must enter everything necessary, in lower case, in the SCRIPT tag. The following code assigns null to the onError handler for the entire window, not just the Image object. This suppresses all JavaScript error messages, including those for the object Image.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2">\r\n<\/pre>\nHowever, if the Image object has its own special onError handler, that handler will be executed when an error occurs with the image. This occurs because window.onerror=null suppresses JavaScript error messages, not onError handlers.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror=null\r\nfunction myErrorFunc() {\r\n alert("The image had a nasty error.")\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageBad1" SRC="corrupt.gif" ALIGN="left" BORDER="2" onError="myErrorFunc()">\r\n<\/pre>\nIn the following example, window.onerror=null suppresses all error messages. Without onerror=null the code will cause a stack overflow error because there is infinite recursion.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = null;\r\nfunction testErrorFunction() {\r\n testErrorFunction();\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="testErrorFunction()">\r\ntest message\r\n<\/BODY>\r\n<\/pre>\nExample 3: Error handling function. The function myOnError is defined here, which catches JavaScript errors. This function uses three arrays to store the message, URL, and offending string for each error. If the user clicks the Display Error Report button, the displayErrors function opens a window and generates an error message in it. Note that this function returns true to suppress the standard JavaScript error dialog.<\/p>\n
\r\n<SCRIPT>\r\nwindow.onerror = myOnError\r\nmsgArray = new Array()\r\nurlArray = new Array()\r\nlnoArray = new Array()\r\nfunction myOnError(msg, url, lno) {\r\n msgArray[msgArray.length]\r\n= msg\r\n urlArray[urlArray.length] = url\r\n lnoArray[lnoArray.length]\r\n= lno\r\n return true\r\n}\r\nfunction displayErrors() {\r\n win2=window.open('','window2','scrollbars=yes')\r\n win2.document.writeln('<B>Error Report<\/B><P>')\r\n for (var i=0; i < msgArray.length; i++) {\r\n win2.document.writeln('<B>Error in file:<\/B> '\r\n+ urlArray[i] + '<BR>')\r\n win2.document.writeln('<B>Line\r\nnumber:<\/B> ' + lnoArray[i] + '<BR>')\r\n win2.document.writeln('<B>Message:<\/B> '\r\n+ msgArray[i] + '<P>')\r\n }\r\n win2.document.close()\r\n}\r\n<\/SCRIPT>\r\n<BODY onload="noSuchFunction()">\r\n<FORM>\r\n<BR><INPUT TYPE="button" VALUE="This button has a syntax error" onClick="alert('unterminated string')">\r\n<P><INPUT TYPE="button" VALUE="Display Error Report" onClick="displayErrors()">\r\n<\/FORM>\r\n<\/pre>\nThis example will give the output:<\/p>\n
\r\nError Report\r\nError in file:\r\nfile:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 34\r\nMessage: unterminated string literal\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number:\r\n34\r\nMessage: missing ) after argument list\r\nError in file: file:\/\/\/c%7C\/temp\/onerror.html\r\nLine number: 30\r\nMessage: noSuchFunction is not defined\r\n<\/pre>\nExample 4: An event handler calls a function. In the IMG tag, the onError handler calls the badImage function when errors occur while loading the image.<\/p>\n
\r\n<SCRIPT>\r\nfunction badImage(theImage) {\r\n alert('Error: ' + theImage.name + ' did not load properly.')\r\n}\r\n<\/SCRIPT>\r\n<FORM>\r\n<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">\r\n<\/FORM>\r\n<\/pre>\nonfocus<\/span><\/h2>\n\u2013 setting focus on an element. Executes JavaScript code when the focus event occurs; that is, if a window, frame, or set of frames receives focus or if a form element receives focus. The onfocus event occurs when an element receives focus. The onfocus event is often used in input fields. All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, \u0438 title<\/p>\n
Run JavaScript when the input field receives focus:<\/p>\n
\r\n<input type="text" onfocus="myFunction()">\r\n<\/pre>\nHere the onFocus handler is used on the valueField Textarea object to call the valueCheck function.<\/p>\n
\r\n<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">\r\n<\/pre>\nonfocusin<\/span><\/h2>\nThe onfocusin event occurs when an element receives focus. The onfocusin event is often used in input fields. All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, \u0438 title<\/p>\n
Run JavaScript when an input field is about to receive focus:<\/p>\n
\r\n<input type="text" onfocusin="myFunction()">\r\n<\/pre>\nonfocusout<\/span><\/h2>\nThe onfocusout event occurs when an element loses focus. The onfocusout event is often used in input fields. The onfocusout event is often used during form validation (when the user leaves the form field). All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, \u0438 title<\/p>\n
Run JavaScript when an input field is about to lose focus:<\/p>\n
\r\n<input type="text" onfocusout="myFunction()">\r\n<\/pre>\nonfullscreenchange<\/span><\/h2>\nThe fullscreenchange event occurs when an element is viewed in full screen mode. Use the element.requestFullscreen() method to view the element in full screen mode. Use the element.exitFullscreen() method to cancel full screen mode. Each browser requires a specific prefix (see parentheses): 45.0 (webkit), 11.0 (ms), 47.0 (moz), 5.1 (webkit), 15.0 (webkit)<\/p>\n
Display some text when viewing a page in full screen mode:<\/p>\n
\r\ndocument.addEventListener("fullscreenchange", function() {\r\n output.innerHTML = "fullscreenchange event fired!";\r\n});\r\n<\/pre>\nUse prefixes for cross-browser code:<\/p>\n
\r\n\/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 *\/\r\ndocument.addEventListener("fullscreenchange", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenchange", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenchange", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenchange", function() {\r\n ...\r\n});\r\n<\/pre>\nonfullscreenerror<\/span><\/h2>\nThe fullscreenerror event occurs when an element cannot be viewed in full screen mode, even though it was requested. Use the element.requestFullscreen() method to view the element in full screen mode. Use element.exitFullscreen() method to cancel full screen mode.<\/p>\n
Warning text if the element cannot be viewed in full screen mode:<\/p>\n
\r\ndocument.addEventListener("fullscreenerror", function() {\r\n alert("Fullscreen denied")\r\n});\r\n<\/pre>\nUse prefixes for cross-browser code:<\/p>\n
\r\n\/* \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 *\/\r\ndocument.addEventListener("fullscreenerror", function() {\r\n ...\r\n});\r\n\/* Firefox *\/\r\ndocument.addEventListener("mozfullscreenerror", function() {\r\n ...\r\n});\r\n\/* Chrome, Safari and Opera *\/\r\ndocument.addEventListener("webkitfullscreenerror", function() {\r\n ...\r\n});\r\n\/* IE \/ Edge *\/\r\ndocument.addEventListener("msfullscreenerror", function() {\r\n ...\r\n});\r\n<\/pre>\nonhashchange<\/span><\/h2>\n– changing the binding of part of the address. HTML tag support: body. The onhashchange event occurs when changes have been made to the anchor portion (starts with the ‘#’ character) of the current URL. An example of what the anchor part actually is: Let’s say the current URL is http:\/\/www.example.com\/test.htm#part2 – The anchor part of that URL would be #part2.
\nTo trigger this event you can:
\nChange the binding part by setting the location.hash or location.href property of the Location object
\nGo to the current page with another bookmark (use the back or forward buttons)
\nClick on the bookmark anchor link<\/p>\n
Execute JavaScript when part of the binding has changed:<\/p>\n
\r\n<body onhashchange="myFunction()">\r\n<\/pre>\nHow to assign an “onhashchange” event to a window object:<\/p>\n
\r\nwindow.onhashchange = myFunction;\r\n<\/pre>\noninput<\/span><\/h2>\n\u2013 start of data entry. The oninput event occurs when the element receives user input. This event occurs when the value of an input or textarea element changes. This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the element’s value changes, while onchange occurs when the element loses focus after its content has changed. Another difference is that the onchange event also works on select elements. HTML tag support: input type=”color”, input type=”date”, input type=”datetime”, input type=”email”, input type=”month”, input type=”number”, input type=”password”, input type=”range”, input type=”search”, input type=”tel”, input type=”text”, input type=”time”, input type=”url”, input type=”week” and textarea<\/p>\n
Execute JavaScript when the user writes something in the input field:<\/p>\n
\r\n<input type="text" oninput="myFunction()">\r\n<\/pre>\nRange Slider – How to dynamically update the slider value:<\/p>\n
\r\n<input type="range" oninput="myFunction(this.value)">\r\n<\/pre>\noninvalid<\/span><\/h2>\n\u2013 the item is damaged. The oninvalid event occurs when the input element being sent is invalid. For example, an input field is invalid if the required attribute is set and the field is empty (the required attribute specifies that the input field must be filled in before the form can be submitted). HTML tag support: input<\/p>\n
Warning about some text if the input field is invalid:<\/p>\n
\r\n<input type="text" oninvalid="alert('You must fill out the form!');" required>\r\n<\/pre>\nWarning text if input field contains less than 6 characters:<\/p>\n
\r\n\u0418\u043c\u044f: <input type="text" id="myInput" name="fname" pattern=".{6,}" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("Must contain 6 or more characters");\r\n}\r\n<\/script>\r\n<\/pre>\nWarning text if the input field contains a number that is less than 2 or greater than 5:<\/p>\n
\r\n\u041d\u043e\u043c\u0435\u0440: <input type="number" id="myInput" name="quantity" min="2" max="5" required>\r\n<script>\r\ndocument.getElementById("myInput").addEventListener("invalid", myFunction);\r\nfunction myFunction() {\r\n alert("You must choose a number from 2 to 5. You have chosen: " + this.value);\r\n}\r\n<\/script>\r\n<\/pre>\nonkeydown<\/span><\/h2>\n\u2013 key pressed. The onkeydown event occurs when the user presses a key (on the keyboard). The order of events associated with the onkeydown event is: onkeydown, onkeypress, onkeyup. All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, \u0438 title. The KeyDown event always occurs before the KeyPress event. If onKeyDown returns false, the KeyPress event is not raised. This prevents KeyPress events from occurring when the user holds down a key.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – For an over-window event, represents the location of the cursor at the time the event occurred. For an event on top of a form, represents the position of the form element.
\nwhich – ASCII-the value of the key pressed. To get the actual letter, number, or character of the key pressed, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt.
\nmodifiers – Contains a list of modifier keys pressed when the event occurs.<\/p>\n
Run JavaScript when the user presses a key:<\/p>\n
\r\n<input type="text" onkeydown="myFunction()">\r\n<\/pre>\nUse “onkeydown” with event “onkeyup”:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nHere the blockA function is used to calculate the characters entered from the keyboard into the textentry text box. If the user enters “a” or “A”, the function returns false and the text box does not display a value. In this function, the which property of the event assigns the ASCII value of the user’s key pressed to the keyChar variable. The if statement evaluates keyChar and returns false for the specified characters:<\/p>\n
\r\n<form name="main">\r\n <input name="textentry"\r\ntype=text size=10 maxlength=10>\r\n<\/form>\r\n<script>\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nreturn false;\r\n}\r\ndocument.main.textentry.onkeydown = blockA;\r\n<\/script>\r\n<\/pre>\nonkeypress<\/span><\/h2>\n– a key is pressed and then released. Executes JavaScript code when the KeyPress event occurs; that is, if the user holds down the key. The onkeypress event occurs when the user presses a key (on the keyboard). The onkeypress event does not fire for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user pressed a key, use the onkeydown event instead because it works for all keys. The order of events associated with the onkeydown event is: onkeydown, onkeypress, onkeyup. All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, \u0438 title. The KeyPress event fires immediately after the KeyDown event only when onKeyDown returns something other than false. The KeyPress event occurs repeatedly until the user releases the key. You can cancel individual KeyPress events.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – For an event, the overlay represents the location of the cursor at the time the event occurred. For an over-form event, represents the position of a form element.
\nwhich – ASCII-the value of the key pressed. To get the actual letter, number, or character of the key pressed, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt.
\nmodifiers – Contains a list of modifier keys pressed when the event occurs.<\/p>\n
Run JavaScript when the user presses a key:<\/p>\n
\r\n<input type="text" onkeypress="myFunction()">\r\n<\/pre>\nHere, the captureEvents method captures keyboard input, and the onKeyPress handler calls the blockA function to check for keypresses. If the “a” or “z” keys are pressed, the function scrolls the Navigator window.<\/p>\n
\r\nfunction blockA(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nif (keyChar == 'A' || keyChar == 'a')\r\nself.scrollBy(10,10);\r\nelse if(keyChar == 'Z' || keyChar == 'z')\r\nself.scrollBy(-10,-10);\r\nelse return false;\r\n}\r\ndocument.captureEvents(Event.KEYPRESS);\r\ndocument.onkeypress = blockA;\r\n<\/pre>\nonkeyup<\/span><\/h2>\n\u2013 key released. The onkeyup event occurs when the user releases a key (on the keyboard). The order of events associated with the onkeydown event is: onkeydown, onkeypress, onkeyup. All HTML elements EXCEPT: base, bdo, br, head, html, iframe, meta, param, script, style, and title.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – For an event, the overlay represents the location of the cursor at the time the event occurred. For an over-form event, represents the position of a form element.
\nwhich – ASCII-the value of the key pressed. To get the actual letter, number, or character of the key pressed, use the String.fromCharCode method. To set this property when the ASCII value is unknown, use the String.charCodeAt.
\nmodifiers – Contains a list of modifier keys pressed when the event occurs.<\/p>\n
Run JavaScript when the user releases the key:<\/p>\n
\r\n<input type="text" onkeyup="myFunction()">\r\n<\/pre>\nUse “onkeydown” with the “onkeyup” event:<\/p>\n
\r\n<input type="text" onkeydown="keydownFunction()" onkeyup="keyupFunction()">\r\n<\/pre>\nOutput the actual key that was issued inside the text field:<\/p>\n
\r\n\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0435 \u0438\u043c\u044f: <input type="text" id="fname" onkeyup="myFunction()">\r\n<script>\r\nfunction myFunction() {\r\n var x = document.getElementById("fname").value;\r\n document.getElementById("demo").innerHTML = x;\r\n}\r\n<\/script>\r\n<\/pre>\nHere, the captureEvents method captures keyboard input, and the onKeyUp handler calls the Key_Up function. The function’s alert method opens a dialog box to display the value of the key pressed:<\/p>\n
\r\nfunction Key_Up(e) {\r\nvar keyChar = String.fromCharCode(e.which);\r\nalert("Hold '" + keyChar +"' again for me, okay?");\r\n}\r\ndocument.onkeyup=Key_Up;\r\ndocument.captureEvents(Event.KEYUP);\r\n<\/pre>\nonload<\/span><\/h2>\n\u2013 item loaded. The onload event occurs when an object has been loaded. The onload event is most often used on the body element to execute a script after the web page has fully loaded all of its content (including images, script files, CSS files, etc.). The onload event can be used to check the visitor’s browser type and browser version and load the appropriate version of the web page based on the information received. The onload event can also be used to handle cookies.<\/p>\n
The onLoad handler is used in the BODY or FRAMESET tag, for example, BODY onLoad=”…”. For FRAMESET and FRAME tags: the onLoad handler event in the frame (placed in the BODY tag) occurs before the onLoad of the FRAMESET tag (placed in the FRAMESET tag). For images, the onLoad handler specifies the script to be executed when the image is output. Don’t confuse image output with image upload. You can load multiple images, then display them one at a time in the same Image object by setting the object’s src property. If you change the image output this way, onLoad is executed every time the image is output, not just when the images are loaded into memory.<\/p>\n
If you specify an onLoad handler for an Image object that outputs a looping GIF (multi-image GIF), each animation loop includes an onLoad handler, and the handler is executed once for each loop. You can use the onLoad handler to create a JavaScript animation by repeatedly setting the src property of the Image object.<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nwidth, height – For an event on top of a window, but not on top of a layer, these properties represent the window’s width and height.<\/p>\n
Run JavaScript immediately after page loads:<\/p>\n
\r\n<body onload="myFunction()">\r\n<\/pre>\nIn JavaScript, use the method addEventListener():<\/p>\n
\r\nobject.addEventListener("load", myScript);\r\n<\/pre>\nDisplay a message when the page loads. Here the onLoad handler prints a greeting after the page has loaded.<\/p>\n
\r\n<BODY onLoad="window.alert("Welcome to the Brave New World home page!")>\r\n<\/pre>\nDisplay a message when loading an image. Here two Image objects are created: one by the Image constructor, and the second by the IMG tag. Each Image object has an onLoad handler that calls the displayAlert function, which displays a message. For an image created by an IMG tag, the alert dialog displays the name of the image. For an image created by the Image constructor, alert displays a message without the image name. This occurs because the onLoad handler for the object created by the Image constructor must be the name of a function and it cannot specify parameters for the displayAlert function.<\/p>\n
\r\n<SCRIPT>\r\nimageA = new Image(50,50)\r\nimageA.onload=displayAlert\r\nimageA.src="cyanball.gif"\r\nfunction displayAlert(theImage) {\r\n if (theImage==null) {\r\n alert('An image loaded')\r\n }\r\n else alert(theImage.name + ' has been loaded.')\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="imageB" SRC="greenball.gif" ALIGN="top" onLoad=displayAlert(this)><BR>\r\n<\/pre>\nLooping GIF animation output. The image displayed here is birdie.gif, which is an animated GIF image. The onLoad handler increments the cycles variable, which tracks the number of animation cycles. To see the value of cycles, the user clicks the Count Loops button.<\/p>\n
\r\n<SCRIPT>\r\nvar cycles=0\r\n<\/SCRIPT>\r\n<IMG ALIGN="top" SRC="birdie.gif" BORDER=0 onLoad="++cycles">\r\n<INPUT TYPE="button" VALUE="Count Loops" onClick="alert('The animation has looped ' + cycles + ' times.')">\r\n<\/pre>\nChange the GIF animation displayed. This example uses the onLoad handler to rotate six GIF animations. Each animation is shown as a sequence of individual Image objects. When the document is loaded, !anim0.html is output. When this animation completes, the onLoad handler causes the next file, !anim1.html, to be loaded instead of the first file. After the last animation, !anim5.html, completes, the first file is displayed again. Note that the changeAnimation function does not call itself after changing the src property of the Image object. This happens because the src property is changed, the image’s onLoad handler is enabled, and the changeAnimation function is called.<\/p>\n
\r\n<SCRIPT>\r\nvar whichImage=0\r\nvar maxImages=5\r\nfunction changeAnimation(theImage) {\r\n ++whichImage\r\n if (whichImage <= maxImages) {\r\n var imageName="!anim" + whichImage + ".gif"\r\n theImage.src=imageName\r\n } else {\r\n whichImage=-1\r\n return\r\n }\r\n}\r\n<\/SCRIPT>\r\n<IMG NAME="changingAnimation" SRC="!anim0.gif" BORDER=0 ALIGN="top" onLoad="changeAnimation(this)">\r\n<\/pre>\nUse the onload event for the img element. “Image Loaded” notification immediately after the image is loaded:<\/p>\n
\r\n<img src="javascriptw3.gif" onload="loadImage()" width="100" height="132">\r\n<script>\r\nfunction loadImage() {\r\n alert("Image is loaded");\r\n}\r\n<\/script>\r\n<\/pre>\nUse onload event to handle cookies:<\/p>\n
\r\n<body onload="checkCookies()">\r\n<script>\r\nfunction checkCookies() {\r\n var text = "";\r\n if (navigator.cookieEnabled == true) {\r\n text = "Cookies enabled.";\r\n } else {\r\n text = "Cookies are not enabled.";\r\n }\r\n document.getElementById("demo").innerHTML = text;\r\n}\r\n<\/script>\r\n<\/pre>\nonloadeddata<\/span><\/h2>\n\u2013 file data loaded. Handler for the loadeddata event, which occurs when the audio\/video can already be played at the current position, but media data continues to be loaded. The onloadeddata event occurs when the media frame is loaded, but does not guarantee that enough data is available to begin playback. The onloadeddata event occurs after onloadedmetadata and before oncanplay.<\/p>\n
When loading media, 7 events occur in the following order:
\n1. onloadstart
\n2. ondurationchange
\n3. onloadedmetadata
\n4. onloadeddata
\n5. onprogress
\n6. oncanplay
\n7. oncanplaythrough<\/p>\n
Execute JavaScript when data is available for the current frame (for video):<\/p>\n
\r\n<video onloadeddata="myFunction()">\r\n<\/pre>\nExecute JavaScript when data is available for the current frame (for audio):<\/p>\n
\r\n<audio onloadeddata="myFunction()">\r\n<\/pre>\nonloadedmetadata<\/span><\/h2>\n\u2013 file metadata loaded. Handler for the loadedmetadata event, which occurs when metadata (duration, frame dimensions (for video) and track text) for the specified audio\/video file has been loaded. The onloadedmetadata event occurs when metadata for the media has been loaded.<\/p>\n
Metadata for audio or video consists of:
\nDuration
\nDimensions (video)
\nTracks<\/p>\n
Run JavaScript when loading video metadata:<\/p>\n
\r\n<video onloadedmetadata="myFunction()">\r\n<\/pre>\n\u0412 JavaScript:<\/p>\n
\r\nobject.onloadedmetadata = function(){myScript};\r\n<\/pre>\nIn JavaScript, use the method addEventListener():<\/p>\n
\r\nobject.addEventListener("loadedmetadata", myScript);\r\n<\/pre>\nonloadstart<\/span><\/h2>\n\u2013 start loading the element. Handler for the loadstart event, which occurs when the process of loading an audio\/video file begins.<\/p>\n
onmessage<\/span><\/h2>\n– message appears. The onmessage event occurs when a message is received through an event source. The event object for the onmessage event supports the following properties:
\ndata – Contains the actual message
\norigin \u2014 URL of the document that raised the event.
\nLastEventId \u2014 ID of the last message seen in the event stream.
\nRelated events:
\nonopen – occurs when a connection to the server is open.
\nonerror – Occurs when a problem occurs<\/p>\n
Create a new EventSource object and specify the URL of the page that sends the updates. Every time an update is received, the onmessage event occurs. When the onmessage event occurs, place the received data in a div element with id=”myDIV”:<\/p>\n
\r\nvar source = new EventSource("demo_sse.php");\r\nsource.onmessage = function(event) {\r\n document.getElementById("myDIV").innerHTML += event.data + "<br>";\r\n};\r\n<\/pre>\nonmousedown<\/span><\/h2>\n\u2013 mouse button is pressed. Handler for the mousedown event, which occurs when the left mouse button is pressed. The difference with the click event is that click is a combination of the mousedown and mouseup events. Executes JavaScript code when the MouseDown event occurs; that is, when the user presses a mouse key. If onMouseDown returns false, the default action (entering drag mode, entering selection mode, or activating a hyperlink) is canceled. Activation is triggered by the MouseDown event on the hyperlink. If the link is activated, it changes color to indicate the new state. Default action varies: initiate drag, text selection, scroll or zoom (combined with wheel press when supported)<\/p>\n
The onmousedown event occurs when the user presses the mouse button over an HTML element. Order of events for left and middle mouse button:
\nonmousedown
\nonmouseup
\non click
\nOrder of events for the right mouse button:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY- The location of the cursor when the MouseDown event occurs.
\nwhich – Represents 1 for a left mouse click and 3 for a right mouse click.
\nmodifiers – Contains a list of modifier keys pressed when the MouseDown event occurred.<\/p>\n
Call a function when the mouse button is pressed over a paragraph:<\/p>\n
\r\n<p onmousedown="myFunction()">Click the text!<\/p>\r\n<\/pre>\nHere the user can move the image on the HTML page by dragging it with the mouse. Your HTML code defines an image and positions it in a layer called container1. In the JavaScript code, event handlers set the positioning properties of container1 when the user drags the image, creating an animation. The ID attribute of the P element that contains the image is set to container1, making container1 a unique identifier for the paragraph and the image. The STYLE tag creates a layer for container1 and positions it. The JavaScript code below defines the onMouseDown, onMouseUp, and onMouseMove handlers. Using style sheets, the image is initially defined and positioned like this:<\/p>\n
\r\n<HEAD>\r\n<STYLE type="text\/css">\r\n #container1 {\r\nposition:absolute; left:200; top:200}\r\n<\/STYLE>\r\n<\/HEAD>\r\n<BODY>\r\n<P ID="container1">\r\n<img src="backgrnd.gif" name="myImage" width=96 height=96>\r\n<\/P>\r\n<\/BODY>\r\n<\/pre>\nIn this code, the captureEvents method captures the MouseUp and MouseDown events. The DRAG_begindrag and DRAG_enddrag functions are called respectively to handle these events. If the user presses the left mouse button, the DRAG_begindrag function starts, capturing MouseMove events and telling the DRAG_drag function to handle them. It then assigns the value of the pageX property of the MouseDown event to the DRAG_lastX property, the value of the pageY property to the DRAG_lastY property, and true to the DRAG_dragging property. The DRAG_drag function evaluates DRAG_dragging to ensure that the MouseMove event was captured by the DRAG_begindrag function, then uses the moveBy method to position the object and assigns values \u200b\u200bto the DRAG_lastX and DRAG_lastY properties. When the user releases the left mouse button, the DRAG_enddrag function stops capturing MouseMove events. DRAG_enddrag then ensures that no other functions are called by setting onmousemove to Null and DRAG_dragging to false.<\/p>\n
\r\n<SCRIPT>\r\ncontainer1.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);\r\ncontainer1.onmousedown=DRAG_begindrag;\r\ncontainer1.onmouseup=DRAG_enddrag;\r\nvar DRAG_lastX, DRAG_lastY, DRAG_dragging;\r\nfunction DRAG_begindrag(e) {\r\nif (e.which == 1) {\r\nwindow.captureEvents(Event.MOUSEMOVE);\r\n window.onmousemove=DRAG_drag;\r\nDRAG_lastX=e.pageX;\r\nDRAG_lastY=e.pageY;\r\nDRAG_dragging=true;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Here's some work on handling right mouse clicks*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_enddrag(e) {\r\nif (e.which == 1) {\r\nwindow.releaseEvents(Event.MOUSEMOVE);\r\n window.onmousemove=null\r\nDRAG_dragging=false;\r\nreturn false;\r\n}\r\nelse {\r\n\/*Here's some work on handling right mouse clicks*\/\r\nreturn true;\r\n}\r\n}\r\nfunction DRAG_drag(e) {\r\nif (DRAG_dragging) {\r\n\/*This function is only called if MOUSEMOVE is captured*\/\r\nmoveBy(e.pageX-DRAG_lastX, e.pageY-DRAG_lastY);\r\nDRAG_lastX = e.pageX;\r\nDRAG_lastY = e.pageY;\r\nreturn false;\r\n}\r\nelse {\r\nreturn true;\r\n}\r\n}\r\n<\/SCRIPT>\r\n<\/pre>\nonmouseenter<\/span><\/h2>\n\u2013 The mouse pointer is over an element. A handler for the mouseenter event, which occurs when the mouse cursor enters the element’s area. Unlike mouseover, the mouseenter event does not bubble (“bubble”), that is, it does not occur if the mouse cursor hits a child element of the specified element. The onmouseenter event occurs when the mouse pointer enters an element. The onmouseenter event is often used in conjunction with the onmouseleave event, which occurs when the mouse pointer leaves an element. The onmouseenter event is similar to the onmouseover event. The difference is that the onmouseenter event does not bubble up (does not propagate up the document hierarchy).<\/p>\n
One mouseenter event is sent to each element of the hierarchy as they enter. Here 4 events are sent to the four elements of the hierarchy when the pointer reaches the text. A single mouseover event is sent to the deepest element of the DOM tree, then it bubbles up in the hierarchy until it is canceled by a handler or reaches the root. When there is a deep hierarchy, the number of mouseover events sent can be quite large and cause significant performance issues. In such cases, it is better to handle mouseenter events. When combined with the corresponding mouseleave event (which fires on an element when the mouse leaves the content area), the mouseenter event acts very similar to the CSS pseudo-class :hover.<\/p>\n
Call a function when you hover over an image:<\/p>\n
\r\n<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseenter = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseenter", myScript);\r\n<\/pre>\nThis example demonstrates the difference between the onmousemove, onmouseenter and mouseover events:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseenter="myEnterFunction()">\r\n <p id="demo2">I will demonstrate onmouseenter!<\/p>\r\n<\/div>\r\n<div onmouseover="myOverFunction()">\r\n <p id="demo3">I will demonstrate onmouseover!<\/p>\r\n<\/div>\r\n<\/pre>\nThe following trivial example uses the mouseenter event to change the border of a div element when the mouse enters its allocated space. It then adds an element to the list with event number mouseenter or mouseleave.<\/p>\n
\r\n<SCRIPT>\r\nvar enterEventCount = 0;\r\nvar leaveEventCount = 0;\r\nconst mouseTarget = document.getElementById("mouseTarget");\r\nconst unorderedList = document.getElementById("unorderedList");\r\nmouseTarget.addEventListener("mouseenter", (e) => {\r\n mouseTarget.style.border = "5px dotted orange";\r\n enterEventCount++;\r\n addListItem("This is mouseenter event " + enterEventCount + ".");\r\n});\r\nmouseTarget.addEventListener("mouseleave", (e) => {\r\n mouseTarget.style.border = "1px solid #333";\r\n leaveEventCount++;\r\n addListItem("This is mouseleave event " + leaveEventCount + ".");\r\n});\r\nfunction addListItem(text) {\r\n\/\/ Create a new text node using the provided text\r\n var newTextNode = document.createTextNode(text);\r\n \/\/ Create a new li element\r\n var newListItem = document.createElement("li");\r\n \/\/ Add a text node to the li element\r\n newListItem.appendChild(newTextNode);\r\n \/\/ Add the newly created list item to the list\r\n unorderedList.appendChild(newListItem);\r\n}\r\n<SCRIPT>\r\n<style>\r\n#mouseTarget {\r\n box-sizing: border-box;\r\n width: 15rem;\r\n border: 1px solid #333;\r\n}\r\n<\/style>\r\n<div id="mouseTarget">\r\n <ul id="unorderedList">\r\n <li>No events yet!<\/li>\r\n <\/ul>\r\n<\/div>\r\n<\/pre>\nonmouseleave<\/span><\/h2>\n\u2013 the mouse pointer has left the element. A handler for the mouseleave event, which occurs when the mouse cursor leaves the element’s area. Unlike mouseout, the mouseenter event does not bubble (“bubble”), that is, it does not occur if the mouse cursor hits a child element of the specified element. The onmouseleave event occurs when the mouse pointer leaves the element. The onmouseleave event is often used in conjunction with the onmouseenter event, which occurs when the mouse pointer enters an element. The onmouseleave event is similar to the onmouseout event. The difference is that the onmouseleave event does not bubble up (does not propagate up the document hierarchy).<\/p>\n
The mouseleave event fires when the cursor of a manipulator (usually a mouse) moves outside the bounds of an element. mouseleave and mouseout are similar, but differ in that mouseleave does not pop up, while mouseout does. This means that mouseleave fires when the cursor leaves the bounds of an element and all of its children, while mouseout fires when the cursor leaves the bounds of an element or one of its children (even if the cursor is still within the element).<\/p>\n
Call a function when the mouse pointer moves outside the image:<\/p>\n
\r\n<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nJavaScript:<\/p>\n
\r\nobject.onmouseleave = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mouseleave", myScript);\r\n<\/pre>\nThis example demonstrates the difference between the onmousemove, onmouseleave and onmouseout events:<\/p>\n
\r\n<div onmousemove="myMoveFunction()">\r\n <p id="demo1">I will demonstrate onmousemove!<\/p>\r\n<\/div>\r\n<div onmouseleave="myLeaveFunction()">\r\n <p id="demo2">I will demonstrate onmouseleave!<\/p>\r\n<\/div>\r\n<div onmouseout="myOutFunction()">\r\n <p id="demo3">I will demonstrate onmouseout!<\/p>\r\n<\/div>\r\n<\/pre>\nThe mouseout documentation has an example illustrating the difference between mouseout and mouseleave. The following example shows how to use mouseout to simulate the delegation principle of the mouseleave event.<\/p>\n
\r\n<ul id="test">\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 1-1<\/li>\r\n <li>item 1-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <ul class="leave-sensitive">\r\n <li>item 2-1<\/li>\r\n <li>item 2-2<\/li>\r\n <\/ul>\r\n <\/li>\r\n<\/ul>\r\n<script>\r\n var delegationSelector = ".leave-sensitive";\r\n document.getElementById("test").addEventListener(\r\n "mouseout",\r\n function (event) {\r\n var target = event.target,\r\n related = event.relatedTarget,\r\n match;\r\n \/\/ search for a parent node matching the delegation selector\r\n while (\r\n target &&\r\n target != document &&\r\n !(match = matches(target, delegationSelector))\r\n ) {\r\n target = target.parentNode;\r\n }\r\n\r\n \/\/ exit if no matching node has been found\r\n if (!match) {\r\n return;\r\n }\r\n \/\/ loop through the parent of the related target to make sure that it's not a child of the target\r\n while (related && related != target && related != document) {\r\n related = related.parentNode;\r\n }\r\n \/\/ exit if this is the case\r\n if (related == target) {\r\n return;\r\n }\r\n \/\/ the "delegated mouseleave" handler can now be executed\r\n \/\/ change the color of the text\r\n target.style.color = "orange";\r\n \/\/ reset the color after a small amount of time\r\n setTimeout(function () {\r\n target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n );\r\n \/\/ function used to check if a DOM element matches a given selector\r\n \/\/ the following code can be replaced by this IE8 compatible function: https:\/\/gist.github.com\/2851541\r\n function matches(elem, selector) {\r\n \/\/ the matchesSelector is prefixed in most (if not all) browsers\r\n return elem.matchesSelector(selector);\r\n }\r\n<\/script>\r\n<\/pre>\nonmousemove<\/span><\/h2>\n– The mouse pointer is moved over the element. Handler for the mousemove event, which occurs when the mouse pointer moves over an element.
\ntype – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – The location of the cursor at the moment the MouseMove event occurs.<\/p>\n
JavaScript:<\/p>\n
\r\nobject.onmousemove = function(){myScript};\r\nJavaScript, using the addEventListener() method:\r\nobject.addEventListener("mousemove", myScript);\r\n<\/pre>\nCall a function when you hover over a div element:<\/p>\n
\r\n<div onmousemove="myFunction()">Move the cursor over me<\/div>\r\n<\/pre>\nThe following example uses the mousedown, mousemove, and mouseup events to allow the user to draw on the HTML canvas. Its functionality is simple: the line thickness is set to 1 and the color is always black. When the page loads, the constants myPics and context are created to store a reference to the canvas and 2D context that we will use for drawing. Drawing begins when the mousedown event fires. We first store the x and y coordinates of the mouse pointer in x and y variables and then set isDrawing to true. When the mouse pointer moves across the page, the mousemove event is fired. If isDrawing is true, the event handler calls the drawLine function to draw a line from the stored x and y values \u200b\u200bto the current location. When the drawLine() function returns, we adjust the coordinates and then store them in x and y coordinates. The mouseup event draws the last line segment, sets x and y to 0, and stops further drawing by setting isDrawing to false.<\/p>\n
\r\n<script>\r\n\/\/ When true, moving the mouse draws on the canvas\r\nlet isDrawing = false;\r\nlet x = 0;\r\nlet y = 0;\r\nconst myPics = document.getElementById("myPics");\r\nconst context = myPics.getContext("2d");\r\n\/\/ event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.\r\n\/\/ Add the event listeners for mousedown, mousemove, and mouseup\r\nmyPics.addEventListener("mousedown", (e) => {\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n isDrawing = true;\r\n});\r\nmyPics.addEventListener("mousemove", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = e.offsetX;\r\n y = e.offsetY;\r\n }\r\n});\r\nwindow.addEventListener("mouseup", (e) => {\r\n if (isDrawing) {\r\n drawLine(context, x, y, e.offsetX, e.offsetY);\r\n x = 0;\r\n y = 0;\r\n isDrawing = false;\r\n }\r\n});\r\nfunction drawLine(context, x1, y1, x2, y2) {\r\n context.beginPath();\r\n context.strokeStyle = "black";\r\n context.lineWidth = 1;\r\n context.moveTo(x1, y1);\r\n context.lineTo(x2, y2);\r\n context.stroke();\r\n context.closePath();\r\n}\r\n<\/script>\r\n<style>\r\ncanvas {\r\n border: 1px solid black;\r\n width: 560px;\r\n height: 360px;\r\n}\r\n<\/style>\r\n<h1>Drawing with mouse events<\/h1>\r\n<canvas id="myPics" width="560" height="360"><\/canvas>\r\n<\/pre>\nonmouseout<\/span><\/h2>\n– the mouse pointer moves out of the element. A handler for the mouseout event, which occurs when the mouse pointer moves outside the bounds of an element. Executes JavaScript code when the MouseOut event occurs; that is, each time the mouse pointer leaves the area (in the client image map) or hyperlink. If the mouse pointer moves from one area of \u200b\u200bthe client image map to another, you will first receive onMouseOut for the first area, and then onMouseOver for the second area. Area tags that use onMouseOut are required to have an HREF attribute in the AREA tag. You must return true in the event handler if you want to set the status or defaultStatus properties using onMouseOver.<\/p>\n
The onmouseout event occurs when the mouse pointer moves outside of an element. The onmouseout event is often used in conjunction with the onmouseover event, which occurs when you hover over an element. The onmouseout event is similar to the onmouseleave event. The difference is that the onmouseleave event does not bubble up (does not propagate up the document hierarchy). <\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – The location of the cursor at the moment the MouseOut event occurs<\/p>\n
Call a function when the mouse pointer moves outside the image:<\/p>\n
\r\n<img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nThe following example illustrates the difference between the mouseout and mouseleave events. The mouseleave event is added to the ul to color the list purple whenever the mouse leaves the ul. mouseout is added to the list to color the target element orange when the mouse leaves it. When you try this you will find that mouseout is sent to individual list items and mouseleave is sent to the entire list, thanks to the element hierarchy and the fact that list items hide the base ul.<\/p>\n
\r\n<script>\r\nconst test = document.getElementById("test");\r\n\/\/ Briefly make the list purple when the mouse moves off the\r\n\/\/ <ul> element\r\ntest.addEventListener(\r\n "mouseleave",\r\n (event) => {\r\n \/\/ highlight the mouseleave target\r\n event.target.style.color = "purple";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 1000);\r\n },\r\n false,\r\n);\r\n\/\/ Briefly make an <li> orange when the mouse moves off of it\r\ntest.addEventListener(\r\n "mouseout",\r\n (event) => {\r\n \/\/ highlight the mouseout target\r\n event.target.style.color = "orange";\r\n\r\n \/\/ reset the color after a short delay\r\n setTimeout(() => {\r\n event.target.style.color = "";\r\n }, 500);\r\n },\r\n false,\r\n);\r\n<\/script>\r\n<ul id="test">\r\n <li>item 1<\/li>\r\n <li>item 2<\/li>\r\n <li>item 3<\/li>\r\n<\/ul>\r\n<\/pre>\nonmouseover<\/span><\/h2>\n– The mouse pointer moves over the element. A handler for the mouseover event, which occurs when the mouse cursor is hovered over an element. The onmouseover event occurs when the mouse pointer enters an element. The onmouseover event is often used in conjunction with the onmouseout event, which occurs when the mouse pointer leaves an element. The onmouseover event is similar to the onmouseenter event. The difference is that the onmouseenter event does not bubble up (does not propagate up the document hierarchy). The mouseover event is raised on an element when a pointing device (such as a mouse or trackpad) is used to move the cursor over the element or one of its children.<\/p>\n
Call a function when you hover over an image:<\/p>\n
\r\n<img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">\r\n<\/pre>\nBy default, the HREF value of an anchor is displayed in the status bar at the bottom of the browser when the user hovers the mouse over the anchor. In the following example, onMouseOver displays a special message “Click this if you dare.”<\/p>\n
\r\n<A HREF="http:\/\/home.netscape.com\/" onMouseOver="window.status='Click this if you dare!'; return true">Click me<\/A>\r\n<\/pre>\nonmouseup<\/span><\/h2>\n– the mouse button is released over the element. A handler for the mouseup event, which occurs when the mouse button on an element is released. If onMouseUp returns false, the default promotion is cancelled. For example, if onMouseUp returns false when a hyperlink is active, the link is not included. So, if MouseUp occurs when the hyperlink is inactive (perhaps in the case where onMouseDown returns false), the link is not included. Activation is caused by the MouseDown event on the link. If the link is active, it changes color to reflect the new state. The onmouseup event occurs when the mouse button is released over an element.<\/p>\n
The mouseup event is raised on an element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is inside it. Mouseup events are the opposite of mousedown events.<\/p>\n
Order of events for the left and middle mouse buttons:
\nonmousedown
\nonmouseup
\non click
\nOrder of events for the right mouse button:
\nonmousedown
\nonmouseup
\noncontextmenu<\/p>\n
type – Indicates the event type.
\ntarget – Indicates the object to which the event was originally sent.
\nlayerX, layerY, pageX, pageY, screenX, screenY – The location of the cursor at the moment the MouseUp event occurs.
\nwhich – Represents 1 for the left key and 3 for the right mouse key.
\nmodifiers – Contains a list of modifier keys pressed when the MouseUp event occurred.<\/p>\n
Call a function when the mouse button is released over a paragraph:<\/p>\n
\r\n<p onmouseup="mouseUp()">Click the text!<\/p>\r\n<\/pre>\nonmousewheel (onwheel)<\/span><\/h2>\n\u2013 the mouse wheel is used. A handler for the wheel event, which occurs when the mouse wheel is scrolled forward or backward on an element. The onwheel event occurs when the mouse wheel is hovered over an element. The onwheel event also occurs when the user scrolls the page using the touchpad. This event replaces the non-standard deprecated mouse wheel event. Don’t confuse the wheel event with the scroll event. The wheel event does not necessarily dispatch a scroll event. For example, the element may not be scrollable at all. Zoom actions using the wheel or trackpad also trigger wheel events. The scroll event is not necessarily fired by the wheel event. Elements can also be scrolled using the keyboard, dragging the scroll bar, or using JavaScript.<\/p>\n
Even if the wheel event triggers scrolling, the delta* values \u200b\u200bin the wheel event do not necessarily reflect the direction in which the content is scrolling. Therefore, do not rely on the delta* properties of the wheel event to get the scroll direction. Instead, detect changes in the target’s ScrollLeft and ScrollTop values \u200b\u200bin the scroll event.<\/p>\n
The Wheel event can be canceled. If the event is canceled, no scrolling or zooming occurs. This can cause performance issues because the browser has to wait for each wheel event to be processed before actually scrolling the content. This can be avoided by setting passive: true when calling addEventListener(), which may cause the browser to generate non-cancellable wheel events.<\/p>\n
When the user scrolls the mouse wheel over a div element, change its font size:<\/p>\n
\r\ndocument.getElementById("myDIV").addEventListener("wheel", myFunction);\r\nfunction myFunction() {\r\n this.style.fontSize = "35px";\r\n}\r\n<\/pre>\nThis example shows how to scale an element using the mouse wheel (or other pointing device).<\/p>\n
\r\n<script>\r\nfunction zoom(event) {\r\n event.preventDefault();\r\n scale += event.deltaY * -0.01;\r\n \/\/ Restrict scale\r\n scale = Math.min(Math.max(0.125, scale), 4);\r\n\r\n \/\/ Apply scale transform\r\n el.style.transform = `scale(${scale})`;\r\n}\r\nlet scale = 1;\r\nconst el = document.querySelector("div");\r\nel.onwheel = zoom;\r\n<\/script>\r\n<style>\r\nbody {\r\n min-height: 100vh;\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\ndiv {\r\n width: 105px;\r\n height: 105px;\r\n background: #cdf;\r\n padding: 5px;\r\n}\r\n<\/style>\r\n<div>Scale me with your mouse wheel.<\/div>\r\n<\/pre>\nonoffline<\/span><\/h2>\n\u2013 the browser is running in offline mode. The onoffline event occurs when the browser goes offline. The onoffline event is the opposite of the ononline event.<\/p>\n
Call the function when the browser goes offline:<\/p>\n
\r\n<body onoffline="myFunction()">\r\n<\/pre>\nononline<\/span><\/h2>\n\u2013 the browser is launched in online mode. The ononline event occurs when the browser starts going online. An online event is the opposite of an onoffline event.<\/p>\n
Call the function when the browser starts online:<\/p>\n
\r\n<body ononline="myFunction()">\r\n<\/pre>\nonpagehide<\/span><\/h2>\n– the user navigates away from the page. The onpagehide event occurs when the user leaves a web page. There are several ways to navigate away from a page. For example. by clicking on a link, refreshing the page, submitting a form, closing the browser window, etc. The onpagehide event is sometimes used instead of the onunload event because the onunload event causes the page to not be cached. To find out whether a page is loaded directly from the server or is cached, you can use the persisted property of the PageTransitionEvent object. This property returns true if the page is cached by the browser, false otherwise.<\/p>\n\n
Call the function when the user navigates away from the web page:<\/p>\n
\r\n<body onpagehide="myFunction()">\r\n<\/pre>\nonpageshow<\/span><\/h2>\n– the user navigates to the page. The onpageshow event occurs when the user navigates to a web page. The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page is first loaded. Additionally, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache. To find out whether a page is loaded directly from the server or is cached, you can use the persisted property of the PageTransitionEvent object. This property returns true if the page is cached by the browser, false otherwise<\/p>\n
Call the function when the user navigates to the web page:<\/p>\n
\r\n<body onpageshow="myFunction()">\r\n<\/pre>\nonpaste<\/span><\/h2>\n\u2013 Content has been inserted. The onpaste event occurs when the user pastes some content into an element. The onpaste event is most often used for input elements with type=”text”. The Clipboard API paste event is fired when the user initiates a “paste” action through the browser UI. If the cursor is in an editable context (for example, a textarea or an element with the contenteditable attribute set to true), then the default action is to paste the contents of the clipboard into the document at the cursor position. A handler for this event can access the contents of the clipboard by calling the getData() method on the clipboardData property of the event. To override the default behavior (for example, to paste different data or convert the contents of the clipboard), the event handler must override the default action using event.preventDefault() and then manually insert the desired data. You can create and dispatch a synthetic insert event, but this will not affect the content of the document. This event pops up, can be canceled and is composed. Used only for input fields.<\/p>\n
Call the function when text is inserted into an input element:<\/p>\n
\r\n<input type="text" onpaste="myFunction()" value="Paste something here">\r\n<\/pre>\nCall the function when text is inserted into the p element. (Note that contenteditable is set to “true”):<\/p>\n
\r\n<p contenteditable="true" onpaste="myFunction()">Try to paste something inside this paragraph.<\/p>\r\n<\/pre>\nExample<\/p>\n
\r\n<script>\r\nconst target = document.querySelector("div.target");\r\ntarget.addEventListener("paste", (event) => {\r\n event.preventDefault();\r\n let paste = (event.clipboardData || window.clipboardData).getData("text");\r\n paste = paste.toUpperCase();\r\n const selection = window.getSelection();\r\n if (!selection.rangeCount) return;\r\n selection.deleteFromDocument();\r\n selection.getRangeAt(0).insertNode(document.createTextNode(paste));\r\n selection.collapseToEnd();\r\n});\r\n<script>\r\n<div class="source" contenteditable="true">Copy text from this box.<\/div>\r\n<div class="target" contenteditable="true">And paste it into this one.<\/div>\r\n<\/pre>\nonpause<\/span><\/h2>\n\u2013 pause playback. A handler for the pause event, which occurs when audio\/video playback is paused by the user or software. The onpause event occurs when the audio\/video is paused. The onpause event also occurs when the audio\/video has reached the end.<\/p>\n
Call a function when the video has been paused:<\/p>\n
\r\n<video onpause="myFunction()">\r\n<\/pre>\nonplay<\/span><\/h2>\n\u2013 start playback. Handler for the play event, which occurs when playback of an audio\/video file has been started.<\/p>\n
Call the function when the video starts playing:<\/p>\n
\r\n<video onplay="myFunction()">\r\n<\/pre>\nonplaying<\/span><\/h2>\n\u2013 file playback. Handler for the playing event, which occurs when playback of an audio\/video file has started. The onplaying event occurs when audio\/video playback begins. The onplaying event also occurs when audio\/video resumes after being paused or buffered.<\/p>\n
Call a function when the video starts:<\/p>\n
\r\n<video onplaying="myFunction()">\r\n<\/pre>\nonprogress<\/span><\/h2>\n\u2013 getting file metadata. A handler for the progress event, which occurs when the specified audio\/video file is downloaded from the server. The onprogress event occurs when the browser loads audio or video.<\/p>\n
Call a function when loading a video:<\/p>\n
\r\n<video onprogress="myFunction()">\r\n<\/pre>\nonratechange<\/span><\/h2>\n– change playback speed. A handler for the ratechange event, which occurs when the audio\/video playback speed changes (for example, when the user switches to slow or fast playback mode). The onratechange event occurs when the media playback speed changes (for example, when the user switches to slow-motion or fast-motion playback mode). This event is raised by the playbackRate property of the Audio\/Video object, which sets or returns the current playback speed of the audio\/video.<\/p>\n
Call a function when the video playback speed changes:<\/p>\n
\r\n<video onratechange="myFunction()">\r\n<\/pre>\nonreset<\/span><\/h2>\n\u2013 Data reset completed. Handler for the reset event, which occurs when the form is cleared when the Reset button is clicked. Executes JavaScript code when the reset event occurs; that is, when the user restores the values \u200b\u200bof form elements (by clicking the Reset button).<\/p>\n
Call a function when the form is reset:<\/p>\n
\r\n<form onreset="myFunction()">\r\n Enter name: <input type="text">\r\n <input type="reset">\r\n<\/form>\r\n<\/pre>\n