DOM (Document Object Model)

• Each DOM is an architecture that describes structure of document.
• DOM allows us to access the tree ,With them, you can change the document’s structure, style, or content.
• nodes also have event listeners.once event is triggered , the event handlers get executed.

event listeners ‘listen’ for some action on specific element on your app/web.

you can add them on mouse events, key events and also on submit forms, too.

MOUSE EVENTS

1. mouseDown
2. mouseEnter
3. mousemMve
4. mouseOut
5. mouseOver
6. mouseLeave

KEY EVENTS

1. keyPress
2. keyDown
3. keyUp

SUBMIT FORM

• submit - works when submit button is pressed.
• reset — works when reset button is pressed.

example:

const form= document.getElementById('form')
const submitHandler = function(event){ 
     event.preventDefault()
}
form.addEventListener('submit',submitHandler)

The HTML DOM API

HTML DOM API include:

• Access to and control of HTML elements via the DOM.
• Access to and manipulation of form data.
• interacting with the contents of 2D images.like draw on top of them.
• dragging and dropping of content on webpages
• access to the browser navigation history
• management of media connected to the HTML media elements
• supporting and connective interfaces for other APIs such as Web Components ,Web Storage ,Web Workers ,WebSocket,Server-sent events…

you can either:

1. get element by (id ,tag ,class name)

2. write inline.

3. write add event listener.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.

Bubbling

When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.

Difference between event.target and this :

event.target — is event that u had on some object

this — is the “current” element, the one that has a currently running handler on it.

How to stop bubbling

event.stopPropagation() stops the move upwards, but on the current element all other handlers will run.

event.stopImmediatePropagation()stops bubbling and prevent handlers on the current element from running and after it no other handlers execute

preventDefault()Calling it during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.

Note

use event.stopPropagation() when really necessary and architecturally well thought out, otherwise it creates hidden pitfalls that later may become problems.

capturing

Event capturing is one of two ways to do event propagation in the HTML DOM. In event capturing, an event propagates from the outermost element to the target element. It is the opposite of event bubbling, where events propagate outwards from the target to the outer elements. Capturing happens before bubbling.

To catch an event on the capturing phase, we should set capture true in second argument. there are 2 ways to do this. you can use either one, no difference, it’s totally ok.

elem.addEventListener (..., {capture: true})
elem.addEventListener (..., true)

There are two possible values of the capture option:

• If it’s false (default), then the handler is set on the bubbling phase.
• If it’s true, then the handler is set on the capturing phase.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

and lastly to remove event listener use this:

elem.RemoveEventListener(..., ...)