주요 내용
컴퓨터 프로그래밍
요약: 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);