Làm cách nào để nhận sự kiện nhấp chuột trong JavaScript?

Phương thức “click()” được sử dụng để thực hiện thao tác nhấp chuột vào phần tử đã chỉ định. Phương pháp này có thể được thực hiện bằng cách tạo một nút, lấy id của nó và kích hoạt sự kiện nhấp khi nút được nhấp bằng hàm do người dùng xác định

Đi qua ví dụ sau để minh họa

Thí dụ
Trong ví dụ sau, một nút sẽ được thêm có id là “Click Me” và sự kiện onclick được liên kết của nút đó, nút này sẽ truy cập vào chức năng “clickEvent()”

< loại nút = "nút" id< = "btn" onclick= "clickEvent()">Click Mebutton>

Trong mã JavaScript, truy cập nút đã tạo bằng cách chỉ định id của nó trong tài liệu. phương thức getElementById(). Sau đó, phương thức “click()” sẽ được gọi để thực hiện thao tác tiếp theo

const lấy= tài liệu. getElementById('btn');
nhận . nhấp chuột();

Cuối cùng, xác định chức năng có tên “clickEvent()” theo cách nó sẽ in ra thông báo sau trên bảng điều khiển khi nút được nhấp bằng phương thức “click()”

chức năng sự kiện nhấp chuột () {
    bảng điều khiển. log("Sự kiện nhấp được kích hoạt")
}

Đầu ra của việc thực hiện trên sẽ có kết quả như sau

Trong đầu ra ở trên, có thể thấy rằng nút “Click Me” được nhấp theo cách tự động bằng cách sử dụng phương thức “click()”. Trong khi đó, hàm clickEvent() được truy cập và thông báo đã chỉ định được ghi vào bảng điều khiển

Phương pháp 2. Kích hoạt sự kiện nhấp chuột trong JavaScript bằng cách sử dụng các phương thức “addEventListener()” và “dispatchEvent()”

Phương thức “addEventListener()” gắn một trình xử lý sự kiện vào một đối tượng DOM và phương thức “dispatchEvent()” gửi sự kiện đã chỉ định đến đối tượng. Các phương thức này có thể được sử dụng kết hợp để tạo một đối tượng Sự kiện mới và thực thi sự kiện nhấp chuột với sự trợ giúp của hàm được chỉ định

cú pháp

tài liệu. addEventListener( sự kiện , hàm)

Trong cú pháp trên, “sự kiện” đề cập đến sự kiện được chỉ định và “hàm” là chức năng mà sự kiện sẽ được áp dụng

sự kiện công văn ( sự kiện )

Ở đây, “sự kiện” đề cập đến đối tượng sự kiện đã chọn cần được gửi đi

Tổng quan ví dụ sau

Thí dụ
Bước đầu tiên là bao gồm một nút có id, sự kiện onclick và giá trị như đã thảo luận trong phương pháp trước

< loại nút = "nút" id< = "btn" onclick= "clickEvent()">Click Mebutton>

Sau đó, tìm nạp nút và thêm sự kiện “nhấp chuột” bằng phương thức “addEventListener()” và chỉ định “e” trong đối số của nó đề cập đến đối tượng sự kiện (nhấp chuột). Sau đó, phương thức “dispatchEvent()” sẽ gửi sự kiện nhấp chuột đến một đối tượng có tên là “Sự kiện” như minh họa

const lấy = tài liệu. getElementById('btn');
nhận . addEventListener('click', e => {});
nhận . Sự kiện công văn(sự kiện mới Event('click'));

Cuối cùng, xác định hàm clickEvent() giống như đã nêu trong phương thức trước đó để hiển thị thông báo tương ứng khi sự kiện “nhấp chuột” được kích hoạt

chức năng sự kiện nhấp chuột () {
    bảng điều khiển. log("Sự kiện nhấp được kích hoạt")
}

đầu ra

Chúng tôi đã biên soạn các phương pháp khác nhau để kích hoạt các sự kiện nhấp chuột trong JavaScript

Phần kết luận

Để kích hoạt các sự kiện nhấp chuột trong JavaScript, phương thức “click()” có thể được áp dụng để tìm nạp nút và gọi hàm đã thêm tương ứng. Ngoài ra, các phương thức “addEventListener()” và “dispatchEvent()” có thể được sử dụng để bao gồm một sự kiện đã chỉ định và gửi nó đến một đối tượng mới được tạo. Bài viết này trình bày các phương pháp kích hoạt sự kiện nhấp chuột trong JavaScript

Như thường lệ trong hướng dẫn của chúng tôi, chúng tôi không muốn chỉ cho bạn phải làm gì. Chúng tôi muốn giải thích những gì chúng tôi làm thực sự có nghĩa là gì. Nếu bạn đang vội và chỉ muốn mã, chỉ cần cuộn đến cuối bài viết để biết TL;DR

Trình xử lý sự kiện nhấp chuột là gì?

Điều đầu tiên trước tiên… "trình xử lý sự kiện nhấp chuột" thực sự có nghĩa là gì?

Hãy chia phần này thành hai phần cho rõ ràng. MDN Web Docs mô tả một sự kiện nhấp chuột rất hay nên tôi sẽ trích dẫn chúng ở đây

Một phần tử nhận được một sự kiện nhấp chuột khi một nút thiết bị trỏ (chẳng hạn như nút chuột chính của chuột) được nhấn và nhả trong khi con trỏ nằm bên trong phần tử

Bây giờ chúng ta đã biết sự kiện nhấp chuột là gì, chúng ta có thể coi trình xử lý sự kiện nhấp chuột là một công cụ cho phép chúng ta thực hiện điều gì đó khi sự kiện nhấp chuột xảy ra

Khi nào chúng ta muốn sử dụng một?

Câu trả lời ngắn gọn là "tải"

Trình xử lý sự kiện nhấp chuột rất phổ biến và được sử dụng ở mọi nơi… cửa sổ bật lên, phương thức, nút, hoạt ảnh. Hầu như bất cứ khi nào khi nhấp vào một phần tử để thực hiện điều gì đó trên trang web, trình xử lý sự kiện nhấp chuột đã được sử dụng để thực hiện điều gì đó

Làm thế nào nó hoạt động?

Chúng tôi sẽ không nói quá nhiều về kỹ thuật ở đây… chúng tôi sẽ xem xét vấn đề này từ cấp độ cao

• Mã JavaScript của chúng tôi yêu cầu trình duyệt chú ý đặc biệt đến một phần tử (hoặc các phần tử) mà chúng tôi chỉ định và lắng nghe người dùng nhấp vào phần tử đó
• We can specify the element by using its ID or with a class name if we want to specify multiple elements. We can even specify by element type (e.g. all elements).
• Khi trình duyệt phát hiện người dùng đã nhấp vào phần tử được chỉ định, mã JavaScript của chúng tôi sẽ yêu cầu trình duyệt thực hiện điều gì đó. “Cái gì đó” đó được lưu trữ trong một chức năng

Vậy… mã là gì?

Để trợ giúp về ngữ cảnh, hãy tưởng tượng rằng chúng tôi muốn thêm một sự kiện nhấp chuột vào một nút có ID là #myBtn trên trang web của chúng tôi. Để làm như vậy, trình xử lý sự kiện nhấp chuột của chúng tôi sẽ trông như thế này

document.querySelector('#myBtn').addEventListener('click', function () {
 // do something
});

Bạn có thể giải thích mã?

Chắc chắn rồi. Hãy làm điều đó từng chút một…

document.querySelector('#myBtn')

This tells the browser to pay attention to the element on our page.

.addEventListener('click',

This tells the browser to listen out for clicks on the elements we specified which, in this example, is the

element.

function () {
 // do something
});

Đây là những gì trình duyệt nên làm khi sự kiện nhấp chuột xảy ra

TL;DR

Nếu bạn muốn xử lý sự kiện nhấp chuột, hãy sử dụng mã này. Nếu cần, hãy thay thế “#myBtn” cho bất kỳ phần tử nào bạn muốn đính kèm trình xử lý sự kiện nhấp vào (e. g. ID, lớp hoặc loại phần tử khác)

Làm cách nào để phát hiện sự kiện nhấp chuột trong JavaScript?

Bạn có thể phát hiện các nhấp chuột bên trong trang bằng trình xử lý sự kiện nhấp chuột đơn giản. tài liệu. onclick= function(event) { // Bù đắp cho mô hình sự kiện không chuẩn của IE

Làm cách nào để gọi sự kiện nhấp chuột trong JavaScript?

Để kích hoạt các sự kiện nhấp chuột trong JavaScript, có thể áp dụng phương thức “click()” để tìm nạp nút và gọi hàm đã thêm tương ứng . Ngoài ra, các phương thức “addEventListener()” và “dispatchEvent()” có thể được sử dụng để bao gồm một sự kiện đã chỉ định và gửi nó đến một đối tượng mới được tạo.

Làm cách nào để nắm bắt tất cả sự kiện nhấp chuột trong JavaScript?

Cửa sổ . phương thức CaptureEvents() đăng ký cửa sổ để nắm bắt tất cả các sự kiện thuộc loại đã chỉ định.