[JS] JavaScript - 이벤트, 이벤트 핸들러

1. 이벤트란 ?

• 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생
• 이벤트에 반응하여 자바스크립트로 요소 조종 가능! (특정 동작 수행 가능!)

 

1-1. 이벤트 종류

• 마우스 이벤트 : 마우스 조작과 관련된 이벤트
• 키 이벤트 : 키보드 조작과 관련된 이벤트
• 폼 이벤트 : form 태그 관련 동작에 관련된 이벤트
  • http 메서드와 관련 ⇒ POST, PUT 등에 관련한 동작
• 이외에도 여러 이벤트 존재

 

1-2. 이벤트 핸들러

• 이벤트 발생 시 처리 담당하는 함수
  • addEventListener 내장함수
  • 지정된 이벤트가 발생 → 그 요소에 등록된 이벤트 핸들러 실행함

var button = document.getElementById("btn");

button.addEventListener("click", function() {
    console.log("button clicked");
});

 

1-2-1. 이벤트 핸들러 등록 - HTML 속성

• HTML 요소의 ‘on이벤트명’ 속성에 동작 추가하는 방법
• HTML 코드에 JS 코드가 포함되는 방식 ⇒ 권장 x !!

<button onclick = "handleClick()">Click Evenet</button>

<!-- .. -->

<script>
    function handleClick() {
        console.log("button clicked");
    }
</script>

<button onclick="console.log("button clicked")">Click Event</button>

 

1-2-2. 이벤트 핸들러 등록 - node 객체 프로퍼티

• node 객체의 ‘on이벤트명’ 프로퍼티에 핸들러 함수 등록

var button = document.getElementById("btn");

button.onclick = function () { console.log("button clicked"); }

 

1-2-3. 이벤트 핸들러 등록 - addEventListener

• addEvenetListener
  • 첫 번째 인수 : ‘이벤트명’ (on 붙이지 x)
  • 두 번째 인수 : 핸들러 함수

var button = document.getElementById("btn");

button.addEventListener("click", function() {
    console.log("button clicked");
});

 

1-2-4. 이벤트 핸들러 제거 - removeEventListener

button.removeEventListener("click", handleBtnClick);

 

1-3. event 객체

• 이벤트 핸들러 함수에 첫 번째 인수로 전달되는 객체
• 각 이벤트에 대한 정보와 기능 등을 event 객체를 통해 얻을 수 있음

var button = document.getElementById("btn");

button.addEventListener("click", function(**event**) {
    console.log("button clicked");
});

 

1-3-1. event 객체 - 마우스 정보

var button = document.getElementById("btn");

button.addEventListener("click", function(event) {
    console.log(event.clientX, evenet.clientY);
});

• event 객체를 통해 마우스에 대한 정보를 얻을 수 있음! (위치, 클릭 정보 등)

 

1-3-2. event 객체 - 키보드 정보

window.addEventListener("keypress", function (event) {
    document.getElementById("key".innerText = event.key.toUpperCase();
});

• event 객체를 통해 키보드에 대한 정보를 얻을 수 있음! (누른 키 정보 등)

 

1-3-3. event 객체 - target

var button = document.getElementById("btn");

button.addEventListener("click", function (event) {
    console.log(event.target);
});

• event.target 프로퍼티를 통해 이벤트가 발생한 타겟 요소의 node 객체에 접근 가능!

 

1-3-4. event 객체 - preventDefault

• form 태그 → submit 버튼의 기본동작 : form 제출 및 새로고침
• 이러한 기본동작을 막기 위해 event.preventDefault() 메서드 사용!

var loginForm = document.getElementById("login-form");

loginForm.addEventListener("submit", function (event) {
		event.preventDefault();
});

 

1-4. 이벤트 propagation

• 여러개의 부모 요소를 갖는 요소를 클릭(이벤트) 하면 ⇒ 이 이벤트는 모든 요소에서 발생함!
• ⇒ 모든 요소(부모 요소, 자식 요소 등)에서 이벤트 캐치 가능!
• 이벤트 발생 → DOM 트리를 통해 이벤트가 전파됨 : 이벤트 propagation

1. capturing phase
   • 이벤트가 최상위 부모 요소 부터 이벤트가 발생한 특정 요소 (타겟) 까지 전파됨
   • addEventListener의 세번째 인자로 true 전달하면 capturing phase에서 이벤트 캐치 가능!
2. target phase
   • 이벤트가 실제로 발생한 요소에 도달
3. bubbling phase
   • 이벤트가 타겟 요소에서 다시 최상위 부모 요소로 전파됨
   • addEventListener의 세번째 인자를 전달하지 않으면 bubbling phase에서 이벤트 캐치 가능!