[JS] DOM_event : document영역에서 사용되는 이벤트

DOM_event

 : document영역에서 사용되는 이벤트를 정의

• 마우스, 키보드, 실행 등 이벤트의 종류는 매우 다양
• 웹에서 사용하는 이벤트를 기준으로 학습하는 것을 추천
• 사용 시)  
  • addEventListener ( 'eventName',callback Function ) 메서드를 사용하여 구현 권장
  • addEventListener를 권장하는 이유 :
    1. 같은 엘리먼트에 여러 이벤트를 중복 부여 가능,
    2. 적용된 이벤트를 선택적 제거가능
  • 메서드를 태그 속성이나, 엘리먼트에 직접 부여하는 방식도 있음

 

 

== 마우스 이벤트 ==

• 종류
• click(), focus(), blur(), input(), change(), mouseover(),
• mouseout(), select(), scroll(), load(), drag() => drop() ...
• 개구리: 도치 / 다람쥐 : 레이첼 / 두더지: 모구모구

<div id="container">

        <img id="pic" src="/image/도치.png" alt="">

    </div>

   

 

<script>

        //이미지1이 마우스를 올리면 다른 그림으로 변경

        //마우스가 영역을 벗어나면 기존 그림으로 다시 변경

        let pic = document.getElementById('pic');

        //마우스를 이미지 위에 올렸을 때

        document.getElementById('pic').addEventListener('mouseover', ()=>{

            pic.src = "/image/레이첼.png";

        })

        //마우스를 이미지 밖으로 뺐을 때

        document.getElementById('pic').addEventListener('mouseout', ()=>{

            pic.src = "/image/모구모구.png";

        })

 

</script>

 

 

== 키보드 이벤트 ==

• 종류
• event.key => keyDown(), keyPress(), keyUp()

 

 

== 기타 이벤트 메서드 ==

• 종류
• preventDefault(), target(), submit()