<body>
<h1>이벤트 리스너 삭제</h1>
<p>아래 버튼에 마우스를 올리거나 클릭해보세요!</p>
<button id="btn">삭제 버튼</button>
<button id="btnCreate">생성 버튼</button>
<p id="text"></p>
<script type="text/javascript">
var btn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.
//var btn = document.getElementById("btnCreate"); 안써도됨 이유는 생각해볼 것
//리스너 등록
// 리스너는 수시로 멀 해야될때 사용한다.
// 1. 선택한 요소에 mouseover 이벤트 리스너를 등록
btn.addEventListener("mouseover",mouseoverBtn);
// 기능(버튼밖) / 실행 메소드 --> 즉 마우스가 버튼 밖에 있으면 메소드 실행
btn.addEventListener("mouseout",mouseoutBtn);
btn.addEventListener("click",clickRemoveBtn);
//btnCreate.addEventListener("click",createEventBtn); 안써도됨 이유는 생각해볼 것
function mouseoverBtn() {
document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
}
function mouseoutBtn() {
document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
}
function clickRemoveBtn() {
btn.removeEventListener("mouseover", mouseoverBtn);
btn.removeEventListener("mouseout", mouseoutBtn);
document.getElementById("text").innerHTML = "이벤트 리스너가 삭제됬어요!";
}
function createEventBtn() {
btn.addEventListener("mouseover",mouseoverBtn);
btn.addEventListener("mouseout",mouseoutBtn);
document.getElementById("text").innerHTML = "이벤트 리스너가 재생성됬어요";
}
</script>
</body>
마포구 주민