MouseEvent là một interface đại diện cho các sự kiện xẩy ra khi người dùng tương tác với các thiết bị trỏ (pointing device), chẳng hạn như chuột. Các sự kiện thông thường như click, dbclick, mousedown, mouseup,... MouseEvent là một interface con của UIEvent.
 Các kiểu sự kiện của MouseEvent:
mousedown, mouseup, click Hãy bắt đầu với sự kiện phổ biến nhất trong các sự kiện chuột đó là click (Nhấp chuột), nó được hình thành từ hành động nhấn xuống (press down) và nhả (release). Sự kiện click được minh họa giống hình dưới đây:
Nếu bạn click (nhấp chuột) 2 lần nhanh nó sẽ tạo ra sự kiện dbclick. Sự kiện mouseenter xẩy ra khi con trỏ di chuyển vào một phần tử. Sự kiện mouseover xẩy ra khi con trỏ di chuyển vào một phần tử hoặc di chuyển vào một trong các phần tử con của nó.
Sự kiện mouseleave xẩy ra khi con trỏ di chuyển ra khỏi một phần tử. Sự kiện mouseout xẩy ra khi con trỏ di chuyển ra khỏi một phần tử hoặc di chuyển ra khỏi một trong các phần tử con của nó.
Ví dụ dưới đây giúp bạn so sánh mouseenter vs mouseover, mouseleave vs mouseout:
enter-vs-over-leave-vs-out.html <!DOCTYPE html> <html> <head> <title>Javascript Mouse Events</title> <script src="enter-vs-over-leave-vs-out.js"></script> <style> #target-div { width: 320px; height: 150px; background: blue; } #target-div > div { width: 50px; height: 80px; margin: 40px 0 0 40px; padding: 5px 0 0 5px; float: left; background: yellow; } </style> </head> <body> <h3>mouseenter vs mouseover</h3> <h3>mouseleave vs mouseout</h3> <div id="target-div" onmouseenter="mouseenterHandler(event)" onmouseover="mouseoverHandler(event)" onmouseleave="mouseleaveHandler(event)" onmouseout="mouseoutHandler(event)" > <div>Child</div> <div>Child</div> <div>Child</div> </div> <h3>Statistics:</h3> <div style="color:red;" id="statistics-div"> </div> </body> </html>
enter-vs-over-leave-vs-out.js var enterCount = 0; var overCount = 0; var leaveCount = 0; var outCount = 0; function mouseenterHandler(evt) { enterCount += 1; showStatistics(); } function mouseoverHandler(evt) { overCount += 1; showStatistics(); } function mouseleaveHandler(evt) { leaveCount += 1; showStatistics(); } function mouseoutHandler(evt) { outCount += 1; showStatistics(); } function showStatistics() { var html = "enterCount:" + enterCount + "<br/>" // + "overCount:" + overCount + "<hr/>" // + "leaveCount:" + leaveCount + "<br/>" // + "outCount:" + outCount ; document.getElementById("statistics-div").innerHTML = html; }<!DOCTYPE html> <html> <head> <title>Javascript Mouse Events</title> <script src="mousemove-example.js"></script> <style> #target-div { width: 320px; height: 150px; background: blue; margin-bottom: 50px; } #target-div > div { width: 50px; height: 150px; margin: 40px 0 0 40px; padding: 5px 0 0 5px; float: left; background: yellow; } </style> </head> <body> <h3>mousemove example</h3> <div id="target-div" onmousemove="mousemoveHandler(event)"> <div>Child</div> <div>Child</div> <div>Child</div> </div> <h3>Statistics:</h3> <div style="color:red;" id="statistics-div"> </div> </body> </html> var moveCount = 0; function mousemoveHandler(evt) { moveCount += 1; showStatistics(); } function showStatistics() { var html = "moveCount:" + moveCount; document.getElementById("statistics-div").innerHTML = html; } MouseEvent là interface con của UIEvent, vì vậy nó thừa kế các thuộc tính (property) và các phương thức từ interface này.
Ví dụ với thuộc tính ctrlKey:
prop-ctrlKey-example.html <!DOCTYPE html> <html> <head> <title>Javascript Mouse Events</title> <style> #target-div { width: 320px; height: 150px; background: blue; margin-bottom: 10px; } </style> <script> function clickHandler(evt) { var html = "evt.ctrlKey=" + evt.ctrlKey; document.getElementById("log-div").innerHTML = html; } </script> </head> <body> <h3>Press Ctrl key and Click</h3> <div id="target-div" onclick="clickHandler(event)" > </div> <div style="color:red;" id="log-div"> </div> </body> </html>
prop-positions-example.html <!DOCTYPE html> <html> <head> <title>Javascript Mouse Events</title> <script src="prop-positions-example.js"></script> <style> #target-div { width: 300px; height: 210px; background: #ccc; margin: 0px 0px 10px 20px; padding: 5px; } </style> </head> <body style="height:450px; width:1000px;"> <h3>Positions</h3> <div id="target-div" onmousemove="mousemoveHandler(event)" > </div> </body> </html>
prop-positions-example.js function mousemoveHandler(evt) { var html = "offsetX = " + evt.offsetX +"<br/>" + "offsetY = " + evt.offsetY +"<br/>" + "clientX = " + evt.clientX +"<br/>" + "clientY = " + evt.clientY +"<br/>" + "pageX = " + evt.pageX +"<br/>" + "pageY = " + evt.pageY +"<br/>" + "screenX = " + evt.screenX +"<br/>" + "screenY = " + evt.screenY +"<br/>" + "movementX = " + evt.movementX +"<br/>" + "movementY = " + evt.movementY; document.getElementById("target-div").innerHTML = html; }
event.buttons có thể trả về một giá trị khác các giá trị ở trên. Chẳng hạn event.buttons trả về 3 nếu bạn nhấn đồng thời cả 2 nút chuột trái và nút chuột phải.
prop-button-buttons-example.html <!DOCTYPE html> <html> <head> <title>MouseEvent Example</title> <script> function mousedownHandler(evt) { var logDiv = document.getElementById("log-div"); logDiv.innerHTML = "event.button= " + evt.button +"<br/>" + "event.buttons= "+ evt.buttons; } </script> </head> <body> <h3>event.button, event.buttons</h3> <button onmousedown="mousedownHandler(event)">Click Me!</button> <br/><br/> <div id="log-div" style="color:red;"></div> </body> </html>
|
