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.
<!DOCTYPE html>
<html>
<body>
<h1 id="Heading" onclick="alert('You Clicked...!!')">Click Here</h1>
</body>
</html>
Browser ViewClick Here
Function Call
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.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function findSquare(i) {
alert("Square of a given number is : " + (i*i));
}
</script>
<input type="button" value="Click Me" onclick="findSquare (5)" />
</body>
</html>
Browser ViewEvent Listener
A function that is called in response to an event is called an event handler . You can then attach an event handler to an element for a specific event. When the user interacts with an element, the browser detects whether an event handler is registered for that event type on that element. Mouse events like click and mousemove are triggered on the majority of browsers and devices. However, in most smartphones, the mouseover event isn't triggered at all, because they can't detect a finger hovering over the phone. Some smartphones are adding sensors for that though, so more smartphones will detect mouseover in the future. The following program demonstrates how to capture different event types in Javascript .
<!DOCTYPE html>
<html>
<body>
<h1 id="h4" onmouseover="handle(event)">Mouse Over Here !!</h1>
<h1 id="h2" onclick="handle(event)">Click Here !!</h1>
<h1 id="h3" ondblclick="handle(event)">Double Click Here !!</h1>
<script type="text/javascript">
function handle(e) {
alert(e.type);
}
</script>
</body>
</html>
Browser ViewMouse Over Here !!
Click Here !!
Double Click Here !!
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.
document.addEventListener('click', myfunction, false);
example
<!DOCTYPE html>
<html>
<body>
<button id="eventBtn">Try it</button>
<p id="display"></p>
<script>
document.getElementById("eventBtn").addEventListener("click", myFunction);
function myFunction() {
document.getElementById("display").innerHTML = "Its Worked !!";
}
</script>
</body>
</html>
Browser ViewMore 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.
Related Topics