Event

event is kind of motion like clicking or get page info...etc all of things

Document Events

Event	Occurs When
abort	Loading is stopped before the page or resource has fully loaded.
error	An error occurs while loading a document or an element.
load	The document or resource has finished loading.
resize	The document view (window) has been resized.
scroll	The document or an element has been scrolled.
unload	The document or a child resource is being unloaded (leaving the page).

---

Mouse Events

Event	Occurs When
click	An HTML element is clicked.
dblclick	An HTML element is double-clicked.
mousedown	A mouse button is pressed over an element.
mouseover	The mouse pointer is moved onto an element.
mouseout	The mouse pointer is moved out of an element.
mouseup	A mouse button is released over an element.

---

Keyboard Events

Event	Occurs When
keydown	A key is being pressed down.
keypress	A key is pressed (Note: Mostly deprecated in modern browsers).
keyup	A key is released.

---

Form Events

Event	Occurs When
blur	A form element loses focus.
change	The value of an <input>, <select>, or <textarea> is changed.
focus	A form element gains focus.
reset	A form is reset to its default values.
submit	A form is submitted.

---

Event handling & Event object

//connect func to HTML tag
<tag on<Event>="func1">;

//usage
<script onerror="alert('XSS occur')">hehe</script>


//connect web element to func
element.on<Event> = func1

//deal with listener
element.addEventListener(event,func,capture_option)

find the docs about event object's properties and method

• it has various property but only 1 method, which is preventDefault that only works for cancel operation when it can.

https://developer.mozilla.org/ko/docs/Web/API/Event
-> view this site

---

Event bubbling

Event bubbling is a type of event propagation in the HTML DOM API. When an event happens on an element, it first runs the handlers on that specific element, then on its parent, and finally all the way up to its distant ancestors (the document and window objects).

use of func
event.target
eventcurrentTarget

---

Event capturing

Event capturing (also known as "trickling") is the opposite of event bubbling. It is the first phase of event propagation in the HTML DOM. During this phase, the event starts from the very top (the window object) and travels downward through the DOM tree until it reaches the target element.

---

Feature	Event Bubbling	Event Capturing
Direction	Target → Window (Upwards)	Window → Target (Downwards)
Default	Yes (Standard behavior)	No (Must set useCapture to true)
Analogy	A bubble rising to the surface	A stone falling to the bottom
Common Use	Event Delegation (Efficiency)	Event Interception (Global control)

---

Use Dom effectively

querySelectAll() method let print every node in once

createElement() method let create node for add in dom tree. make value using createTextNode(<text>). After if you done making node and value, you need to append(connect) it fot parent node recognize and link it. use appendChild(). for element to text -> use value as textNode and for element to element -> use func that direct created node.

If you want element of other, then use like create<element of you want>.

but if you use Attribute element and want to link element and value, use setAttributeNode().

in case of node sorting, insertBefore(<new_node>,<base_node>) can add node where you want.

remove() method can delete of element of preceding.
similar method as removeChild() which must place in follow of parent node. and it remove of it's value. if value is this, it delete the things that what this directly direct.

parentNode() => This property accesses the parent node of the current node and returns the element node of the parent node.

important things when using ""this""

You must be careful when using this here. As shown in the following code, if you use this in an event listener (e.g., function(this) { ... }), this refers to the node where the event occurred. In other words, if you click the first item in the list, this will refer to that first item.

item.addEventListener(“click”, function(this) {
    this.parentNode.removeChild(this);
} );

However, if you write the above function as an arrow function, this behaves differently than expected. In an arrow function, this refers to the window object. Since the window object is the top-level object of the DOM, if you want to use the clicked element as the this keyword, you must define it as an anonymous function rather than an arrow function. This is very important, so be sure to remember it.

for (let item of items) {
    item.addEventListener(“click”, () => {
        this.parentNode.removeChild(this); // Error occurs
    });
}