If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

요약: DOM 이벤트

이벤트 리스너 추가하기

요소에 이벤트가 발생하여 브라우저가 특정 함수를 호출하게 하려면 반드시 document.addEventListener를 이용해야 합니다.
var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
 console.log("Oh golly gosh, you clicked me");
};
buttonEl.addEventListener("click", onButtonClick);
많은 유효한 문자열을 첫 번째 인수로 넣을 수 있습니다. 이벤트 타입에 대한 내용을 참고하시기 바랍니다.
만약 발생한 이벤트에 관한 정보를 알고 싶으면 브라우저가 콜백 함수에 전달하는 이벤트 객체를 살펴보면 됩니다.
var faceEl = document.getElementById("face");  
var onFaceClick = function(e) {
  console.log("You clicked " + e.clientX + " , " + e.clientY);  
};  
faceEl.addEventListener("click", onFaceClick);
이벤트 객체에는 많은 프로퍼티가 있으며, 이 목록에서 살펴볼 수 있습니다
링크 클릭이나 폼 제출이 치환된다면 브라우저의 기본 동작을 방지하는 event.preventDefault()을 호출할 수 있습니다.

이벤트 리스너 제거하기

특정 이벤트 리스너가 더 이상 필요없게 되면 removeEventListener를 이용하여 제거할 수 있습니다.
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
 console.log("You clicked " + e.clientX + " , " + e.clientY);  };  
faceEl.addEventListener("click", onFaceClick);  
// 이후...
faceEl.removeEventListener("click", onFaceClick);