An event occurs when a user interacts with a web page, such as when he clicks a link or button, enters text into an input or textarea, selects something in a select box, presses a key on the keyboard, moves the mouse pointer, submits a form, and so on. In some circumstances, such as the page load and unload events, the Browser can initiate the events.
An event handler can be assigned in a variety of ways. The simplest method is to use the special event-handler attributes to add them straight to the start tag of the HTML components. For example, we can use the onclick property to attach a click handler to a button element.
When a user clicks an element or moves the mouse pointer over an element, a mouse event is triggered. Here are some of the most essential mouse events, along with associated event handlers.
1. The Click Event (onclick)
When a user clicks on an element on a web page, the click event happens. These are frequently form components and connections. An onclick event handler can be used to handle a click event.
2. The Contextmenu Event (oncontextmenu)
When a user presses the right mouse button on an element to access a context menu, the contextmenu event happens.
3. The Mouseover Event (onmouseover)
When a user moves the mouse cursor over an element, the mouseover event happens. The onmouseover event handler may be used to handle the mouseover event.
4.The Mouseout Event (onmouseout)
When a user drags the mouse pointer outside of an element, the mouseout event happens. The onmouseout event handler may be used to handle the mouseout event.
When a user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some of the most essential keyboard events and event handlers.
1. The Keydown Event (onkeydown)
When a user hits a key on the keyboard, the keydown event happens. The onkeydown event handler can be used to handle the keydown event.
2. The Keyup Event (onkeyup)
When a user releases a key on the keyboard, the keyup event happens. The onkeyup event handler may be used to handle the keyup event.
3. The Keypress Event (onkeypress)
When a user presses a key on the keyboard that has a character value associated with it, the keypress event occurs. Ctrl, Shift, Alt, Esc, Arrow keys, and so on will not generate a keypress event, but will instead generate a keydown and keyup event. The onkeypress event handler can be used to handle the keypress event.
When a form control receives or loses attention, or when the user modifies a form control value, such as by putting text into a text input or selecting any item in a pick box, a form event is called. Here are some of the most significant form events and event handlers.
1. The Focus Event (onfocus)
When a user grants focus to an element on a web page, the focus event happens. The onfocus event handler may be used to handle the focus event.
2. The Blur Event (onblur)
When the user moves the attention away from a form element or a window, the blur event happens. The onblur event handler can be used to handle the blur event.
3. The Change Event (onchange)
When a user changes the value of a form element, the change event happens. The onchange event handler may be used to handle the change event.
4. The Submit Event (onsubmit)
When a user submits a form on a web page, the submit event happens. The onsubmit event handler may be used to handle the submit event.
Events are also generated after the website has loaded or when the user resizes the browser window, among other things. Here are some of the most essential document/window events, along with associated event handlers.
1. The Load Event (onload)
When a web page has finished loading in the web browser, the load event happens. The onload event handler may be used to handle the load event.
2. The Unload Event (onunload)
When a user departs the current web page, the unload event happens. The onunload event handler can be used to handle the unload event.
3. The Resize Event (onresize)
When a user resizes the browser window, the resize event happens. The resize event is also triggered when the browser window is reduced or maximized. The onresize event handler can be used to handle the resize event. When you resize the browser window to a new width and height, the following example will display an alert message.