event란 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다.
이를 위해서는 addEventListener메서드를 사용한다. 이 메서드는 요소에 이벤트 리스너를 추가해주며, 두 개의 파라미터가 필요하다. 첫 번째 파라미터는 이벤트의 유형을, 두 번째 파라미터는 리스너이다. 이는 해당 요소에서 파라미터로 주어진 이벤트가 발생할 때 실행된다.
- 클릭 이벤트 리스너 추가하기
<body>
<p>Click me</p>
</body>에서 클릭이 발생했을 때 p태그의 콘텐츠를 ‘Clicked’로 바꾸려고 한다.
let paragraph = document.querySelector('p');
paragraph.addEventListener('click', )addEventListener의 두 번째 파라미터에는 함수를 집어넣어야 한다.
paragraph.addEventListener('click', paragraph.textContent = 'Clicked');로는 쓸 수가 없다.
그러므로 콘텐츠를 변경하는 함수를 먼저 생성한다.
function changeParagraph(){
paragraph.textContent = 'Clicked';
}
paragraph.addEventListener('click', changeParagraph);이제 브라우저는 click이벤트가 일어날 때마다 changeParagraph함수를 실행시키게 된다. 파라미터에 함수를 전달할 때 괄호를 생략했는데, 이를 callback function이라고 한다.
이 함수는 다른 함수 또는 메서드에 파라미터로 전달된 함수를 의미한다.
공부 정리용 블로그