{"id":91,"date":"2024-11-08T02:43:00","date_gmt":"2024-11-08T02:43:00","guid":{"rendered":"https:\/\/techkubo.com\/javascript\/?p=91"},"modified":"2025-05-13T11:30:43","modified_gmt":"2025-05-13T11:30:43","slug":"javascript-events","status":"publish","type":"post","link":"https:\/\/techkubo.com\/javascript\/javascript-events\/","title":{"rendered":"JavaScript Events"},"content":{"rendered":"\n

What are Events?<\/strong><\/h2>\n\n\n\n

Events are actions or occurrences that happen in the browser, such as clicking a button, loading a page, or pressing a key. JavaScript can be used to listen for these events and execute code in response.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Common Event Types<\/strong><\/h2>\n\n\n\n
    \n
  1. Mouse Events<\/strong>: click<\/code>, dblclick<\/code>, mousedown<\/code>, mouseup<\/code>, mouseover<\/code>, mouseout<\/code>, mousemove<\/code><\/li>\n\n\n\n
  2. Keyboard Events<\/strong>: keydown<\/code>, keyup<\/code>, keypress<\/code><\/li>\n\n\n\n
  3. Form Events<\/strong>: submit<\/code>, reset<\/code>, focus<\/code>, blur<\/code>, change<\/code><\/li>\n\n\n\n
  4. Window Events<\/strong>: load<\/code>, resize<\/code>, scroll<\/code>, unload<\/code><\/li>\n<\/ol>\n\n\n\n

    <\/p>\n\n\n\n

    Event Handlers<\/strong><\/h2>\n\n\n\n

    Event handlers are functions that execute when a specific event occurs. They can be assigned directly in HTML or using JavaScript.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Inline Event Handler<\/strong><\/h2>\n\n\n\n

    You can assign an event handler directly in an HTML element.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Explanation of Code: <\/strong><\/p>\n\n\n\n

    When the button is clicked, the alert box displays the message “Button clicked!”.<\/p>\n\n\n\n

    <button onclick="alert('Button clicked!')">Click Me<\/button><\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    Adding Event Listeners<\/strong><\/h2>\n\n\n\n
    Using JavaScript, you can assign event handlers by adding event listeners. This approach separates JavaScript from HTML.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
    An event listener is added to the button with the ID myButton<\/code>. When the button is clicked, the function displays an alert box.<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Event Listeners Example<\/title>\n<\/head>\n<body>\n    <button id="myButton">Click Me<\/button>\n\n    <script>\n        document.getElementById("myButton").addEventListener("click", function() {\n            alert("Button clicked!");\n        });\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    Removing Event Listeners<\/strong><\/h2>\n\n\n\n
    You can also remove event listeners using the removeEventListener<\/code> method.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
    The event listener is removed, so clicking the button no longer triggers the alert.<\/p>\n\n\n\n
    let button = document.getElementById("myButton");\n\nfunction showAlert() {\n    alert("Button clicked!");\n}\n\nbutton.addEventListener("click", showAlert);\n\n\/\/ Removing the event listener\nbutton.removeEventListener("click", showAlert);<\/pre><\/div>\n\n\n\n
    <\/p>\n\n\n\n
    Event Object<\/strong><\/h2>\n\n\n\n
    When an event occurs, an event object is automatically passed to the event handler. This object contains information about the event and its target element.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
    The event object provides details about the event, such as its type and the target element that triggered it.<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Event Object Example<\/title>\n<\/head>\n<body>\n    <button id="myButton">Click Me<\/button>\n\n    <script>\n        document.getElementById("myButton").addEventListener("click", function(event) {\n            console.log("Event type: " + event.type);\n            console.log("Target element: " + event.target.tagName);\n        });\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    <\/p>\n\n\n\n
    JavaScript Events Example Code<\/strong><\/h2>\n\n\n\n
    Explanation of Code:<\/strong><\/p>\n\n\n\n
      \n
    • Mouse Events<\/strong>: Changes the color of the heading when the mouse hovers over and leaves it.<\/li>\n\n\n\n
    • Keyboard Events<\/strong>: Logs the key pressed in the console when typing in the input field.<\/li>\n\n\n\n
    • Form Events<\/strong>: Displays an alert with the input field’s value when the submit button is clicked, preventing the default form submission behavior.<\/li>\n<\/ul>\n\n\n\n
      <!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>JavaScript Events Example<\/title>\n<\/head>\n<body>\n    <h1 id="heading">Move your mouse over me!<\/h1>\n    <input type="text" id="textInput" placeholder="Type something...">\n    <button id="submitButton">Submit<\/button>\n\n    <script>\n        let heading = document.getElementById("heading");\n        let textInput = document.getElementById("textInput");\n        let submitButton = document.getElementById("submitButton");\n\n        \/\/ Mouse event\n        heading.addEventListener("mouseover", function() {\n            heading.style.color = "blue";\n        });\n\n        heading.addEventListener("mouseout", function() {\n            heading.style.color = "black";\n        });\n\n        \/\/ Keyboard event\n        textInput.addEventListener("keydown", function(event) {\n            console.log("Key pressed: " + event.key);\n        });\n\n        \/\/ Form event\n        submitButton.addEventListener("click", function(event) {\n            event.preventDefault();  \/\/ Prevent the default form submission behavior\n            alert("Form submitted: " + textInput.value);\n        });\n    <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      <\/p>\n\n\n\n
      JavaScript Labs<\/strong><\/h2>\n\n\n\n