[JavaScript] 자바 개발자 양성과정 23일차 - 마우스 위치 추적(offsetX, offsetY, 이벤트 삭제(removeEventListener())

🔆 자바스크립트로 마우스 위치 추적하기 - e.offsetX, e.offsetY

//이벤트 핸들러 (이벤트 리스너)
function showPoint(e) {
    const showPoint = document.getElementById("showPoint");
    showPoint.innerText = `x : ${e.offsetX}, y: ${e.offsetY}`;
};

 

 

🔆 자바스크립트로 이벤트 삭제하기 - removeEventListener()

DOM앨리먼트.removeEventListener("addevent에서 지정한 작동타입", addevent에서 지정한 이벤트 핸들러)

만약, 이벤트 핸들러 함수의 이름이 없으면 삭제가 안된다. 그래서 삭제를 하려는 Event는 function으로 분리해줘야한다.

const button = document.getElementById("button");
button.addEventListener("click", function (e) {
    div.removeEventListener("mousemove", showPoint)
});

 

See the Pen by hoyashu (@hoyashu) on CodePen.