DOM (3)

이 글은 자바스크립트의 DOM(Document Object Model)에 관한
기본 개념 및 문법을 정리하기 위해 작성하였습니다.

---

< What is an Event? >

Events are user interactions and browser manipulations that you can program to trigger functionality.

 

<For example>
- A mouse clicking on a button
- Webpage files loading in the browser
- A user swiping right on an image

 

 

---

< "Firing" Events >

It's like a Pavlovian.

 

 

1. Event Firing : The ringing of the bell.
2. Event Listener : The dog is trained to anticipate the ring at the bell.
3. Event Handler Function : It'll come over and eat its food.

 

 

---

< Event Handler Registration >

To have a DOM element( = event target) listen for a specific event and 
execute a block of code( = event handler) when detected using .addEventListener() method

 

< Syntax >

eventTarget.addEventListener('event name', handlerFunction);

: The .addEventLstener() method takes two arguments : 
  1. an event name in string format
  2. an event handler function

 

ex)

let eventTarget = document.getElementById('targetElement');

// ver 1.
eventTarget.addEventListener('click', function() {
  // code block
});

// ver 2.
function eventHandlerFunction() {
  // code block
}
eventTarget.addEventListener('click', eventHandlerFunction);

 

 

---

< Adding Event Handlers >

Another way to register Event Handler to Target Element.

 

< Syntax > 

eventTarget.onevent = eventHandlerFunction;​

: append an element with .on followed by the lowercased event type name.

 

ex)

function eventHandlerFunction() {
  // code block
}

eventTarget.onclick = eventHandlerFunction;

 

• Difference between .addEventListener() and .onevent
  - .addEventListener() : can add multiple event handler function
  - .onevent : only one event handler function can be attached to the target element.

 

 

---

< Removing Event Handlers >

To stop the event target from "listening" for an event to fire using the .removeEventListener() method

 

< Syntax >

eventTarget.removeEventListener('event name', handlerFunction);

: The .removeEventLstener() method takes two arguments : 
  1. an event name in string format
  2. an event handler function

-> because there can be multiple event handler functions associated with a particular event,
    .removeEventListener() needs both the exact event name and the name of the event handler function.

 

• If .addEventListener() was provided an anonymous function, then that event listener cannot be removed.

 

ex)

eventTarget.removeEventListener('click', eventHandlerFunction);

 

 

---

< Event Object Properties >

Javascript stores events as Event objects with their related data and functionalities as properties and methods.
When an event is triggered, the event object can be passed as an argument to the event handler functions.

 

• frequently used property :
  1. .target : to reference the eventTarget
  2. .type : to access the name of the event
  3. .timeStampe : to access the number of mileseconds that passed since the document loaded and the event                           was triggered.
  4. etc.

 

ex)

function eventHandlerFunction(event){
   console.log(event.timeStamp);
}
 
eventTarget.addEventListener('click', eventHandlerFunction);

// In the example above, when the 'click' event is triggered on the eventTarget,
// the eventHandlerFunction receives event, the Event object,
// which has information related to the 'click' event.
// Then, we log the time it took for the event to be triggered
// since the document was loaded by accessing the .timeStamp property of the event object.

 

 

---

< Event Types >

Beyond the click event, there are all types of DOM events that can fire in a browser!
It’s important to know most events in the DOM take place without being noticed because there are no event handlers connected to them.

It’s also important to know some registered events don’t depend on user interactions to fire.
For instance, the load event fires after website files completely load in the browser.

 

Reference : Check out a list of events.

https://developer.mozilla.org/en-US/docs/Web/Events