JavaScript Event is an occurence of any user action in your system. For example, mouse click, sliding of cursor, keystroke, and so on. All these actions that result in some kind of change in the website are known as events.
Actually, events in wesbsites are called HTML events not JavaScript events because they are occuring on an HTML element, for eg., a button click. But JavaScript comes handy when we want to react to these events. JavaScript reacts to these events by using JavaScript Event Handlers. Let's break it down:
These are some samples of event handling on HTML elements. A button, input field, or a div are HTML elements. When you perform some specific events on these elements then the system will give you a response. This is event handling through JavaScript. Follow the instructions given to see the response.
Mouse events are most occurring events in a website because people use mouse to navigate through website. We will now see various events related to mouse actions. Actions like mouse click, page scroll using mouse, movement of cursor over an element are all mouse events. Let's explore them one by one:
The onclick event is the most user friendly event, it occurs when user left clicks on any element. Use of this event can enhance website's attractiveness. For example: zooming image on mouse click or assisting user during form filling.
The onclick event handler is used to handle onclick event. This event handler is now embedded with HTML 5 as an attribute. So, without using script tags we can easily use the onclick event.
The following example will show you an alert message when you click on the elements.
The oncontextmenu event occurs when user right clicks on an element. It is similar to onclick event just the mouse button is different. It can be used in a situation if right click is disabled on a website, but if user right clicks on an element then a warning message gets displayed.
The oncontextmenu event handler is used to handle this event.
The following example will show an alert message when you right-click on the elements.
The onmouseout event occurs when a user hovers mouse cursor over an element and then removes it. The onmouseout event handler is used to handle this event.
The following example will show you an alert message when the mouseout event occurs.
The mouseover event occurs when user hovers the cursor over an element. The moment cursor gets over the element the onmouseover event handler gets triggered and execute task specified to it. You can display information as tooltip for the hovered element, or you can zoom an image.
The following example will show you an alert message when you place cursor over the button.
JS Keyboard events are related to keyboard keys. These events gets triggered when any key is pressed or released.
Here are some most important keyboard events and their event handlers.
The onkeydown event occurs when user press down a key on the keyboard.
The onkeydown event handler is used to handle this event.
Note: Try to enter some text inside input box.
The onkeyup event occurs when the user releases a key on the keyboard.
The onkeyup handler is used to handle this event.
The following example will show you an alert message when the keyup event occurs.
Note: Try to enter some text inside input box.
The onkeypress event occurs when a user press a key on the keyboard that has a character value associated with it. Keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc. will not generate a keypress event, but will generate a keydown and keyup event.
The onkeypress event handler is used to handle this event.
The following example will show you an alert message when the keypress event occurs.
Note: Try to enter some text inside input box.