Sự kiện dblclick trong JavaScript (khi double click chuột) | Laptrinhcanban.com

Sự kiện dblclick trong JavaScript (khi double click chuột)

Cùng tìm hiểu về sự kiện dblclick trong JavaScript. Bạn sẽ biết khái niệm cũng như cách bắt sự kiện dblclick trong JavaScript sau bài học này.


Có 3 phương pháp bắt sự kiện dblclick trong JavaScript như sau:

  • Sử dụng thuộc tính ondblclick để đăng ký trực tiếp trình xử lý sự kiện dblclick vào Element
  • Sử dụng thuộc tính ondblclick để đăng ký trình xử lý sự kiện dblclick vào Element thu được từ DOM
  • Sử dụng phương thức addEventListener

Sự kiện dblclick 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 dblclick trong JavaScript xảy ra khi chuột được nhấp 2 lần liên tục với khoảng cách thời gian giữa các lần nhấp là cực ngắn. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Tên sự kiện: dblclick
Loại sự kiện: MouseEvent
Khả năng Bubbling: Có
Khả năng Cancel: Có

Bắt sự kiện dblclick trong JavaScript

Để bắt sự kiện dblclick 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 dblclick 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 dblclick trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính ondblclick để đăng ký trực tiếp trình xử lý sự kiện vào Element

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

Ví dụ cụ thể:

<input type="button" value="button" ondblclick="buttonDoubleclick()">

<script>
function buttonDoubleclick(){
alert('Double Click');
}
</script>

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

Phương pháp 2: Sử dụng thuộc tính ondblclick để đăng ký trình xử lý sự kiện vào Element thu được từ DOM

Cũng với phương pháp dùng thuộc tính ondblclick để đă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 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="sample">

<script>
function buttonDoubleclick(){
alert('Double Click');
}

let button = document.getElementById('sample');
button.ondblclick = buttonDoubleclick;
</script>

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

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="sample">

<script>
function buttonDoubleclick(){
alert('Double Click');
}

let button = document.getElementById('sample');
button.addEventListener('dblclick', buttonDoubleclick);
</script>

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

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 sự kiện dblclick, 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="sample">

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

let button = document.getElementById('sample');
button.addEventListener('dblclick', buttonDoubleclick);
</script>

Bắt sự kiện double click button trong Javascript

Hãy cùng xem một ví dụ cụ thể sử dụng sự kiện dblclick để bắt sự kiện double click button trong Javascript.

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 dblclick. Các phương pháp khác cũng tiến hành tương tự.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Hãy double click button</p>

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

<script>
function buttonDoubleclick(){
alert('Double Click');
}

let button = document.getElementById('btn');
button.addEventListener('dblclick', buttonDoubleclick);
</script>

</body>
</html>

Với mã lệnh này, sau khi doubleclick chuột thì trình xử lý sự kiện buttonDoubleclick sẽ được đăng ký với tên sự kiện dblclick vào Element có id="btn" thông qua phương thức addEventListener.

Do vậy khi sự kiện double click button xảy ra, nó được bắt bởi trình xử lý sự kiện, và làm xuất hiện alert window như sau:

Bắt sự kiện dblclick chuột trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện dblclick 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.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.