이벤트 리스너
페이지 정보
본문
<script type="text/javascript">
var p;
function event_ok(){
p=document.getElementById("p");
p.onmouseover = over; //id='p' 영역에 마우스오버이면 over() 실행
p.onmouseout = out; //id='p' 영역에 마우스아웃이면 out() 실행
p2=document.getElementById("p2");
p2.addEventListener("mouseover", over2); //id='p2' 영역에 마우스오버이면 over2() 실행
p2.addEventListener("mouseout", out2); //id='p2' 영역에 마우스아웃이면 out2() 실행
}
function over(){
p.style.backgroundColor='orchid';
}
function out(){
p.style.backgroundColor='white';
}
function over2(){
p2.style.backgroundColor='red';
}
function out2(){
p2.style.backgroundColor='white';
}
</script>
<body onload="event_ok();">
<h3>리스너 함수 등록</h3>
<hr>
<p onmouseover="this.style.background='yellow'" onmouseout="this.style.background='white'">마우스 올려봐</p>
<p id="p">마우스 올려봐</p>
<p id="p2">마우스 올려봐</p>
== tip ==
addEventListener()의 이름에 add가 사용된 이유는 동일한 이벤트에 대해 여러 개의 리스너를 중복 등록할 수 있기 때문이다.
리스너들은 등록된 순서대로 호출된다.
- 이전글■ 이벤트(event)란? 21.07.18
- 다음글이벤트 리스너에게 이벤트 객체 전달 받기 21.07.18
댓글목록
등록된 댓글이 없습니다.