[JavaScript] 자바스크립트 이벤트 추가하기 (addEventListener())

107_자브스크립트 이벤트 추가하기

[적용]

• 이벤트의 함수를 지정하고 싶을 때

---

[문법]

메소드	의미	반환
이벤트타겟,addEventListener(이벤트이름, 리스너, [옵션*])	이벤트 리스너 설정	없음

*생략 가능

---

[내용]

addEventListener()를 사용해 이벤트의 함수를 지정할 수 있다.

이벤트 발생 시 실행하는 이벤트의 함수는 다음과 같이 다양한 방법으로 기술이 가능하다.

 

// 요소의 참조 정보 가져오기
const button = document.querySelector('button');

// 화살표 함수 사용하기
button.addEventListener('click', () => {
	console.log('버튼 클릭 이벤트가 발생하였습니다.');
});

화살표 함수는 this 를 고정할 수 있다는 장점을 가졌다.

 

// 요소의 참조 정보 가져오기
const button = document.querySelector('.button');

// function 선언을 사용하기
button.addEventListener('click', function() {
	console.log('버튼 클릭 이벤트가 발생하였습니다.');
});

// 요소의 참조 정보 가져오기
const button = document.querySelector('.button');

// 함수명 지정하기
button.addEventListener('click', onClickButton);

function onClickButton() {
	console.log('버튼 클릭 이벤트가 발생하였습니다.');
}

---

[Appendix]

이벤트 정보 가져오기

이벤트의 함수는 인수를 통해 이벤트 정보를 가져올 수 있다.

button.addEventListener('click', (event) => {
	// 이벤트 정보 출력
    console.log(event);
});

 

이벤트 정보(이벤트 객체)는 발생한 이벤트에 따라 MouseEvent나 KeyboardEvent 등 다양한 종류가 있다.

이벤트 객체는 이벤트가 발생한 요소와 참조 정보, 입력된 키 등의 정보를 포함한다.

발생한 요소는 target 속성을 이용해 확인할 수 있다.

button.addEventListener('click', (event) => {
	// 클릭한 버튼의 요소 출력
    console.log(event.target);
});

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김