JavaScript Events Flashcards

Flashcards covering DOM events, event listeners, keyboard events, form events and more.

onclick ,onmouseenter

btn.onclick = function() { alert('Button clicked!'); };

element.addEventListener(event, callback)

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

console.log("button clicked");

});

'event' is the event type and 'callback' is the function to execute.

Keyboard Events

occur when a key is pressed or released.

inp.addEventListener(“keydown”, function(event) { console.log(“code = “, event.code);

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

console.log(“character moves forward”);

});

Form Events & event.preventDefault()

form.addEventListener("submit", function (event) {}) :

Handles form submission events.

event.preventDefault() prevent form submission

event.preventDefault()

Prevents the default form submission

change event

Occurs when the value of an element has been changed

(only works on <select>, <input> , <textarea>)

input event

Fires when the value of an , <select>, <input> , <textarea> has been 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;

});

Form Data Extraction

access form elements , retrieve input values

Access form elements: form.elements[index] .

Retrieve input values: inputElement.value .

"this" Keyword in Event Listeners

this refers to the element that the event listener is attached to

let btn = document.querySelector(“button”); btn.addEventListener(“click” , function() {

console.dir(this);

});

keyboard events = event.code and event.key

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", “;“).