For example, when a user clicks over the browser, add js code, which will execute the task to be performed on the event.
Some of the HTML events and their event handlers are:
Mouse events:Event PerformedEvent HandlerDescriptionclickonclickWhen mouse click on an elementmouseoveronmouseoverWhen the cursor of the mouse comes over the elementmouseoutonmouseoutWhen the cursor of the mouse leaves an elementmousedownonmousedownWhen the mouse button is pressed over the elementmouseuponmouseupWhen the mouse button is released over the elementmousemoveonmousemoveWhen the mouse movement takes place.
Keyboard events:Event PerformedEvent HandlerDescriptionKeydown & Keyuponkeydown & onkeyupWhen the user press and then release the key
Form events:Event PerformedEvent HandlerDescriptionfocusonfocusWhen the user focuses on an elementsubmitonsubmitWhen the user submits the formbluronblurWhen the focus is away from a form elementchangeonchangeWhen the user modifies or changes the value of a form element
Window/Document eventsEvent PerformedEvent HandlerDescriptionloadonloadWhen the browser finishes the loading of the pageunloadonunloadWhen the visitor leaves the current webpage, the browser unloads itresizeonresizeWhen the visitor resizes the window of the browser
Let's discuss some examples over events and their handlers.
Click EventTest it Now
MouseOver EventTest it Now
Focus EventTest it Now
Keydown EventTest it Now
Load eventTest it Now
Whenever a user presses any key on the Keyboard, different events are fired. There are three keyboard events, namely
4. Keyboard events belong to the
One of the most common uses of keyboard events today is computer gaming. Most browser-based games require some form of keyboard input. There are different responses from game objects based on the keyboard event. This tutorial will also demonstrate how keyboard events are used in gaming.
Table of contents
Some browsers no longer support
3 event. Refer to the for
3 event browser compatibility details.
To record a
To record a
To record a
In the code snippets above, we are adding the
4 method to the document. This attaches the event handler to the window, to listen for the keyboard events.
5 events are fired in the following order:
9 object is the parent of all event objects. Some of the commonly used event objects are
5. This tutorial will focus on
The event object has two properties,
8, which allows getting the character and the ‘physical key code’, respectively. The table below shows the
0 for the character
9 value may vary depending on the language, while the
0 is always the same. For all the keycode values on a keyboard, refer to the W3 UI events code specification.
The complete source code for the above demo is available on GitHub here.
2 key is used in combination with other keys. Therefore, we need to note that, when the
2 key is combined with different keys, we perform different
The code below creates an alert when any key is pressed down (
2 event) except for the
2 key is pressed without any combination, the code listens to the keyup event and creates an alert.
The screenshots below shows the codes output, when different keys are pressed:
Use of keyboard events in gaming demo
Keyboard events are used in gaming, whereby a player can control game objects using some predefined keys. We will create a game demo where a player controls a game object using the arrow keys.
The HTML code creates a SVG with a rectangular shape.
Draw a rectangle using HTML SVG code below:
Now, let’s style the background color of the SVG using the code below:
Then, we declare some variables that we will be using in our game, as shown below:
Create two functions (
3) for updating the object position.
These functions gives the object’s updated position, when given the distance the object is moved along either axis, as an argument.
4 computes the new position of the object by subtracting the distance moved by the object from the Y-axis position.
5 computes the new position of the object by adding the distance moved by the object from the X-axis position.
6 function draws the object to its new position.
4 method is used to attach an event handler to the object. This event handler listens for keydown events. Once the relevant keys are pressed, the
6 method is called to draw the object at its new position.
The complete source code for the above demo is available on Github.
How do you define an event type?
An event type is a data structure that defines the data contained in an event. When raw event data comes into the Oracle Event Processing application, the application binds that data to an event of a particular event type.
What is type of event in typescript?
Events supported are: AnimationEvent , ChangeEvent , ClipboardEvent , CompositionEvent , DragEvent , FocusEvent , FormEvent , KeyboardEvent , MouseEvent , PointerEvent , TouchEvent , TransitionEvent , WheelEvent . As well as SyntheticEvent , for all other events.
But this does demonstrate that event isn't a reserved word. It's a variable. So where you can't say break = "spam"; , you can say event = "spam"; . So if you try to use break , which is reserved, it borks.
DOM event types.
mouse events ( MouseEvent ): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu..
touch events ( TouchEvent ): touchstart, touchmove, touchend, touchcancel..
keyboard events ( KeyboardEvent ): keydown, keypress, keyup..
form events: focus, blur, change, submit..