The change in the state of an object is known as an Event. In html, there are various events which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling. Thus, js handles the HTML events via Event Handlers. Show
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 keyForm 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 elementWindow/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 browserLet's discuss some examples over events and their handlers. Click EventTest it NowMouseOver EventTest it NowFocus EventTest it NowKeydown EventTest it NowLoad eventTest it NowWhenever a user presses any key on the Keyboard, different events are fired. There are three keyboard events, namely 2, 3, and 4. Keyboard events belong to the 5 object. This tutorial will discuss how to implement JavaScript keyboard events.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 contentsPrerequisitesThis article is suitable for beginner to expert web developers. However, prior knowledge of HTML and JavaScript is required. JavaScript keyboard eventsThere are three different keyboard events in JavaScript:
Some browsers no longer support 3 event. Refer to the for 3 event browser compatibility details.To record a 2 event in JavaScript, use the code below:
To record a 3 event in JavaScript, use the code below:
To record a 4 event in JavaScript, use the code below:
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.KeyboardEvent sequence 5 events are fired in the following order:
Handling keyboard events in JavaScriptThe 9 object is the parent of all event objects. Some of the commonly used event objects are 0, 5, 2, 3, 4, and 5. This tutorial will focus on 5.The event object has two properties, 7 and 8, which allows getting the character and the ‘physical key code’, respectively. The table below shows the 9 and 0 for the character 1.Key 0 9 4 5 1 (lowercase) 7 5 4 (uppercase)The 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.We will use the JavaScript scripting language to get each key’s keycode value. Create an HTML script with your preferred name and add the JavaScript code below. Open the script on a web browser.
The complete source code for the above demo is available on GitHub here. The 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 4 events.The code below creates an alert when any key is pressed down ( 2 event) except for the 2 key.
If 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 demoKeyboard 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. HTML codeThe HTML code creates a SVG with a rectangular shape. Draw a rectangle using HTML SVG code below:
CSS codeNow, let’s style the background color of the SVG using the code below:
JavaScript codeThen, we declare some variables that we will be using in our game, as shown below:
Create two functions ( 2 and 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.
The function 4 computes the new position of the object by subtracting the distance moved by the object from the Y-axis position.The function 5 computes the new position of the object by adding the distance moved by the object from the X-axis position.The 6 function draws the object to its new position. 0The 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. 1The JavaScript code above listens for the key events and calls either 5 or 4 function.The complete source code for the above demo is available on Github. Output ConclusionJavaScript keyboard events are used in several ways. This article has demonstrated how we can use JavaScript keyboard events in gaming. 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.
Is event a keyword in JavaScript?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.
What are the types of event listeners in JavaScript?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.. |