JavaScript Events Flashcards

DOM Events

• Events are signals indicating actions in the DOM, triggered by user interactions or browser events. Listeners can be attached to execute code in response.

• Examples:

  • onclick: Triggers when an element is clicked.

  • onmouseenter: Triggers when the mouse pointer enters an element.

  • eg: btn.onclick = function() {

  • alert('Button clicked!');

    };

  • eg: function sayhello() {

  • alert(“Hello“);

  • }

  • ps. in this way onclick works only on one button/item at a time

  • for multiple button =>

  • let btns = document.querySelectorAll(“button”);

  • for (btn of btns){

  • btn.onclick = sayhello;

  • }

  • function sayhello() {

  • alert(“Hello“);

  • }

  • or btn.onlick = sayhello;
    

    keydown: Fires when a key is pressed down while focused on an element.

  • -

Event Listener

• addEventListener: Attaches event listeners to DOM elements.

• Syntax: element.addEventListener(event, callback)

  • event: String for the event type (e.g., 'click', 'mouseover').

  • callback: Function to execute when the event triggers.

    Example:

•      btn.addEventListener("click", function () {
  

            console.log("button clicked");

            });

    Example 2;

•        btn.addEventListener(“click”, sayhello);

  • or

  • btn.addEventListener(“dblclick” , function () {

  • console.log(“you double clicked me “);

  • });

    Example 3; Random Color Generator

• btn.addEventListener("click", function () {

        let red = Math.floor(Math.random() * 255);

         let green = Math.floor(Math.random() * 255);

        let blue = Math.floor(Math.random() * 255);

        let newColor = rgb(${red}, ${green}, ${blue});

        document.body.style.backgroundColor = newColor;

        });

Common event types: click, drag, keyboard key.

PS. learn more about addEventListener on mdn as you cannot remember them all

"this" Keyword in Event Listeners

• Inside the callback, this refers to the element that the event listener is attached to, allowing you to access its properties and methods directly.

• Example;

        let btn = document.querySelector(“button”);

        btn.addEventListener(“click” , function() {

        console.dir(this);

        });

         // The above code snippet logs the button element to the console when it is clicked.

         // To change background color => this.style,backgroundColor = “blue”; add this inside the function

Keyboard Events

• keydown: Triggered when a key is pressed down, allowing for immediate response to user inputs such as character entry or action keys.

  eg : inp.addEventListener(“keydown”, function(event) {

  console.log(“code = “, event.code);

  if (event.code == “ArrowUp”){

  console.log(“character moves forward”);

  });

• keypress: Triggered when a key that produces a character value is pressed down, commonly used for detecting characters entering in input fields.

• event.code: Returns the physical key pressed (e.g., "ArrowUp", "KeyA" ,”Semicolon”).

• event.key: Returns the character associated with the key pressed (e.g., "Space", "a", "b", “;“).

  PS : learn more events from mdn

Form Events

• form.addEventListener("submit", function (event) {}): Handles form submission events.

• event.preventDefault(): Prevents the default form submission.

Form Data Extraction

• Access form elements: form.elements[index].

• Retrieve input values: inputElement.value.

  example: let form = document.querySelector(“form“);

  form.addEventListener(“submit“, function(event){

  event.preventDefault();

        let inp = document.querySelector(“input“);

        console.dir(“inp”);

        console.log(“inp.value”);

        });

More Events

• change event: Occurs when the value of an element changes and loses focus (works on <input>, <textarea> and <select>).

input event: Fires when the value of an <input>, <select>, or <textarea> is being changed.

• Example : Text editor

        let inp = document.querySelector(“input”);

        let p = document.querySelector(“p“);

        inp.addEventListener(“input” , function () {

        console.log(inp.value);

        p.innerText = inp.value;

        });

Assignment solutions

Html

<h1>js 10</h1>
    <h2></h2>
    <input placeholder="Enter your name" type="text" id="user" />
    <br /><br />
    <button>Click me</button>
    <p style="margin-top: 1000px"></p>
    <script src="app.js"></script>

javaScript

//Question 1
let h1 = document.querySelector("h1");
h1.addEventListener("mouseout", function () {
  console.log("mouse is out");
});
let inp = document.querySelector("input");
inp.addEventListener("keypress", function () {
  console.log("key is pressed");
});
window.addEventListener("scroll", () => {
  console.log("You scrolled the page");
});
window.addEventListener("load", () => {
  console.log("page is loaded");
});
//Question 2
let btn = document.querySelector("button");
btn.addEventListener("click", () => {
  btn.style.backgroundColor = "green";
});
//Question 3
let h2 = document.querySelector("h2");
let inp1 = document.querySelector("#user");
inp.addEventListener("input", () => {
  let value = inp1.value;
  let newValue = value.replace(/[^a-zA-Z ]/g, "");
  h2.innerText = newValue;
});