We earlier talk about DOM selectors and Manipulation of DOM treenow we will talk about the Events in this post.

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

For an example if we click button or hover on a particular element even loading of page is also an event.

We will learn how to add Event and handle them in this post.

How to add Event Listener ?

we can add event in HTML.

In this method we just add an onClick event on button. which will make an alert.

we can also add a function in onClick event. so when user will click it. Function will call and browser will jump in JavaScript file.

Both are old methods to Event Handling. we want to keep our content (HTML), Decoration (CSS) and Script (JavaScript) Separate.

Before we start lets make a HTML page and Add some CSS.



Event Listener

The addEventListener() method attaches an event handler to the specified element.

we can use another method  where we can declare function outside.

e is the short var reference for event object which will be passed to event handlers.

The event object essentially has lot of interesting methods and properties that can be used in the event handlers.


MouseEvent ClientX property

Output the coordinates of the mouse pointer when the mouse button is clicked on an element.

MouseEvent OffSetX property

The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.

MouseEvent SpecialKey  property

The key property returns the identifier of the key that was pressed when a key event occured.

Some More MouseEvent

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

Some Key Events

KeyboardEvent objects describe a user interaction with the keyboard. Each event describes a key; the event type (keydown, keypress, or keyup) identifies what kind of activity was performed.

Some Input box or forum Events

Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):

Now we will make a project in our NEXT post on the basis of what we learn about DOM Manipulation in Vanilla JavaScript.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: