[JS] JS 4 - 에이블런 프론트엔드부트캠프 13일차

1. 이벤트 핸들러

이벤트 핸들러란 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수이다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면 브라우저는 연결된 이벤트 핸들러를 실행한다.

 

1-1. HTML

    <button onclick="clickBtn()">click me</button>

function clickBtn() {
    alert("Button Clicked !");
}

1-2. DOM

btn.onclick = () => {
    console.log("1");
}

1-3. EventListener

btn.addEventListener("click", (event) => {
    console.log("1st Clicked")
})

 

1-4. DOM과 EventListener의 차이

① 콜백 개수

DOM 이벤트 핸들러는 여러 개의 콜백함수를 지정할 수 없다.

여러 개를 지정할 경우 마지막에 지정된 함수가 실행된다.

// onclick은 바인딩 시 덮어쓰기됨
btn.onclick = () => {
    console.log("1");
}
btn.onclick = () => {
    console.log("2");
}
btn.onclick = () => {
    console.log("3");
}

 

반대로 이벤트리스너는 여러 개의 콜백함수를 지정할 수 있다.

// addEventListener는 여러 개 바인딩 가능
btn.addEventListener("click", (event) => {
    console.log("1st Clicked")
})
btn.addEventListener("click", (event) => {
    console.log("2nd Clicked")
})
btn.addEventListener("click", (event) => {
    console.log("3rd Clicked")
})

 

② 호환성

DOM 이벤트 핸들러는 모든 브라우저에서 호환된다. 하지만 이벤트 리스너는 인터넷 익스플로러 IE 8버전 이하에서는 작동하지 않는다.

 

③ 캡처링 & 버블링

이벤트리스너를 사용한다면 이벤트 캡처링과 버블링을 제어할 수 있다. 이벤트리스너의 세번째 인자값으로 boolean 타입을 작성할 수 있다. 기본값은 False이고 true를 입력한다면 버블링 대신 캡처링을 사용할 수 있다.

 

https://welcometeaching-yes.tistory.com/62

[JS EventListener] 버블링 & 캡처링 - 프엔부캠 심화학습

 

2. 함수

2-1. 기명함수

이름이 있는 함수인 기명함수는 호출위치가 함수 선언의 앞, 뒤 어디든 상관없다.

// 기명함수의 호출위치는 상관없음
plus();

// 이름이 있는 함수 - 기명함수
function plus() {
    console.log(1+1);
}

 

2-2. 익명함수

이름이 없는 함수인 익명함수는 무조건 함수 선언의 뒤여야 한다.

// 이름이 없는 함수 - 익명함수
const minus = function() {
    console.log(1-1)
}

// 익명함수는 함수 표현 이후에 호출
minus();