[JavaScript] Event

1. Event

 

사용자와 웹 페이지 간의 상호작용이 있을 때 적절한 액션을 취한다.

 

가. 이벤트 유형

 

이벤트 이름	설명
click	사용자가 마우스 버튼을 클릭했을 때 발생
dblclick	사용자가 마우스 버튼을 빠르게 두 번 클릭했을 때 발생
mousedown	사용자가 마우스 버튼을 누르는 순간 발생
mouseup	사용자가 마우스 버튼을 눌렀다 뗄 때 발생
mouseover	마우스 포인터가 요소 위로 이동했을 때 발생
mouseout	마우스 포인터가 요소에서 벗어났을 때 발생
mousemove	마우스 포인터가 요소 위에서 움직였을 때 발생
contextmenu	사용자가 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 요청했을 때 발생

 

이벤트 이름	설명
keydown	키를 누르는 순간 발생 (ASCII)
keypress	키를 누르는 순간 발생하며, 키보드 입력을 받는 요소에만 적용 (KeyCode)
keyup	키를 눌렀다 뗄 때 발생

 

이벤트 이름	설명
submit	사용자가 폼을 제출할 때 발생 (암기)
focus	입력 요소가 포커스 받았을 때 발생
blur	입력 요소가 포커스를 잃었을 때 발생
change	select box, check box, radio button의 입력 요소의 값이 변경될 때 발생
input	input 또는 textarea의 입력 요소에 사용자가 입력할 때 발생
invalid	입력 요소가 유효성 검사에 실패했을 때 발생

 

---

나. 이벤트 핸들러 등록

 

1) 인라인 이벤트 핸들러

• 여러 개의 함수를 한 번에 호출 가능
• CBD(Component Based Development) 방식의 Angular/React/Vue.js에서 많이 사용.

<div onclick="m1(); m2();">click here</div>

 

2) 이벤트 핸들러 프로퍼티 방식

• HTML와 JavaScript 코드를 분리할 수 있다.
• 하나의 이벤트 핸들러만 바인딩할 수 있다.
• 잘 안 씀.

<button id="btn">click here</button>
<script type="text/javascript">
    const btn = document.querySelector("#btn");
    // 처음으로 바인딩된 이벤트 핸들러 => 실행되지 않는다.
    btn.onclick = function() {
        alert("실행 안됨!");
    };
    // 마지막으로 바인딩된 이벤트 핸들러 => 실행된다.
    btn.onclick = function () {
        alert("실행됨!");
    };
</script>

 

3) addEventListener 메서드 방식

• 전달 인자의 첫 번째에는 이벤트 이름, 두 번째에는 이벤트 핸들러, 세 번째에는 캡쳐링 여부를 사용.

<div id="div1">click here</div>
<script type="text/javascript">
    document.querySelector("#div1").addEventListener("click", openAlert, false);
    function openAlert(){
        alert("Alert!!!!");
    }
</script>

document.addEventListener(*event*, *function*, *Capture*)

• event : 이벤트 유형
• function : 이벤트 핸들러 함수
• Capture : 이벤트 전파 방식 (optional)(default는 false)

 

이 세 번째 인자(capture)는 이벤트의 전파 방식을 결정한다.

 

• capture == true
  • 이벤트는 '캡처링' 단계에서 처리된다.
  • 이벤트가 상위 요소에서 하위 요소 순서로 처리된다.
  • 이벤트는 실제로 발생한 요소에 도달하기 전에 상위 요소에서 먼저 감지되고 처리된다.
• capture == false
  • 이벤트는 '버블링' 단계에서 처리된다.
  • 이벤트가 실제로 발생한 요소에서 시작하여 상위 요소로 전파된다.
  • 이벤트는 발생한 요소에서 먼저 감지되고 처리되며, 이후에 상위 요소로 전파된다.

 

 

---

(24.06.23 추가)

2. event.target

 

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.

 

예를 들어, 다음과 같은 HTML 폼이 있다고 가정해 봅시다:

<form >
    <button type="button">버튼 1</button>
    <button type="button">버튼 2</button>
</form>
<script type="text/javascript">
    document.querySelector("form").addEventListener("click", print, false);
    function print(){
        console.log(this);
        console.log(event.target);
    }
</script>

this는 <form> 요소를 가리키고, event.target은 실제로 클릭한 버튼 요소를 가리킵니다.

 

event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있다.

 

• this(=event.currentTarget) : <form> 요소에 있는 핸들러가 동작했기 때문에 <form> 요소를 가리킵니다.
• event.target : 폼 안쪽에 실제 클릭한 요소를 가리킵니다.

 

---