[TIL] 20201210 The Missing Piece: DOM Events

Events

User inputs and actions

 

 

 

Inline Events

• Not recommended (Can't reuse the code, making it hard to modify)
• Example : click

<h1 onclick="alert('clicked')">Click</h1>

 

 

 

onclick Property

• Function runs when the element is clicked
• Syntax

const el = document.querySelector('element');
el.onclick = function() {
	//code
}

 

 

 

onmouseenter Property

• Function runs when mouse cursor enters into the element.

 

 

addEventListener

• Specify the event type and a callback to run.
• Syntax

target.addEventListener(type, listener);

//listener : function 

• Example

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
    alert('You clicked me!');
})

• Why it's better than using onclick property
  • Can use multiple functions for one element.
  • Can use options

 

 

'this in Events

• Refers to the element that receives the event.
• Example

const btns = document.querySelectorAll('button');
for (let btn of btns) {
    btn.addEventListener('click', colorize);
}

function colorize() {
    this.style.backgroundColor = makeRandomColor(); //custom function
    //this refers to btn in the for loop
}

 

 

 

Keyboard Events & Event Objects

• Event Object : Automatically generated to the callback function of eventListener.
• properties
  • key : the end result of keyboard inputs
  • code : the exact key that the user pressed
• Example

Window.addEventListener('keydown', function(event) {
    console.log(e.code);
})

 

 

 

Form Events 

form HTML recap

<form action="url location">
    <input type="text">
    <input type="password">
    <button>Button</button>
</form>

Submitting the form

button.addEventListener('submit', func);

preventDefault() 

• Event object method (use: event.preventDefault())
• Prevents default action of the element. (i.e. submitting of a button)

input.value

• Stores user input

form.elements

• A collection of the form elements, i.e. input, button...

Emptying out input slot after submitting

• input.value = ""; 

 

 

 

addEventListener type

• First argument of listener
• change : runs code as soon as the user leaves input element (blur)
• input : runs as soon as the input value is modified.

 

 

Event Bubbling

• Events of Nested Elements
• When elements are nested & both nested elements and parent elements have eventListeners that responds to a same userInput, nested element react to the event multiple times (for its own, and all of its ancestor elements)
• How to stop bubbling
  • Event object method : stopPropagation()
  • Use stopPropagation() inside of addEventListener callback function.

 

 

Event Delegation

• Event object variable 'target'
  • Stores the exact element that the user interacted with.
  • Example

<ul>
    <li>aaa</li>
    <li>bbb</li>
</ul>

const ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
    event.target.remove();
    //Only the element that was clicked gets removed. (Not the entire <ul>)
    //To make sure only <li>s gets removed,
    //event.target.nodeName==='li'&&e.target.remove();
})

• Using Event object variable target, eventListener can be delegated to the parent element.
• The specific element interacted with the user is target. Only the target gets affected.

 

 

 

 

 

* This post is a summary of Udemy Course "The Web Developer Bootcamp" by Colt Steele.