WEB/JS

[JS] 마우스 이벤트

우와왕고기다 2023. 11. 11. 11:33

마우스 이벤트

마우스 이벤트는 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생합니다.

  • click : HTML요소를 클릭할 때 이벤트 발생
  • dbclick : HTML요소를 더블클릭할 때 이벤트가 발생
  • mousedown : 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생
  • mousemove : 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생

 

<h1>click!!!!</h1>
<h2>mouseover!!!!</h2>
<h3>mousemove!!!!</h3>
<script src="index.js"></script>

 

 

const h1 = document.querySelector("h1");
const h2 = document.querySelector("h2");
const h3 = document.querySelector("h3");
const clickFunc = () =>{
    console.log("click!!!!");
};
const mouseoverFunc = () =>{
    console.log("mouseover!!!!")
}
const mousemoveFunc = () =>{
    console.log("mousemove!!!!");
}
h1.addEventListener("click", clickFunc);
h2.addEventListener("mouseover", mouseoverFunc);
h3.addEventListener("mousemove", mousemoveFunc);