Global Event Attributes - Learn HTML

An event occurs when the browser reacts to a particular action — a user clicking a mouse button, pressing a key, playing a video, submitting a form, resizing the window, and so on. To respond to an event, you attach a handler: a piece of script (usually JavaScript) that runs when the event fires.

HTML lets you attach a handler directly in markup through an event attribute. Every attribute on this page begins with on followed by the event name (onclick, onkeydown, onsubmit, …). All of them were added in HTML5 and accept JavaScript code as their value:

<button onclick="alert('Clicked!')">Click me</button>

These event attributes are global — most can be placed on any element — but each one is meaningful only in the right context (form attributes on form controls, media attributes on <audio>/<video>, and so on).

Warning

Inline on* attributes are discouraged in modern code. They mix behavior into your markup, can't easily attach more than one handler, and are blocked by a strict Content Security Policy. Prefer addEventListener in a separate script, which keeps HTML and JavaScript separate and lets several handlers listen to the same event:

<button id="myBtn">Click me</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.addEventListener("click", () => {
    alert("Clicked!");
  });
</script>

The tables below list the event attributes by category. For a fuller treatment of how events work in the browser, see JavaScript Events and the related HTML Global Attributes.

Window Events Attributes

Window events are triggered for the window object. They are usually placed on the <body> tag, where the browser maps them onto window.

Attribute	Description
onafterprint	Fires after the document has been printed.
onbeforeprint	Fires before the document is printed.
onbeforeunload	Fires before the document is unloaded (e.g. the user is about to leave the page).
onblur	Fires when the window loses focus (the user switches to another tab or app).
onerror	Fires when an error occurs while loading the document or a resource.
onhashchange	Fires when the fragment (the part of the URL after `#`) changes.
onload	Fires when the whole page — images, CSS and scripts — has finished loading.
onmessage	Fires when the window receives a message (e.g. from `postMessage`).
onoffline	Fires when the browser loses its network connection.
ononline	Fires when the browser regains its network connection.
onpagehide	Fires when the user navigates away from the page.
onpageshow	Fires when the user navigates to the page.
onpopstate	Fires when the active history entry changes.
onresize	Fires when the window is resized.
onstorage	Fires when a web storage area (`localStorage`/`sessionStorage`) is updated.
onunload	Fires when the page is unloaded (the document is being removed).

<body onload="document.body.style.background = '#eef'">
  <p>This page changes its background colour once it has loaded.</p>
</body>

Form Events Attributes

An event that can occur within a form is called a form event. Form events happen when a user opens or closes a form, moves between forms, or works with data on a form.

Form event attributes can be applied to all HTML elements, but they are generally used with form controls such as <input>, <select> and <textarea>.

Attribute	Description
onblur	Fires when an element loses focus (the user tabs or clicks away from a control).
onchange	Fires when the value of a control has changed and the control loses focus.
oncontextmenu	Fires when the context (right-click) menu is opened on the element.
onfocus	Fires when an element gains focus.
oninput	Fires immediately every time the value of a control changes.
oninvalid	Fires when a submitted control fails constraint validation.
onreset	Fires when a form is reset to its initial values.
onsearch	Fires when the user searches in an `<input type="search">` field.
onselect	Fires when the user selects text inside an `<input>` or `<textarea>`.
onsubmit	Fires when a form is submitted.

<form onsubmit="alert('Submitting…'); return false;">
  <input type="text" name="name"
         onfocus="this.style.background = '#ffd'"
         onblur="this.style.background = ''"
         placeholder="Your name">
  <button type="submit">Send</button>
</form>

Returning false from onsubmit (or calling event.preventDefault() in JavaScript) stops the form from actually being sent — handy while you test.

Keyboard Events Attributes

The keyboard event attributes can be applied to all HTML elements.

Attribute	Description
onkeydown	Fires when a key is pressed down. Repeats while the key is held.
onkeypress	Fires when a character key is pressed. Deprecated — use `onkeydown` instead.
onkeyup	Fires when a pressed key is released.

<input type="text"
       onkeyup="document.getElementById('echo').textContent = this.value"
       placeholder="Type here">
<p>You typed: <span id="echo"></span></p>

Mouse Events Attributes

Mouse events occur when the mouse interacts with the HTML document. The attributes can be applied to all HTML elements.

Attribute	Description
onclick	Fires when the element is clicked.
ondblclick	Fires when the element is double-clicked.
ondrag	Fires repeatedly while an element is being dragged.
ondragend	Fires when a drag operation ends.
ondragenter	Fires when a dragged element enters a valid drop target.
ondragleave	Fires when a dragged element leaves a valid drop target.
ondragover	Fires repeatedly while a dragged element is over a valid drop target.
ondragstart	Fires when the user starts dragging an element.
ondrop	Fires when a dragged element is dropped on a valid drop target.
onmousedown	Fires when a mouse button is pressed over the element.
onmousemove	Fires whenever the pointer moves while it is over the element.
onmouseout	Fires when the pointer moves out of the element.
onmouseover	Fires when the pointer moves onto the element.
onmouseup	Fires when a mouse button is released over the element.
onmousewheel	Obsolete — use `onwheel` instead.
onscroll	Fires when an element's scrollbar is scrolled.
onwheel	Fires when the mouse wheel rolls up or down over the element.

<div onmousemove="this.textContent = event.offsetX + ', ' + event.offsetY"
     style="width:240px; height:120px; background:#eef; text-align:center; line-height:120px;">
  Move the mouse here
</div>

Clipboard Events Attributes

Attribute	Description
oncopy	Fires when the content of an element is copied.
oncut	Fires when the content of an element is cut.
onpaste	Fires when content is pasted into an element.

Media Events Attributes

Media events occur in media elements, such as video, image, and audio. The attributes can be applied to any HTML element, but they are generally used within audio, embed, img, object and video elements.

Attribute	Description
onabort	Fires when loading of the media is aborted.
oncanplay	Fires when the browser has buffered enough to start playing.
oncanplaythrough	Fires when the browser estimates it can play through without stopping to buffer.
oncuechange	Fires when the active cue of a text track (e.g. subtitles or captions) changes.
ondurationchange	Fires when the duration of the media changes.
onemptied	Fires when the media becomes empty (e.g. the connection is lost).
onended	Fires when playback reaches the end of the media.
onerror	Fires when an error occurs while loading the media.
onloadeddata	Fires when the current frame of media data has loaded.
onloadedmetadata	Fires when metadata (duration, dimensions, …) has loaded.
onloadstart	Fires when the browser starts loading the media.
onpause	Fires when playback is paused.
onplay	Fires when playback starts or resumes.
onplaying	Fires when playback is actually running (after buffering, for example).
onprogress	Fires periodically while the browser is loading the media.
onratechange	Fires when the playback rate changes (e.g. fast-forward).
onseeked	Fires when a seek operation ends.
onseeking	Fires when a seek operation starts.
onstalled	Fires when the browser is trying, but failing, to fetch media data.
onsuspend	Fires when media loading is intentionally paused.
ontimeupdate	Fires as the playback position changes during playback.
onvolumechange	Fires when the volume changes (including muting).
onwaiting	Fires when playback stops because the next frame isn't buffered yet.

Other Events

Attribute	Description
ontoggle	Fires when the user opens or closes a `<details>` element.

Info

Some attributes you may see in older references — onredo, onundo and onshow — were never part of standard HTML or are not supported by browsers, so they have been left out here.

Practice

What are global event attributes in HTML?

On* attributes, available on most HTML elements, that run JavaScript when a matching event fires.Attributes that send data to the server when an event occurs.Event handlers that only work on form elements.A replacement for addEventListener that browsers no longer support.