Section 14: Events - Beyond "click" Listeners

The goals

💪🏻A Closer Look at Events

✌🏻Event Propagation

👍🏻Example: Drag & Drop

 

Events in JavaScript

예시: 무한 스크롤링 기초

scroll 이벤트로 무한히 스크롤할 수 있는 목록을 만들어 봅시다(아래 설명 참조)!

 

이 코드 스니펫은 모든 페이지에서 실행할 수 있습니다- 세로로 스크롤할 수 있는지(충분한 더미 콘텐츠를 추가하거나 height 를 많이 추가하는 몇 가지 스타일을 추가하거나 브라우저 창을 세로로 축소해 보면서) 확인하세요.

let curElementNumber = 0;
 
function scrollHandler() {
	const distanceToBottom = document.body.getBoundingClientRect().bottom;
 
	if (distanceToBottom < document.documentElement.clientHeight + 150) {
		const newDataElement = document.createElement('div');
		curElementNumber++;
		newDataElement.innerHTML = `<p>Element ${curElementNumber}</p>`;
		document.body.append(newDataElement);
	}
}
 
window.addEventListener('scroll', scrollHandler);

여기에서 무슨 일이 일어나고 있는 걸까요?

맨 아래에서는 scrollHandler 함수를 창 객체의 'scroll' 이벤트에 대한 핸들러로 등록합니다.

이 함수 내에서 먼저 뷰포트(현재 보고 있는 것의 왼쪽 상단 모서리)와 (단순히 현재 보이는 영역 사이의 총 길이가 아닌) 페이지 끝 사이의 총 길이를 측정합니다. ) => distanceToBottom에 저장됩니다.

예를 들어 브라우저 창의 높이가 500px인 경우 스크롤할 수 있는 콘텐츠가 있다고 가정하면 distanceToBottom은 684px일 수 있습니다.

다음으로 전체 콘텐츠 하단까지의 길이(distanceToBottom)와 창 높이 + 특정 임계값 (이 예에서는 150px )을 비교합니다. document.documentElement.clientHeight 는 잠재적인 스크롤바를 고려하므로 window.innerHeight보다 선호됩니다.

페이지 콘텐츠 끝까지의 길이가 150px 미만인 경우 if 블록(새 데이터를 추가하는 곳)으로 만듭니다.

그런 다음 if 문 내부에서 새 <div> 요소를 생성하고 이 요소를 <p> 요소로 채워 차례로 증가되는 카운터 값을 출력합니다.

 

 

event

event.preventDefault()

The preventDefault() method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via EventTarget.dispatchEvent(), without specifying cancelable: true has no effect.

 

Capturing and Bubbling

Bubbling

The bubbling principle is simple.

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.

Let’s say we have 3 nested elements FORM > DIV > P with a handler on each of them:

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

A click on the inner <p> first runs onclick:

1. On that <p>.
2. Then on the outer <div>.
3. Then on the outer <form>.
4. And so on upwards till the document object.

So if we click on <p>, then we’ll see 3 alerts: p → div → form.

The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water.

 

Capturing

There’s another phase of event processing called “capturing”. It is rarely used in real code, but sometimes can be useful.

The standard DOM Events describes 3 phases of event propagation:

1. Capturing phase – the event goes down to the element.
2. Target phase – the event reached the target element.
3. Bubbling phase – the event bubbles up from the element.

Here’s the picture, taken from the specification, of the capturing (1), target (2) and bubbling (3) phases for a click event on a <td> inside a table:

 

That is: for a click on <td> the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.

Until now, we only talked about bubbling, because the capturing phase is rarely used.

In fact, the capturing phase was invisible for us, because handlers added using on<event>-property or using HTML attributes or using two-argument addEventListener(event, handler) don’t know anything about capturing, they only run on the 2nd and 3rd phases.

To catch an event on the capturing phase, we need to set the handler capture option to true:

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

// or, just "true" is an alias to {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.

Note that while formally there are 3 phases, the 2nd phase (“target phase”: the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.

 

Event propagation & StopPropagation

Event propagation is a mechanism that defines how events propagate or travel through the DOM tree to arrive at its target and what happens to it afterward.

Let's understand this with the help of an example, suppose you have assigned a click event handler on a hyperlink (i.e. <a> element) which is nested inside a paragraph (i.e. <p> element). Now if you click on that link, the handler will be executed. But, instead of link, if you assign the click event handler to the paragraph containing the link, then even in this case, clicking the link will still trigger the handler. That's because events don't just affect the target element that generated the event—they travel up and down through the DOM tree to reach their target. This is known as event propagation

In modern browser event propagation proceeds in two phases: capturing, and bubbling phase. Before we proceed further, take a look at the following illustration:

Above image demonstrates how event travels in the DOM tree during different phases of the event propagation when an event is fired on an element that has parent elements.

The concept of event propagation was introduced to deal with the situations in which multiple elements in the DOM hierarchy with a parent-child relationship have event handlers for the same event, such as a mouse click. Now, the question is which element's click event will be handled first when the user clicks on the inner element—the click event of the outer element, or the inner element.

In the following sections of this chapter we will discuss each phases of the event propagation in greater detail and find out the answer of this question.

toggle()

 

Event delegation

 

Quiz

질문 1:

"이벤트"의 개념은 JavaScript에만 있을까요?

• 예

• 아니오 - NodeJS에는 존재하지만 다른 프로그래밍 언어에는 존재하지 않습니다.

• 아니오

질문 2:

addEventListener('click', function() { ... })가 someElement.onclick = function() { ... }보다 선호되는 이유는 무엇일까요 ?

• 클릭은 두 번 이상 발생할 수 있으므로 (addEventListener에서 제공하는) 보다 유연한 이벤트 리스너를 사용하는 것이 더 좋습니다.

• addEventListener를 사용하여 동일한 이벤트에 대해 여러 리스너를 추가(제거도 가능)할 수 있습니다.

• addEventListener는 더 바람직하지 않습니다. 오히려 그 반대입니다!

질문 3:

DOM 이벤트를 리스닝할 때 얻는 “이벤트” 객체 내부에는 무엇이 있을까요?

• 이벤트에 따라 다릅니다. 하지만 일부 프로퍼티와 메서드(예: event.target)는 항상 존재합니다.

• 이벤트가 발생했을 때의 커서의 좌표입니다.

• 여러분(개발자)이 이벤트 객체를 구성한 방식에 따라 다릅니다.

다양한 종류의 데이터를 보유하는 다양한 종류의 이벤트(예: 클릭에 대한 MouseEvent)가 있습니다. 그래도 일부 핵심 프로퍼티와 메서드는 항상 존재합니다.

 

질문 4:

someEvent.preventDefault()와 someEvent.stopPropagation()의 차이점은 무엇일까요?

• 두 방법 모두 동일한 작업을 수행합니다.

• preventDefault()는 브라우저의 진행을 중지하고 스크립트 실행을 취소합니다. stopPropagation()은 (다른 요소에 대해) 동일한 이벤트를 처리하는 다른 이벤트 핸들러가 없도록 합니다.

• preventDefault()는 브라우저가 기본 동작을 계속하지 못하도록 하고, stopPropagation()은 (다른 요소에 대해) 다른 이벤트 핸들러가 동일한 이벤트를 처리하지 못하도록 합니다.

 

draggable & droppable

HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers.

The user may select draggable elements with a mouse, drag those elements to a droppable element, and drop them by releasing the mouse button. A translucent representation of the draggable elements follows the pointer during the drag operation.

You can customize which elements can become draggable, the type of feedback the draggable elements produce, and the droppable elements.

This overview of HTML Drag and Drop includes a description of the interfaces, basic steps to add drag-and-drop support to an application, and an interoperability summary of the interfaces.

<script>
  function dragstart_handler(ev) {
    // Add the target element's id to the data transfer object
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  window.addEventListener("DOMContentLoaded", () => {
    // Get the element by id
    const element = document.getElementById("p1");
    // Add the ondragstart event listener
    element.addEventListener("dragstart", dragstart_handler);
  });
</script>

<p id="p1" draggable="true">This element is draggable.</p>

Define a drop zone

By default, the browser prevents anything from happening when dropping something onto most HTML elements. To change that behavior so that an element becomes a drop zone or is droppable, the element must have both ondragover and ondrop event handler attributes.

The following example shows how to use those attributes, and includes basic event handlers for each attribute.

<script>
  function dragover_handler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function drop_handler(ev) {
    ev.preventDefault();
    // Get the id of the target and add the moved element to the target's DOM
    const data = ev.dataTransfer.getData("text/plain");
    ev.target.appendChild(document.getElementById(data));
  }
</script>

<p
  id="target"
  ondrop="drop_handler(event)"
  ondragover="dragover_handler(event)">
  Drop Zone
</p>

Note that each handler calls preventDefault() to prevent additional event processing for this event (such as touch events or pointer events).

 

 

 

 

 

Sources

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Event.preventDefault() - Web APIs | MDN

https://www.tutorialrepublic.com/javascript-tutorial/javascript-event-propagation.php

JavaScript Event Propagation - Tutorial Republic