특징
1. 1개 이상을 사용할 수 있다.
2. event.target
3. bubble event(phase)
- capturing phase (html > body > grandparent > parent > child) : outside to in
- bubbling phase (child > paraent >grandparent > body > html) : inside to out
4. removeEventListner
=> closet('<tag name>') bc of working out the HTML hierarchy
onclick vs addEventListner
onclick : 마지막 등록된 핸들러만 실행
addEventListner: 1개 이상의 핸들러 '동시' 실행 가능
$button.addEventlistner("click", ( )=>{
console.log(event.target)};
-지금 이벤트가 일어나는 순간의 타겟의 정보값 확인 가능
활용
웹사이트에 팝업이 떴을 때 팝업의 바깥 배경 쪽을 클릭하면 팝업이 꺼지는 코드를 짠다고 할 때, window를 클릭했을 때 event.target이 어떤 요소인지 알아야 함수를 실행할 수 있을 것이다. 그럴 때 콘솔로 event.target을 출력해서 알아낸 후 사용한다.
window.addEventListener('click', (event) => {
console.log(event.target)
이제 여기서 나온 event.target이 위에서 콘솔에 찍힌 요소와 같다면 함수를 실행하는 것으로 코드를 짜준다.
window.addEventListener('click', (event) => {
if(event.target === 요소) {
팝업꺼지는함수();
}
참조
'나의 FE피봇이야기 > Javascript' 카테고리의 다른 글
[splice] (0) | 2023.11.13 |
---|---|
객체 (0) | 2023.11.13 |
[Javascript] 변수선언, 함수, 생성자, 매서드 등 확인하는 방법 (0) | 2023.11.08 |
함수 정의 및 선언문 작성 그리고 event&event handler (2) | 2023.11.08 |
HTML과 JavaScript 차이점 2개 (0) | 2023.11.08 |