Cùng tìm hiểu về sự kiện mousedown và mouseup trong JavaScript. Đây là 2 sự kiện xảy ra khi chúng ta nhấn và nhả chuột, và bạn sẽ biết khái niệm cũng như cách bắt 2 loại sự kiện này trong JavaScript sau bài học này.

Sự kiện mousedown trong JavaScript là gì

Trong trạng thái con trỏ chuột nằm phía trên của một phần tử, sự kiện mousedown trong JavaScript xảy ra khi chuột được chuột được nhấp. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Sự kiện mouseup trong JavaScript là gì

Trong trạng thái con trỏ chuột nằm phía trên của một phần tử, sự kiện mouseup trong JavaScript xảy ra sau khi chuột được nhả ra từ trạng thái được nhấp. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Bắt sự kiện mousedown và mouseup trong JavaScript

Để bắt sự kiện mousedown và mouseup trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện xảy ra, và phải đăng ký trình xử lý sự kiện này vào Element cần quan sát.

Tuỳ vào cách đăng ký trình xử lý sự kiện mà chúng ta có 3 phương pháp bắt sự kiện mousedown và mouseup trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính onmousedown và onmouseup

Chúng ta có thể sử dụng thuộc tính onmousedown và onmouseup của Element để bắt sự kiện mousedown, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho các giá trị thuộc tính này của Element.

Ví dụ cụ thể:

<input type="button" value="button" onmousedown="mouseDown()" onmouseup="mouseUp()">

<script>
function mouseDown(){
    console.log('MouseDown');
}

function mouseUp(){
    console.log('MouseUp');
}
</script>

Trong ví dụ này, trình xử lý sự kiện mouseDown() được đăng ký cho thuộc tính onmousedown, và trình xử lý sự kiện mouseUp() được đăng ký cho thuộc tính onmouseup của Element có tag input, nên khi các sự kiện này xảy ra đối với Element này, trình xử lý sự kiện sẽ bắt và xử lý chúng.

Phương pháp 2: Sử dụng thuộc tính onmousedown và onmouseup của Element thu được từ DOM

Cũng với phương pháp dùng thuộc tính onmousedown và onmouseup để đăng ký trình xử lý sự kiện, tuy nhiên lần này chúng ta không đăng ký trực tiếp vào thuộc tính của Element, mà bằng cách sử dụng DOM để lấy Element rồi mới đăng ký.

Ví dụ cụ thể:

<input type="button" value="button" id="btn">

<script>
function mouseDown(){
    console.log('MouseDown');
}

function mouseUp(){
    console.log('MouseUp');
}

let button = document.getElementById('btn');
button.onmousedown = mouseDown;

button.onmouseup = mouseUp;
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó mới dùng thuộc tính onmousedown và onmouseup của Element đó để đăng ký trình xử lý sự kiện giúp bắt các sự kiện khi nó xảy ra.

• Xem thêm: getElementById trong JavaScript

Phương pháp 3: Sử dụng phương thức addEventListener

Với phương pháp này, chúng ta cũng dùng DOM để lấy Element cần đăng ký trình xử lý sự kiện. Sau đó khai báo tên sự kiện cũng như tên trình xử lý sự kiện vào Element bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<input type="button" value="button" id="btn">

<script>
function mouseDown(){
    console.log('MouseDown');
}

function mouseUp(){
    console.log('MouseUp');
}
let button = document.getElementById('btn');
button.addEventListener('onmousedown', mouseDown);
button.addEventListener('onmouseup', mouseUp);
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó dùng phương thức addEventListener của Element đó để đăng ký trình xử lý sự kiện mouseDown tương ứng với tên sự kiên onmousedown, và trình xử lý sự kiện mouseUp tương ứng với tên sự kiên onmouseup nhằm giúp bắt các sự kiện khi nó xảy ra.

• Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với các sự kiện mousedown và mouseup, một MouseEvent Object kế thừa từ Event Object sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng MouseEvent này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng MouseEvent được trả về này.

<input type="button" value="button" id="btn">

<script>
function mouseDown(event){
    console.log(event);
}

function mouseUp(event){
    console.log(event);
}

let button = document.getElementById('btn');
button.addEventListener('mousedown', mouseDown);
button.addEventListener('mouseup', mouseUp);
</script>

Ví dụ bắt sự kiện mousedown và mouseup trong JavaScript

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách bắt sự kiện mousedown và mouseup trong JavaScript như sau. Trong ví dụ này chúng ta sử dụng tới phương pháp 3: Sử dụng phương thức addEventListener để bắt sự kiện. Các phương pháp khác cũng tiến hành tương tự.

Trong ví dụ này chúng ta sử dụng đến thẻ canvas, là một thẻ HTML5 giúp xây dựng Graphic đồ họa.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style type="text/css">
#mycanvas{
border:1px solid #000000;
}
</style>
</head>
<body>

<p>Vẽ một đường thẳng trên Canvas</p>

<canvas id="mycanvas" width="600" height="200"></canvas>

<script>
let startx = 0;
let starty = 0;

function mouseDown(event){
    startx = event.offsetX;
    starty = event.offsetY;

    context.beginPath();
    context.arc(startx, starty, 10, 0, 2 * Math.PI);
    context.stroke();
}

function mouseUp(event){
    context.beginPath();
    context.moveTo(startx, starty);
    context.lineTo(event.offsetX, event.offsetY);
    context.stroke();

    context.beginPath();
    context.arc(event.offsetX, event.offsetY, 10, 0, 2 * Math.PI);
    context.stroke();
}

let mycanvas = document.getElementById('mycanvas');
let context = mycanvas.getContext('2d');

mycanvas.addEventListener('mousedown', mouseDown);
mycanvas.addEventListener('mouseup', mouseUp);
</script>

</body>
</html>

Với mã lệnh này, chúng ta có thể nhấp chuột (sự kiện mousedown xảy ra), giữ và di chuyển đến một vị trí khác rồi sau đó mới thả chuột (sự kiện mouseup xảy ra).

Khi đó, sẽ có một đường thẳng nối 2 điểm khi xảy ra 2 sự kiện này trên hiện ra trên màn hình như sau:

Sự khác biệt giữa sự kiện click, mousedown và mouseup

Cả 3 sự kiện click, mousedown và mouseup đều xảy ra trong quá trình chúng ta nhấp và thả chuột. Tuy nhiên thời điểm xảy ra của mỗi sự kiện trong quá trình này là hoàn toàn khác nhau.

Sự kiện click xảy ra khi chuột trái được nhấp và sau đó được thả ra. Trong khi đó sự kiện mousudown xảy ra khi chuột được nhấp, và sự kiện mouseup xảy ra khi chuột được thả.

Bởi vậy cả 3 sự kiện này nếu được đăng ký vào Event Listener đối với cùng một Element Object, thì quá trình xử lý sẽ theo thứ tự phát sinh của các sự kiện này như sau:

Bạn có thể xem thêm về quá trình này tại bài viết Quá trình xử lý khi sự kiện click xảy ra trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện mousedown và mouseup trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/su-kien-trong-javascript/mousedown-mouseup-trong-javascript/