HTML DOM Events
Events are certain actions performed either by the end user or by the web browser itself. It can be triggered on any part of a document, whether by a user's interaction or by the browser. Events are normally used in combination with functions, and the function will not be executed before the event occurs. In order to make a web page more interactive, the script needs to be able to access the contents of the document and know when the user is interacting with it.
Dom Event Handlers
The Document Object Model event is a way of handling events and providing information about these events to the script. It provides a set of instructions for a standard way of determining what generated an event, what type of event it was, and when and where the event occurred in the document. Two common styles are: the generalized addEventListener() and a set of specific on-event handlers. The on-event handlers are a group of properties offered by DOM elements to help manage how that element reacts to events. These Event handlers have names starting with "on", so an event handler for the click event is called "onclick" and an event handler for the focus event is called "onfocus".
It is important to note that each object can have only one on-event handler for a given event. This is why addEventListener() is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.
Inline HTML Attributes
There are several ways you can attach an eventhandler . Adding specific attributes to a tag is the easiest way. Inline events are bound to an element by their attribute name, which starts with the "on" prefix. Not all event types may be bound to all elements. Here is a list of some common HTML events:
- onchange: An HTML element has been changed.
- onclick: The user clicks an HTML element.
- onmouseover: The user hovers the mouse over an HTML element.
- onmouseout: The user moves the mouse away from an HTML element.
- onkeydown: The user pushes a keyboard key down.
- onload: The browser has finished loading the page.
When the events occur, if you want to execute a bunch of code, you can put all codes together in a function and call for the execution.
Adding the addEventListener Method
You can also add event listeners using a method called addEventListener. The EventTarget.addEventListener() method adds the specified EventListener-compatible object to the list of event listeners for the specified event type on the EventTarget on which it is called.
More Event Models
The Document Object Model standard provides a large number of events and they can be grouped into six major categories:
- MouseEvents : click, mousedown, mouseup, mousemove, etc.
- KeyboardEvents : keypress, keydown, and keyup.
- HTMLEvents : load, error, resize, scroll, etc.
- Form events : select, change, submit, reset, focus, etc.
- UIEvents : focusin and focusout.
- MutationEvents : DOMNodeInserted, DOMAttrModified, etc.