Events

HTML events are actions that trigger JavaScript code, such as clicks, key presses, or page loads, allowing for dynamic behavior and interactivity on web pages.

HTML Events Overview

HTML events represent user interactions or browser activities, such as mouse clicks, keyboard inputs, or page loads. These events can trigger JavaScript functions to handle user input. Examples include onclick, onmouseover, and onchange.

Using Inline Event Handlers in HTML

Inline event handlers embed JavaScript directly within HTML elements using attributes like onclick and onmouseover. These handlers trigger actions when specific events occur.

Syntax

index.html

<element event="handler">

Example

index.html

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

Explanation

When the button is clicked, the onclick event triggers the alert() function, displaying "Button clicked!"

Event Categories

Window Events

These events occur at the window level, often used with the <body> tag.

Attribute	Description
`onafterprint`	Fires after the document is printed
`onbeforeprint`	Fires before the document is printed
`onbeforeunload`	Fires when the document is about to be unloaded
`onerror`	Fires when an error occurs
`onhashchange`	Fires when the URL's anchor part changes
`onload`	Fires when the page loads
`onresize`	Fires when the browser window is resized
`onunload`	Fires when a page is unloaded

Form Events

Triggered by interactions within form elements.

Attribute	Description
`onblur`	Fires when an element loses focus
`onchange`	Fires when an element's value changes
`onfocus`	Fires when an element gains focus
`oninput`	Fires when the user inputs data
`oninvalid`	Fires when an input is invalid
`onreset`	Fires when a form reset occurs
`onsubmit`	Fires when a form is submitted

Keyboard Events

Attribute	Description
`onkeydown`	Fires when a key is pressed down
`onkeypress`	Deprecated - Use `onkeydown` instead
`onkeyup`	Fires when a key is released

Mouse Events

Attribute	Description
`onclick`	Fires on a mouse click
`ondblclick`	Fires on a double-click
`onmousedown`	Fires when the mouse button is pressed
`onmousemove`	Fires when the mouse moves
`onmouseout`	Fires when the mouse leaves an element
`onmouseover`	Fires when the mouse enters an element
`onmouseup`	Fires when a mouse button is released
`onwheel`	Fires when the mouse wheel scrolls

Drag-Drop Events

Attribute	Description
`ondrag`	Fires when an element is dragged
`ondragend`	Fires when a drag operation ends
`ondragenter`	Fires when a dragged element enters a drop target
`ondragleave`	Fires when a dragged element leaves a drop target
`ondragover`	Fires when a dragged element is over a drop target
`ondragstart`	Fires when dragging starts
`ondrop`	Fires when an element is dropped

Clipboard Events

Attribute	Description
`oncopy`	Fires when content is copied
`oncut`	Fires when content is cut
`onpaste`	Fires when content is pasted

Media Events

These events apply mainly to media elements like <audio>, <video>, and <img>.

Attribute	Description
`onabort`	Fires when media loading is aborted
`oncanplay`	Fires when media can start playing
`onended`	Fires when media playback ends
`onpause`	Fires when media is paused
`onplay`	Fires when media starts playing
`onvolumechange`	Fires when volume changes
`onwaiting`	Fires when buffering occurs

Conclusion

HTML events are crucial for enabling interactivity on web pages. They represent user actions or browser activities like clicks, key presses, or page loads, which can trigger JavaScript functions to handle the input. Events can be embedded directly into HTML elements using attributes such as ondblclick, onmouseover, and onchange.

Entities

HTML entities, derived from SGML, represent special characters using codes that begin with & and end with ;, ensuring correct display of symbols.

Emojis

Emojis, part of the UTF-8 character set, are used in HTML to incorporate expressive symbols and icons. They can be inserted using Unicode codes or emoji entities, such as 😀 for 😀, adding visual elements to text.