본문 바로가기
JavaScript 시리즈☕

🚀이벤트(event ) 사용하기~ 🚀 | JavaScript 시리즈 013

by @ENFJ 2021. 8. 6.

코드

주석

1. title 변수 에다가 document.querySelector()함수를 이용하여 html 의 내용을 가져옴.

15. title 변수에 이벤트리스너를 적용시킴. (click 이벤트 설정할거고 , handleTitleClick 함수 실행시킬거임)

3. handleTitleClick 함수 가 실행되면서 콘솔창에 title was clicked! 이 출력 되게 만듦. ( title 을 누를시에  이 모든게 실행됨.)

---------------------------------------------------------------------------------------------------------------

16. title 변수에 이벤트리스터 추가 ( mouseeneter라는 이벤트를 설정 : 마우스포인트를 위에 두면 변함), handleMouseEnter 함수를 실행시킬거임) 

8. handleMouseEnter 함수 가 실행되면 마우스 커서 를 title 글 위에 두면 mouse is here 로 바뀜. 

---------------------------------------------------------------------------------------------------------------
17. 위와 같음. 


 


결과

 

마우스를 글씨 위에 안 두었을 때

마우스를 글씨위에 두었을때 

클릭 + 마우스커서를 글(title) 위에 두었을때