Events in Javascript

Events in Javascript

At times, there are some things, that are going on with the HTML elements, like hovering over some element, clicking on some element, or double click on some element, and a lot more. We can do different things on the basis of these actions. These are often called events. So, the event is something happening to the HTML elements. Like if we are clicking an HTML button, it is a click event. So when JavaScript is used, it can react to that click using some events, so you can determine what happens when someone clicks that button.

Here, the events are fired inside the browser window, and there may be a single element, a set of elements, or maybe the entire window. There can be many events that can occur, like if the user clicks on some element, or the user presses some key from the keyboard, or the user hovers over some element, or when some element or the body finishes loading, on submission of some form, etc.

Well, there is a big list of events that can be reacted to in JavaScript, and we are going to consider a few of them here now.

There can be events related to –

  • click
  • mouseover
  • mouseout
  • mouseenter
  • mouseleave
  • load
  • dblclick
  • copy
  • paste
  • mouseup
  • mousedown

and many more other events.

Here, we are going to see something, called an event handler, which is some piece of code, that you want to execute in response to that event. This is like there is some code, which is going to execute when some event is triggered. An event handler is also called an event listener.

Here we are going to keep the things simple, and we are going to understand more about the event handling in the DOM ahead.

Here, we are going to have a look at one of the ways, to assign the event handlers, which are essentially some HTML event handler attributes, if the click is an event, the event handler attribute for the click event is going to be on click, or for load event, the event handler attribute is Onload.