러닝 자바스크립트: ES6로 제대로 입문하는 모던 자바스크립트 웹 개발

381

18

장

브라우저의 자바스크립트

evt

.

preventDefault

();

removeParaHighlights

();

});

}

모든 요소에는

addEventListener

라는 메서드가 있습니다. 이 메서드를 통해 이벤트가 일어났

을 때 호출할 함수를 지정할 수 있습니다. 호출할 함수는

Event

타입의 객체 하나만 매개변수

로 받습니다. 이벤트 객체에는 해당 이벤트에 관한 정보가 모두 포함되어 있습니다. 예를 들어

click

이벤트에는 클릭한 좌표를 나타내는

clientX

,

clientY

프로퍼티가 있고, 이벤트가 일

어난 요소를 나타내는

target

프로퍼티도 있습니다.

이벤트 모델은 이벤트 하나에 여러 가지 함수(핸들러 )를 연결할 수 있도록 설계되어 있습니

다. 기본 핸들러가 지정된 이벤트도 많습니다. 예를 들어 사용자가

<

a

>

링크를 클릭하면 브라

우저는 이벤트에 응답해서 요청 페이지를 불러옵니다. 이런 기본 핸들러를 막으려면 이벤트 객

체에서

preventDefault

()

를 호출합니다. 기본 핸들러의 동작에 다른 기능을

추가하는

이벤트

핸들러를 만들 생각이 아니라면, 대부분의 이벤트 핸들러에서

preventDefault

()

를 사용하게

될 겁니다.

문단을 하이라이트할 때는

highlightParas

를 호출하면서 버튼의 데이터 속성

containing