Quick Contact

    JavaScript Libraries

    Introduction

    An event occurs when a user interacts with a website page, for instance when user clicks a link or button, enters text into an input box or text field, makes a choice in a select box, presses a key on the keyboard, moves the mouse pointer, submits a form, and so on. Some events, including such page load and unload, can be triggered by the browser itself.

    Whenever an event occurs, users may identify it with a JavaScript event handler (or an event listener) and execute a specified activity or collection of activities. Event handler names usually begin with the word “on,” therefore an authentication mechanism for the button click is named onclick, an event handler for the load event is called onload, an event handler for the blur event is called onblur, and so on.

    An event handler can be assigned in a variety of ways. The simplest method is to use the special event-handler attributes to add these straight to the start tag of the HTML components. For example, we may use the onclick property to provide a click handler to a button element, as shown below:

    e.g.

    < button type=”button” onclick=”alert(‘Hello World!’)”>Click Me< /button>

    Note:

    Since HTML attributes are case-insensitive so onclick may also be written as onClick, OnClick or ONCLICK. But its value is case-sensitive.

    In general, events are divided into four categories:

    • Mouse events,
    • Keyboard events,
    • Form events
    • Document/window events.
    • There are several additional occurrences that will be discussed in subsequent chapters. The next part will provide you with a quick review of the most important events, one by one, as well as real-life practice examples.

    Mouse Events

    When the user has clicked an element or moves the mouse pointer over an element, a mouse event is triggered. Here are some of the most essential mouse events, along with associated event handlers.

    The Click Event (onclick)

    When a user clicks on an element on a web page, the click event happens. These are frequently form components and connections. An onclick event handler can be used to handle a click event.

    When users click on the components inside the following example, users will see a warning notification.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    
    < title>JavaScript Handling the Click Event< /title>
    < /head>
    < body>
    < button type="button" onclick="alert('You have clicked a button!');">Click Me< /button>
    < a href="#" onclick="alert('You have clicked a link!');">Click Me< /a>
    < /body>
    < /html>
    

    The Contextmenu Event (oncontextmenu)

    When a user presses the right mouse button on an element to access a context menu, the contextmenu event happens. An oncontextmenu event handler may be used to handle a contextmenu events.

    When you right-click on the components in the following example, an alert message will appear.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Handling the Contextmenu Event< /title>
    < /head>
    < body>
    < button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me< /button>
    < a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me< /a>
    < /body>
    < /html>
    

    The Mouseover Event (onmouseover)

    Whenever a user moves the mouse cursor across a content, the mouseover event happens.

    The onmouseover executable may be used to handle the mouseover event. When users move the cursor over the items in the following example, you will see an alert message.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>JavaScript Handling the Mouseover Event< /title>
    < /head>
    < body>
    < button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me< /button>
    < a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me< /a>
    < /body>
    < /html>
    

    The Mouseout Event (onmouseout)

    When a user drags the mouse pointer outside of an element, the mouseout event happens.

    The onmouseout event handler may be used to handle the mouseout event.

    Keyboard Events

    When a user presses or releases a key on the keyboard, a keyboard event is triggered. Here are some of the most essential keyboard events, along with associated event handlers.

    The Keydown Event (onkeydown)

    When a user hits a key on the keyboard, the keydown event happens.

    It is triggered whenever the user taps any key on the keyboard. This event is triggered repeatedly if the user holds down the key.

    The Keyup Event (onkeyup)

    When a user releases a key on the keyboard, the keyup event happens.

    The keydown and keypress events occur before a character appears on the screen, whereas the keyup event occurs after it displays.

    When you utilise the keydown and keypress events, the event object contains a keyCode field that lets you know which key was hit. Instead of returning the letter for that key, this property delivers the ASCII code for that key’s lowercase.

    The Keypress Event (onkeypress)

    When a user touches a key on the keyboard that seems to have a character value assigned with it, the keypress event happens. Ctrl, Shift, Alt, Esc, Arrow keys, and so on will not create a keypress event, but will instead generate a keydown and keyup event.

    Note:

    The value of this keyword inside an event handler refers to the element which has the handler on it (i.e. where the event is currently being delivered).

    Form Events

    When a form control receives or loses attention, or when the user modifies a form control value, such as by putting text into a text input or selecting any item in a pick box, a form event is called. Here are some of the most essential form events, along with associated event handlers.

    The Blur Event (onblur)

    When the user moves the attention away from a form element or a window, the blur event happens.

    Document/Window Events

    Events are also generated after the website has loaded or when the user resizes the browser window, among other things. Here are some of the most essential document/window events, along with associated event handlers.

    The Load Event (onload)

    When a web page has finished processing in the web browser, the load event happens.

    The onload event handler may be used to handle the load event.

    The Unload Event (onunload)

    When a user departs the current web page, the unload event happens.

    The onunload event handler can be used to handle the unload event.

    The Resize Event (onresize)

    When a user resizes the browser window, the resize event happens. The resize event is also triggered when the browser window is reduced or maximized.

    The onresize event handler may be used to handle the resize event.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.