관련 판독 값 :
JavaScript 이벤트 학습 요약 (v) JS의 마우스 이벤트 유형
//www.vevb.com/article/86259.htm
JavaScript 이벤트 학습 요약 (i) 이벤트 흐름
//www.vevb.com/article/86261.htm
JavaScript 이벤트 학습 요약 (iv) 이벤트 공개 멤버 (속성 및 방법)
//www.vevb.com/article/86262.htm
JavaScript 이벤트 학습 요약 (ii) JS 이벤트 핸들러
//www.vevb.com/article/86264.htm
JavaScript 이벤트 학습 요약 (iii) JS 이벤트 객체
마우스 이벤트
9 개의 마우스 이벤트는 DOM3 레벨 이벤트에서 정의됩니다.
Mousedown : 마우스 버튼을 누르면 (왼쪽 또는 오른쪽) 트리거됩니다.
키보드로 트리거 할 수 없습니다.
마우스 업 : 마우스 버튼이 해제되어 팝업 될 때 트리거되었습니다.
키보드로 트리거 할 수 없습니다.
클릭 : 마우스 왼쪽 버튼을 클릭하거나 Enter 키를 누를 때 트리거되었습니다. 이는 접근성을 보장하는 데 중요합니다. 즉, OnClick 이벤트 핸들러는 키보드와 마우스를 통해 실행할 수 있습니다. DBLCLICK : 왼쪽 마우스 버튼을 두 번 클릭하면 트리거됩니다. 마우스 오버 : 마우스를 대상 요소 위로 움직입니다. 마우스가 자손 요소 위로 움직일 때 이것은 발사됩니다. 마우스 아웃 : 마우스는 위의 대상 요소를 제거합니다.
마우스 센터 : 마우스는 요소의 범위로 이동하고 이벤트를 트리거합니다. 이벤트는 거품이 아닌 이벤트를 트리거합니다. 즉, 마우스가 자손 요소로 이동할 때 트리거되지 않습니다.
MOUSELEAVE : 마우스가 요소 범위에서 벗어날 때 트리거되고 이벤트가 거품이되지 않습니다. 즉, 마우스가 자손 요소로 이동할 때 트리거되지 않습니다.
MouseMove : 마우스는 요소 내부에서 움직일 때 지속적으로 트리거됩니다.
키보드로 트리거 할 수 없습니다.
메모:
Mousedown 및 Mouseup 이벤트는 클릭 이벤트를 트리거하기 위해 요소에서 연속적으로 트리거됩니다. DBLCLICK 이벤트는 두 번의 클릭 이벤트가 다시 시작된 경우에만 트리거됩니다.
Mousedown 또는 Mouseup 중 하나가 취소되면 클릭 이벤트가 트리거되지 않습니다. 클릭 이벤트가 직간접 적으로 취소되면 DBLClick 이벤트가 트리거되지 않습니다.
1. 이벤트 트리거 순서
예를 들어 : 버튼을 두 번 클릭하고 위의 트리거 된 이벤트를 살펴보십시오.
<body> <입력 id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.addeventListener ( "Mousedown", function (event) {console.log ( "Mousedown");}, false); btn.addeventListener ( "마우스 업", function () {console.log ( "mouseup");}, false); btn.adeventListener ( "click", function () {console.log ( "click");}, false); btn.adeventListener ( "dblclick", function () {console.log ( "dblclick");}, false); </script> </body>2. 마우스 센터와 마우스 오버의 차이
차이 :
마우스 오버 이벤트는 거품이 생깁니다. 즉, 마우스가 자손 요소로 움직일 때 발사됩니다.
마우스 센터 이벤트는 거품이 없으므로 마우스가 자손 요소로 이동할 때 발사되지 않습니다.
예를 들어:
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #outer {위치 : 절대; 너비 : 200px; 높이 : 200px; 상단 : 0; 왼쪽 : 0; 하단 : 0; 오른쪽 : 0; 마진 : 자동; 배경색 : 핑크; } #inner {위치 : 절대; 너비 : 100px; 높이 : 100px; 상단 : 50%; 왼쪽 : 50%; 마진 왼쪽 : -50px; 배경색 : 오렌지; 텍스트 정렬 : 센터; 라인 높이 : 100px; } #OUTER, #내부 {Border-Radius : 50%; . () {console.log ( "부모 div의 마우스 오버 이벤트가 트리거됩니다");}, false); // parentDiv.addeventListener ( "mouseEnter", function () {// console.log ( "부모 div의 마우스 엔터 이벤트가 트리거 됨"); // mouse " {// console.log ( "부모 div의 마우스 아웃 이벤트가 트리거됩니다"); //}, false); // parentdiv.addeventListener ( "mouseleave", function () {// console.log (부모 div의 mouseleave 이벤트가 발사되었습니다 "); // </html> </html> </html>메모:
마우스 오버는 마우스 아웃에 해당하고, 마우스 센터는 마우셀 리브에 해당합니다. 위의 코드에서 효과가 무너질 수 있습니다.
jQuery의 호버 API는 마우스 센터와 마우셀 리브를 결합합니다.
3. 왼쪽 및 오른쪽 마우스 버튼
<script type = "text/javaScript"> document.onmousedown = function (ev) {var oevent = ev || event; ALERT (OEVENT.BUTTON); // IE의 왼쪽 마우스 버튼은 1이고 오른쪽 마우스 버튼은 2이고 FF의 왼쪽 마우스 버튼은 Chrome의 오른쪽 마우스 버튼은 0이고 오른쪽 마우스 버튼은 2}; </script>입니다.4. 마우스 오버와 무스 미 모드의 차이
일반적으로 마우스 오버는 충분하지만 MouseMove는 특별한 상황에서만 사용됩니다. MouseMove는 마우스 좌표의 변화를 모니터링하는 것과 같이 더 많은 자원 소비입니다.
위의 것은 편집자 (V) JS의 이벤트 유형의 마우스 이벤트에 대한 관련 지식이 귀하에게 소개 한 JavaScript 이벤트 학습 요약입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!