- Common Event Listeners
- The addEventListener() method
- HTML event handlers attributes
- Frequently Asked Questions
Common Event Listeners
In a minute we’ll look at a variety of different events examples. The key thing to note is that anyone of the previously mentioned DOM Event objects can be used with any HTML element, e.g.
Onclick Event Handler Example
<button onclick="alert('Onclick Events')">On Click</button>
Onfocus Event Handler Example
The onfocus events is called when the element is focused on by the user.
<button onfocus="alert('Onfocus Events')">On Focus</button>
Onmouseout Event Handler Example
The onmouseout event handler is executed when the user’s mouse was over an element and then moves its focus off of it.
<button onmouseout="alert('Onmouseout Events')">On Mouseout</button>
Onmouseover Event Handler Example
The onmouseover events is called when the user’s mouse button is hovering over the element.
<button onmouseover="alert('Onmouseover Events')">On Mouseover</button>
Onkeyup Event Handler Example
The onkeyup event handler occurs when a key is pressed on the element with the events on it.
<button onkeyup="alert('Onkeyup Events')">On Keyup</button>
Onload Event Handler Example
<button onload="alert('Onload Events')">On Load</button>
Onchange Event Handler Example
When the value of the element changes, the event called onchange is executed which is an event handler that is very commonly with the following example.
<button onchange="alert('Onchange Events')">On Change</button>
The addEventListener() method
To use a custom event, you need to define an object that will receive the event. You then register the event handler function using addEventListener().
HTML event handlers attributes
An event handler is a function that runs when an event occurs. This function receives the event object as a parameter. The event object contains data about what happened. For example, the event object might contain the type of event (such as click) and the location where the event occurred (such as button1).
Frequently Asked Questions
What is an event on a website in JS?
An event is an action that is triggered when the user clicks or uses the mouse pointer to trigger an event handler.
To write an event in Javscript you create an HTML element and then apply the event type to that element, e.g. the button.
What is the event object JS?
The event object is an input type on the function that gets executed when the browser triggers an event handler.
What is event and function?
An event handler is the function that gets executed, for example, when the button is pressed or when the mouse moves over an object.
The term events and event handlers are interchangeable terms and are called when the mouse or the button interact with an element on the page.
Event objects is the HTML element that the user clicks or is interacting with on the document or the browser.
HTML events are actions that happen to HTML elements in the document.
What is meant by event handling?
Event handling happens, for example, when the mouse is pressed or the button is clicked.
There is a very long list of HTML DOM event handlers.
What is event handling explain types of event with example?
Event handlers are actions you can execute when the button is pressed or the mouse is clicked.
What is event Handler?
An event handler is when a function is executed by an action the user clicks on the webpage.