210816 TIL

TIL DAY 20

오늘 배운 일

✔️ 코드잇에서 JavaScript 중급

- 이벤트 위임 (Event Delegation)

• 이벤트 버블링을 이용하는 것이 이벤트 위임이다. 부모 요소에서 자식 요소들의 이벤트를 하나씩 관리하는 일이다. 자식 요소 하나 하나에 접근해서 addEventListener를 해주었는데, 이럴 필요 없이, 부모 요소에 addEventListener를 해주면, 자식 요소에 이벤트를 추가한 것과 같은 효과를 낸다.

예제)

결과값 :

• 옆에 코드를 보면은 부모 요소인 ul태그를 선택해서 하나씩 클릭을 하면은 작동이 완료된다. 또한, 버블링을 막을려면, e.stopPropagation( )를 사용하면 된다. 그리하여, 추가한 요소는 토글효과를 보지 못한다.

- 기본 동작 막기

• 버블링을 막기위해서 e.stopPropagation( )을 이용한다면,
  브라우저의 기본 동작을 막기위해서는 e.preventDefault()을 이용하면 된다.

예제)

결과값1 :

• 위에 코드를 잘 살펴보면, Link를 클릭하면은 보통은 다른 페이지로 넘어가지만, alert만 되는걸 확인할 수 있다. 그 이유는 a 태글 동작을 제어를 한 것이기 때문이다.

결과값2 :

• 옆에 있는 체크박스를 클릭을 해두고 검색하는 공간에 키보드를 입력해야 alert가 동작을 안하는데, 지금은 체크박스에 체크를 해두지 않은 상태다.

  

결과값3 :

• 오른쪽 마우스 클릭을 할 시, alert가 발동되면서, 문구가 나온다.

  

느낀점 :

• 오늘은 이벤트 버블링을 막아주는 효과와 브라우저 기본 동작을 제어하는 효과에 대해 배워봤는데, 특히 기본 동작을 제어하는 효과는 유요하게 쓰일 것 같다.