HOW TO DEMONSTRATE EVENTS HANDLERS IN DOM WITH JS.

Wazir babikir — Tue, 15 Mar 2022 09:13:54 +0000

WHAT IS DOM
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document.
TYPE OF EVENTS HANDLERS
An event is a signal that something has happened. All DOM nodes generate such
signals (but events are not limited to DOM).
Here’s a list of the most useful DOM events, just to take a look at:
Mouse events:
click – when the mouse clicks on an element (touchscreen devices generate it
on a tap).
contextmenu – when the mouse right-clicks on an element.
mouseover / mouseout – when the mouse cursor comes over / leaves an
element.
mousedown / mouseup – when the mouse button is pressed / released over an
element.
mousemove – when the mouse is moved.
Keyboard events:
keydown and keyup – when a keyboard key is pressed and released.
Form element events:
submit – when the visitor submits a
. focus – when the visitor focuses on an element, e.g. on an . Document events: DOMContentLoaded – when the HTML is loaded and processed, DOM is fully built. CSS events: transitionend – when a CSS-animation finishes. There are many other events. We’ll get into more details of particular events in next 3.** HOW TO LISTEN TO EVENTS** To listen for all events on an element with JavaScript, we can loop through the keys of the window object to see which property starts with on .

Then we can take the part of the key after on as the event name and call addEventListener with it to listen to the event.

For instance, we can write:

Object.keys(window).forEach(key => {  
  if (/^on/.test(key)) {  
    window.addEventListener(key.slice(2), event => {  
      console.log(event);  
    });  
  }  
});

*WE BULIT A REAL FORM TO PRINT USERNAME, PASSWORD AND EMAIL: *


 <h1 class="text-center">REGISTRATION FORM</h1>
    <form class="jumbotron container">
        <div class="form-group">
          <label for="exampleFormControlInput1">USERNAME</label>
          <input type="text" class="form-control username" placeholder="enter username">
        </div>
        <div class="form-group">
            <label for="exampleFormControlInput1">PASSWORD</label>
            <input type="text" class="form-control password"  placeholder="enter password">
          </div>
          <div class="form-group">
            <label for="exampleFormControlInput1">EMAIL</label>
            <input type="number" class="form-control email" placeholder="enter email">
          </div>
          <p class="results">USERNAME:</p>
          <p class="result1">PASSWORD:</p>
          <p class="result2">EMAIL:</p>

        <form>

the results of the form is as folows:

the code of the event listener of the form

The second step is to do grab the elements from the HTML
To grab an HTML element we will use document.querySelector(), or we can use document.getElementBy... As for querySelector, its a method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.

// grap the elements(1)
      const username = document.querySelector('.username')
      const password = document.querySelector('.password')
      const email= document.querySelector('.email')

      const result = document.querySelector('.results')
      const result1 = document.querySelector('.result1')
      const result2 = document.querySelector('.result2')

After grabbing the elements we add the eventListners, and the function target.

//add event listeners
    username.addEventListener('input',displayvalue)
    password.addEventListener('input',displayvalue)
    email.addEventListener('input',displayvalue)

reason for adding eventlisteners after grabbing the element...
The addEventListener() method makes it easier to control how the event reacts to bubbling. When using the addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.

difference of using input and on change in the events listeners...
The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

after adding the events listeners we create functions
A JavaScript function: is a set of code that is written once but is executed any number of times. The functions eliminate code complexity by enabling re-usability. A function is a block of 'reusable code' that is used several times in the JavaScript program where it is defined.
How to Create a Function in JavaScript
1.Use the keyword function followed by the name of the function.
2.After the function name, open and close parentheses.
3.After parenthesis, open and close curly braces.
4.Within curly braces, write your lines of code.

// create the function(2)
function displayvalue() {
    const myusername = username.value
    result.innerText = myusername;
    const mypassword = password.value
    result1.innerText = mypassword;
    const myemail = email.value
    result2.innerText = myemail
}

DEV Community: Wazir babikir

HOW TO DEMONSTRATE EVENTS HANDLERS IN DOM WITH JS.