Hey reader👋 Hope you are doing well😊
In the last post we have talked about Document and Element interfaces of DOM. In this post we are going to discuss about some other interfaces of DOM.
So let's get started🔥
Event Interface
The Event interface represents an event which takes place on an EventTarget. An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task.
Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as <button>, <div>, <span> etc.) using EventTarget.addEventListener().
The addEventListener() method attaches an event handler to the specified element.
There are various events that can be performed on an element such as -:
click -> fired when button or any other clickable element is clicked.
blur -> fired when an element has lost focus.
focus -> fired when an element has gained focus.
mouseover -> fired when mouse pointer points to that element.
mouseout
transistionend -> fired when a CSS transistion has finished playing.
submit -> fired when a form is submitted.
There are more events that can be performed. But these are important ones.
Event Methods
-
event.preventDefault()-> It is used to prevent the default behaviour of an event. For example when a button is clicked the page is reloaded this can be prevented using this method.
There are more interfaces but these were important ones.
We can change style of HTML element using JS DOM -:
So this is it for this blog I hope you have understood it well. Please feel free to add if I have missed something.
Don't forget to follow me.
Thankyou🩵
Top comments (0)