BEB 07 2-2

event

이벤트 목록 -mdn
이벤트 버블링

• 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
• 해당 요소의 최상단까지 모든 이벤트를 호출한다.

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

• 거의 모든 이벤트는 버블링이 발생한다. (focus등 특수한 경우 제외하고)

버블링 중단하기

• event.stopPropagation()

이벤트 캡처링

• 특정 요소를 클릭했을 때, 최상단의 조상까지 올라간 다음 다시 클릭된 요소까지 내려오는 것
• 보통은 활용하진 않지만 아래와 같이 강제로 캡쳐링 이벤트를 만들 수 있다. true전달
  -elem.addEventListener("click", e => alert("캡쳐링"), true);
• p에 이벤트 발생시 아래 순서로 캡처링 발생하고, 역순으로 버블링 시작됨
  html -> body -> div -> p

event.target : 클릭된 가장 안쪽 엘리먼트
event.current.target : 이벤트가 등록된 엘리먼트

https://ko.javascript.info/bubbling-and-capturing

Element.closest()

• The closest() method of the Element interface traverses the element and its parents (heading toward the document root) until it finds a node that matches the specified CSS selector.

let pane = event.target.closest('.pane');
pane.remove(); // removes html elem

regex method

string.test(regex) // returns boolean
string.match(regex) // returns if match ? array of matching info : null

css override

bootstrap template

box-shadow 색상 오버라이드하기 - stackoverflow

.form-control:focus {
  border-color: #FF0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

live share

페어와 vscode LiveShare를 테스트 해봤다.
코드 공동 작성, 로컬 서버 공유, 채팅, 터미널 공유 기능이 잘 작동했음.

디자인패턴

top three design pattern recommendations
1. Strategy Design Pattern
if-else 반복 사용으로 다양한 입력값에 대한 로직을 처리하는 대신