JS - 이벤트

이벤트

프로그래밍에서 사건이 발생하는 경우 = 이벤트 발생

프로그램 상에서 이벤트가 발생하는 경우

1. 키보드로 특정 키를 누르는것
2. 마우스로 왼쪽 또는 오른쪽을 클릭하는 경우
3. 페이지로 로드하는 경우 등 어떤 특정한 요청을 하는 행위

HTML 태그의 속성으로 이벤트 처리

<태그 속성 = '속성값'이벤트 리스너 = '코드 또는 함수'>

이벤트 리스너 예시 코드

<input type = 'button' onclick = alert('버튼 클릭');>

addEventListener

1개의 이벤트에 여러 이벤트 핸들러를 등록하기 위해 사용

이벤트 기본 문법 구조
DOM요소.addEventListner(이벤트명, 실행할 함수명, 옵션)

onClick 함수로도 이벤트는 클릭 이벤트를 발생시킬 수 있지만, onClick은 한개의 이벤트만 등록이 가능한 반면, addEventListner는 여러개의 이벤 트를 등록할 수 있다는 점에서 차이가 존재한다.

이벤트 객체의 속성 및 메소드

• currentTarget: 현재 이벤트를 처리중인 요소, 이벤트 핸들러 내부의 this와 같음
• detail: 이벤트와 관련된 자세한 정보들
• preventDefault: 이벤트의 기본동작을 취소함
• stopPropagation: 이벤트 캡쳐링, 이벤트 버블링을 모두 취소함
• target: 이벤트 실제 요소
• type: 발생한 이벤트 타입
• clientX, clientY: 마우스 이벤트 발생 시 출력한 커서의 상대 좌표