Events in javascript with example

JS events explained with examples

Events are actions that happen in a system. The system fires a signal when an event occurs and provides a mechanism to perform a task or activity automatically.

Example of event

hovering over an element, clicking, scrolling, etc. Each event has an event handler that executes a block of code when an event is fired. There are two types of events, Browser events, and Synthetic events. Browser events are built-in, predetermined, and are executed by the browser when an action occurs Examples of browser events are resize — When a browser window has resized this event it is triggered and the layout is adjusted. onmousemove — This event is fired when the mouse pointer is moved to calculate the new coordinate values of the mouse pointer. Synthetic events — Events created and dispatched by the programmer are called synthetic events. These are custom events. Synthetic events are created using the Event
constructor. The syntax for synthetic events is as follows

Code — custom event

Output — custom event

Add and remove an event listener

For an element in order to respond to various action you need to add an event listener to that element. addEventListener() method is used to add an event listener

Code — add event listener

Output — add event listener

removeEventListener() method is used to remove an event listener Both the above methods have the same syntax. It takes two parameters first is the event name and the second parameter is the callback function that needs to be executed.

Types of events.

There are many types of DOM events, some of them are network events, form events, storage events, etc. The most important of them are keyboard events and mouse events. We will look into these both using some examples.

Keyboard events :

1. keydown — when the key is pressed.
2. keypress- when the key is pressed continuously (except shift, fn, and capslock)
3. Keyup — When the key is released.

Code — keyboard events

Output — keyboard events

In the example, you can notice that when I hold
ctrl-left the keydown event is triggered when I release the ctrl-left keyup is triggered. The keypress is not triggered because it’s not a continuous action, however, when I press A all the events are triggered.

You can refer to all other events here

I would recommend checking Event bubbling and capture
on the MDN web docs it is very well explained.

Thank You for reading this article. Please give your feedback in the comments.

Источник

JavaScript Events

HTML events are «things» that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can «react» on these events.

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

In the following example, an onclick attribute (with code), is added to a element:

Example

In the example above, the JavaScript code changes the content of the element with >

In the next example, the code changes the content of its own element (using this.innerHTML ):

Example

JavaScript code is often several lines long. It is more common to see event attributes calling functions:

Example

Common HTML Events

Here is a list of some common HTML events:

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and browser actions:

• Things that should be done every time a page loads
• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data
• And more .

Many different methods can be used to let JavaScript work with events:

• HTML event attributes can execute JavaScript code directly
• HTML event attributes can call JavaScript functions
• You can assign your own event handler functions to HTML elements
• You can prevent events from being sent or being handled
• And more .

You will learn a lot more about events and event handlers in the HTML DOM chapters.

Источник