[Javascript] 이벤트 함수들

document 영역에서 사용되어지는 이벤트 함수들을 보자.

마우스 이벤트: click(), focus(), blur(), input(), change(), mouseover(), mouseout(), drag() => drop(), select(), scroll() 

키보드 이벤트: keydown(), keypress(), keyup()

기타 이벤트 관련 함수들: target, submit(), reset(), search()

함수를 태그 속성이나 요소에 직접 부여하는 방식보다는 차후 수정이나 유지보수의 편의를 위해 addEventListener('eventName', callback Function) 함수 사용을 권장한다. 

 

간단하게 활용해보자. 

 

엘비스 삼촌이 씐나게 춤추는 Fun in Acapulco의 움짤을 가져왔다. 

 

기본적으로 흑백이지만 마우스를 가져다대면 컬러 움짤이 대신 뜰 것이다. 

 

<h3 id="imgHere"></h3>

이미지를 출력할 곳을 잡고

document.addEventListener('mouseover', (e)=>{document.getElementById('imgHere').innerHTML=`<img src="/img/dance.gif">`;})
document.addEventListener('mouseout', (e)=>{document.getElementById('imgHere').innerHTML=`<img src="/img/dance1.gif">`;})

마우스 커서가 오버되면 움짤1, 마우스 커서가 벗어나면 움짤2를 출력자리 태그에 넣어줄거다.

 

 

Bosanova~!!