[javascript] 마우스 이벤트 종류 및 예시

자바스크립트 클릭 이벤트 종류

 

다음은 자바스크립트의 몇 가지 일반적인 클릭 이벤트 유형입니다.

• click: 요소를 클릭했을 때 발생
• dblclick: 요소를 두 번 클릭하면 시작됩니다.
• contextmenu: 마우스 오른쪽 버튼으로 컨텍스트 메뉴가 트리거될 때 시작됩니다.
• mousedown: 요소에서 마우스 버튼을 눌렀을 때 발생
• mouseup: 요소에서 마우스 버튼을 놓았을 때 발생
• mouseenter: 마우스 포인터가 요소에 들어갈 때 발생
• mouseleave: 마우스 포인터가 요소를 떠날 때 발생
• mouseover: 마우스 포인터가 요소 위로 이동할 때 발생
• mouseout: 마우스 포인터가 요소 밖으로 이동할 때 발생
• mousemove: 마우스 포인터가 요소 내에서 움직일 때 발생
• dragstart: 사용자가 요소를 끌기 시작하면 시작됩니다.
• drag: 사용자가 요소를 끌 때 발생
• dragend: 사용자가 요소 드래그를 중지하면 시작됩니다.
• dragenter: 드래그된 요소가 드롭 대상에 진입하면 시작됩니다.
• dragover: 드래그된 요소가 드롭 대상 위에 있을 때 시작됩니다.
• dragleave: 드래그한 요소가 드롭 대상을 벗어날 때 시작됩니다.
• drop: 드래그된 요소가 놓기 대상에 놓였을 때 발생합니다.

이것은 전체 목록이 아니며 상황과 사용 중인 라이브러리 또는 프레임워크에 따라 사용할 수 있는 보다 구체적인 또는 사용자 지정 이벤트가 있을 수 있습니다.

 

자바스크립트 클릭 이벤트 예시

 

<button id="myButton">Click me</button>
 
 
// Get the button element by its id
var button = document.getElementById("myButton");
 
// Add a click event listener to the button
button.
button.
 
button
addEventListener("click", function() {
  
 
// Code to execute when the button is clicked
  
  alert
 
 
alert("Button was clicked!");
});