HTML Events Reference

Complete list of HTML event attributes with examples

About HTML Events

HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events. This reference covers all standard HTML5 event attributes with examples and usage information.

Mouse Events

Keyboard Events

Form Events

Drag Events

Media Events

Mouse Events

Event	Description	Example	Bubbles	Applies To
onclick	Occurs when the user clicks on an element	<button onclick="handleClick()">Click me</button>	Yes	All visible elements
ondblclick	Occurs when the user double-clicks on an element	<div ondblclick="handleDoubleClick()">Double click</div>	Yes	All visible elements
onmousedown	Occurs when the user presses a mouse button over an element	<div onmousedown="handleMouseDown()">Press</div>	Yes	All visible elements
onmouseup	Occurs when the user releases a mouse button over an element	<div onmouseup="handleMouseUp()">Release</div>	Yes	All visible elements
onmouseover	Occurs when the pointer is moved onto an element	<div onmouseover="handleMouseOver()">Hover</div>	Yes	All visible elements
onmouseout	Occurs when the pointer moves out of an element	<div onmouseout="handleMouseOut()">Out</div>	Yes	All visible elements
onmousemove	Occurs when the pointer moves while over an element	<div onmousemove="handleMouseMove(event)">Move</div>	Yes	All visible elements
oncontextmenu	Occurs when the user right-clicks on an element to open a context menu	<div oncontextmenu="handleContextMenu()">Right click</div>	Yes	All visible elements

Keyboard Events

Event	Description	Example	Bubbles	Applies To
onkeydown	Occurs when the user is pressing a key	<input onkeydown="handleKeyDown(event)">	Yes	Form elements, contenteditable
onkeyup	Occurs when the user releases a key	<input onkeyup="handleKeyUp(event)">	Yes	Form elements, contenteditable
onkeypress	Occurs when the user presses a key (deprecated, use onkeydown instead)	<input onkeypress="handleKeyPress(event)">	Yes	Form elements, contenteditable

Window Events

Event	Description	Example	Bubbles	Applies To
onload	Occurs when an object has loaded	<body onload="initPage()">	No	<body>, <frame>, <iframe>, <img>, <input type='image'>, <link>, <script>, <style>
onunload	Occurs once a page has unloaded	<body onunload="cleanUp()">	No	<body>
onresize	Occurs when the browser window is resized	<body onresize="handleResize()">	No	<body>
onscroll	Occurs when an element's scrollbar is being scrolled	<div onscroll="handleScroll()">Scrollable content</div>	No	Scrollable elements

Form Events

Event	Description	Example	Bubbles	Applies To
onchange	Occurs when the value of an element changes	<select onchange="handleChange(this.value)">	Yes	<input>, <select>, <textarea>
onfocus	Occurs when an element gets focus	<input onfocus="handleFocus()">	No	Form elements, links
onblur	Occurs when an element loses focus	<input onblur="validate(this)">	No	Form elements, links
oninput	Occurs when an element gets user input	<input oninput="handleInput(this.value)">	Yes	<input>, <textarea>
oninvalid	Occurs when an element is invalid	<input required oninvalid="handleInvalid(this)">	Yes	<input>
onreset	Occurs when a form is reset	<form onreset="handleReset()">	Yes	<form>
onselect	Occurs after some text has been selected in an element	<input onselect="handleSelect()">	Yes	<input>, <textarea>
onsubmit	Occurs when a form is submitted	<form onsubmit="return validateForm()">	Yes	<form>

Drag & Drop Events

Event	Description	Example	Bubbles	Applies To
ondrag	Occurs when an element is being dragged	<div draggable="true" ondrag="handleDrag(event)">Drag me</div>	Yes	Draggable elements
ondragstart	Occurs when the user starts to drag an element	<div draggable="true" ondragstart="handleDragStart(event)">	Yes	Draggable elements
ondragend	Occurs when the user has finished dragging an element	<div draggable="true" ondragend="handleDragEnd(event)">	Yes	Draggable elements
ondragenter	Occurs when the dragged element enters the drop target	<div ondragenter="handleDragEnter(event)">Drop here</div>	Yes	All elements
ondragleave	Occurs when the dragged element leaves the drop target	<div ondragleave="handleDragLeave(event)">	Yes	All elements
ondragover	Occurs when the dragged element is over the drop target	<div ondragover="handleDragOver(event)">	Yes	All elements
ondrop	Occurs when the dragged element is dropped on the drop target	<div ondrop="handleDrop(event)">	Yes	All elements

Clipboard Events

Event	Description	Example	Bubbles	Applies To
oncopy	Occurs when the user copies the content of an element	<div oncopy="handleCopy(event)">Copy me</div>	Yes	All elements
oncut	Occurs when the user cuts the content of an element	<div oncut="handleCut(event)">Cut me</div>	Yes	All elements
onpaste	Occurs when the user pastes some content in an element	<div onpaste="handlePaste(event)">Paste here</div>	Yes	All elements

Media Events

Event	Description	Example	Bubbles	Applies To
onabort	Occurs when loading of a media is aborted	<img onabort="handleAbort()" src="image.jpg">	No	<img>, <object>
oncanplay	Occurs when the browser can start playing the media	<video oncanplay="handleCanPlay()">	No	<audio>, <video>
oncanplaythrough	Occurs when the browser can play through the media without stopping	<video oncanplaythrough="handleCanPlayThrough()">	No	<audio>, <video>
ondurationchange	Occurs when the duration of the media changes	<video ondurationchange="handleDurationChange()">	No	<audio>, <video>
onended	Occurs when the media has reached the end	<audio onended="handleEnded()">	No	<audio>, <video>
onerror	Occurs when an error occurs during loading of a media file	<img onerror="handleError()" src="missing.jpg">	No	<img>, <audio>, <video>, <script>, <style>, <link>
onloadeddata	Occurs when media data is loaded	<video onloadeddata="handleLoadedData()">	No	<audio>, <video>
onloadedmetadata	Occurs when metadata (like dimensions and duration) are loaded	<video onloadedmetadata="handleLoadedMetadata()">	No	<audio>, <video>
onloadstart	Occurs when the browser starts looking for the media	<video onloadstart="handleLoadStart()">	No	<audio>, <video>
onpause	Occurs when the media is paused	<video onpause="handlePause()">	No	<audio>, <video>
onplay	Occurs when the media is ready to start playing	<video onplay="handlePlay()">	No	<audio>, <video>
onplaying	Occurs when the media has started playing	<video onplaying="handlePlaying()">	No	<audio>, <video>
onprogress	Occurs when the browser is downloading the media	<video onprogress="handleProgress()">	No	<audio>, <video>
onratechange	Occurs when the playing speed of the media changes	<video onratechange="handleRateChange()">	No	<audio>, <video>
onseeked	Occurs when the seeking attribute is set to false	<video onseeked="handleSeeked()">	No	<audio>, <video>
onseeking	Occurs when the seeking attribute is set to true	<video onseeking="handleSeeking()">	No	<audio>, <video>
onstalled	Occurs when the browser is unable to fetch media data	<video onstalled="handleStalled()">	No	<audio>, <video>
onsuspend	Occurs when the browser is intentionally not loading media data	<video onsuspend="handleSuspend()">	No	<audio>, <video>
ontimeupdate	Occurs when the playing position has changed	<video ontimeupdate="handleTimeUpdate()">	No	<audio>, <video>
onvolumechange	Occurs when the volume is changed	<video onvolumechange="handleVolumeChange()">	No	<audio>, <video>
onwaiting	Occurs when the media has paused but is expected to resume	<video onwaiting="handleWaiting()">	No	<audio>, <video>

HTML Event Best Practices

Do's:

Use event delegation for dynamic elements
Prefer addEventListener over inline event handlers
Remove event listeners when no longer needed
Use passive event listeners for scroll events
Consider accessibility when handling keyboard events
Prevent default behavior only when necessary
Use event.preventDefault() instead of return false

Don'ts:

Don't use inline JavaScript in production code
Avoid attaching too many event listeners to the document
Don't block the main thread with heavy event handlers
Avoid using deprecated events like onkeypress
Don't rely only on mouse events (consider touch devices)
Avoid nesting too many event handlers
Don't forget to remove event listeners on component unmount

Try Our HTML Events Editor

Experiment with HTML events in our interactive editor:

Test different event handlers
See how events work in real-time
Practice event delegation
Experiment with drag and drop

<!DOCTYPE html>
<html>
<body>
  <!-- Mouse event example -->
  <button onclick="handleClick()">Click me</button>
  
  <!-- Keyboard event example -->
  <input onkeydown="handleKeyPress(event)">
  
  <!-- Form event example -->
  <form onsubmit="return validateForm()">
    <input onfocus="handleFocus()" onblur="handleBlur()">
    <button type="submit">Submit</button>
  </form>
  
  <!-- Modern event listener -->
  <script>
    document.getElementById('myBtn').addEventListener('click', function() {
      alert('Button clicked!');
    });
  </script>
</body>
</html>

< Previous (Attributes Reference)Congratulations! 🎉 >