마우스 버튼(왼쪽 또는 오른쪽 버튼)을 누르면 마우스 이벤트가 트리거됩니다. 키보드를 통해 트리거할 수 없습니다. 마우스 이벤트가 트리거되는 순서는 무엇입니까? 자세한 예는 아래에 나와 있습니다.
9개의 마우스 이벤트는 DOM 레벨 3 이벤트에 정의되어 있습니다.
mousedown: 마우스 버튼을 눌렀을 때(왼쪽 또는 오른쪽 버튼) 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
mouseup: 마우스 버튼을 놓고 팝업될 때 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
클릭: 마우스 왼쪽 버튼을 클릭하거나 Enter 키를 누를 때 트리거됩니다. 이는 접근성을 보장하는 데 중요합니다. 즉, onclick 이벤트 핸들러는 키보드와 마우스 모두에서 실행될 수 있습니다.
dblclick: 마우스 왼쪽 버튼을 두 번 클릭하면 트리거됩니다.
mouseover: 마우스를 대상 요소 위로 이동합니다. 마우스가 하위 요소 위로 이동할 때 발생합니다.
mouseout: 마우스가 대상 요소 밖으로 이동합니다.
mouseenter: 마우스가 요소 범위로 이동할 때 트리거됩니다. 이 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소 위로 이동할 때 트리거되지 않습니다.
mouseleave: 마우스가 요소 범위 밖으로 이동할 때 트리거됩니다. 이 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소로 이동할 때 트리거되지 않습니다.
mousemove: 마우스가 요소 내부에서 움직일 때 지속적으로 트리거됩니다. 키보드를 통해 트리거할 수 없습니다.
note:
click 이벤트는 요소에서 mousedown 및 mouseup 이벤트가 연속적으로 트리거되는 경우에만 트리거됩니다. dblclick 이벤트는 두 개의 클릭 이벤트가 차례로 트리거될 때만 트리거됩니다.
mousedown이나 mouseup이 취소되면 클릭 이벤트가 발생하지 않습니다. 클릭 이벤트가 직접 또는 간접적으로 취소되면 dblclick 이벤트가 발생하지 않습니다.
예: 위에서 버튼을 두 번 클릭하면 발생하는 이벤트를 살펴보세요.
<input id="btn" type="button" value="click"/><script> var btn = document.getElementById("btn"); btn.addEventListener("mousedown",function(event){ console.log("mousedown"); },false); btn.addEventListener("mouseup",function(){ console.log("mouseup"); },false); btn.addEventListener("click", function () { console.log("click"); },false); btn.addEventListener("dblclick", function () { console.log("dblclick"); },false);</script>
코드 보기
차이점:
mouseover 이벤트는 버블링됩니다. 즉, 마우스가 하위 요소 위로 이동할 때 트리거됩니다.
mouseenter 이벤트는 버블링되지 않습니다. 즉, 마우스가 하위 요소 위로 이동할 때 발생하지 않습니다.
예:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #outer{ position: absolute; width: 200px; height: 200px; top:0; left: 0; bottom:0; right: 0; margin: auto; background-color: pink; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px;; background-color: orange; text-align: center; line-height: 100px; } #outer,#inner{ border-radius:50%; } </style> <script src="jquery-2.1.1.min.js"></script></head><body><body> <p id="outer"> <p id="inner"> </p> </p></body><script> var parentp = document.getElementById("outer"); parentp.addEventListener("mouseover", function () { console.log("父p的mouseover事件被触发"); },false); //parentp.addEventListener("mouseenter", function () { // console.log("父p的mouseenter事件被触发"); //},false); //parentp.addEventListener("mouseout", function () { // console.log("父p的mouseout事件被触发"); //},false); //parentp.addEventListener("mouseleave", function () { // console.log("父p的mouseleave事件被触发"); //},false);</script></body></html>
코드 보기
note:
mouseover는 mouseout에 해당하고, mouseenter는 mouseleave에 해당합니다. 위 코드의 주석 처리를 제거하면 효과를 확인할 수 있습니다.
jquery의 hover API는 mouseenter와 mouseleave의 조합입니다.
<script type="text/javascript">document.onmousedown=function (ev){ var oEvent = ev||event; //IE浏览器直接使用event或者window.event得到事件本身。 alert(oEvent.button);// IE下鼠标的 左键是1 , 右键是2 ff和chrome下 鼠标左键是0 右键是2};</script>
관련 추천:
JavaScript 이벤트 학습 요약(2) js 이벤트 핸들러
javaScript 이벤트 학습 요약(4) 이벤트의 공개 멤버(속성) 및 메소드)
JavaScript 이벤트 학습 요약(3) js 이벤트 객체
JavaScript 이벤트 학습 요약(1) 이벤트 흐름
동영상: JavaScript 마우스 오버 이벤트(onmouseover)-javascript 초보자 튜토리얼
위 내용은 js 마우스 클릭으로 인해 이동 이벤트가 발생하는 솔루션 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!