ReasonJun

handler once / passive // Handler run only once const parentEl = document.querySelector('.parent'); parentEl.addEventListener( 'click', (event) => { console.log('parent'); }, { once: true, } ); // Separation of default behavior and handler execution // The execution itself may be slow because there are many actions on the webpage, but the user's manipulation of the webpage proceeds smoothly. par..

event obj // The event object contains event information that has occurred in the target. const parentEl = document.querySelector('.parent'); parentEl.addEventListener('click', (event) => { console.log(event.target, event.currentTarget); // The target of the (selected) event, the target where the event is registered console.log(event); // You can get information about an event that has occurred...

delegation // event delegation // If you need to handle events on multiple elements in a similar pattern, // You can use the event delegation pattern, controlled by a single ancestor element. const parentEl = document.querySelector('.parent'); const childEls = document.querySelectorAll('.child'); // Event registration for all targets! childEls.forEach((el) => { el.addEventListener('click', (even..

add / remove //? .addEventListener() // Registers to listen for events on the target. // When an event specified in the target occurs, the specified function is called. const parentEl = document.querySelector('.parent'); const childEl = document.querySelector('.child'); parentEl.addEventListener('cilck', () => { console.log('Parent'); }); childEl.addEventListener('cilck', () => { console.log('Ch..

toReserved / toSorted / toSpliced (copy, no mutate) const x = [1, 2, 3]; const y = x.toReversed(); y.push(0) const arr = [1,3,2]; const sorted = arr.toSorted(); console.log(arr); // [1, 3, 2] console.log(sorted); // [1, 2, 3] const a = [ "a", "b", "c", "d"] const newArray = a.toSpliced(1,2) // ['a', 'b'] with const x = ["a", "b", "c", "x"] x[3] = "d" console.log(x) // ["a", "b", "c", "d"] const ..

In JavaScript, there are several array methods that do not mutate the original array. Instead of modifying the array in place, they return a new array with the desired modifications. Here are some commonly used array methods that have non-mutating behavior: concat: The concat() method is used to merge two or more arrays and returns a new array without modifying the existing arrays. const array1 ..