Sự kiện nhấp chuột trong html là gì?

Mô hình đối tượng tài liệu (DOM) được tạo bởi trình duyệt khi trang web được tải. Đây là cấu trúc dữ liệu biểu thị trang dưới dạng một loạt các nút và đối tượng. Đại diện cho trang trong DOM giúp các chương trình tương tác và thao tác trên trang dễ dàng hơn

Sự kiện DOM là tín hiệu được gửi khi các sự kiện cụ thể xảy ra trên trang. Có nhiều loại sự kiện DOM và chúng cho phép JavaScript can thiệp và thực thi mã tùy chỉnh để phản hồi các sự kiện khi chúng xảy ra. Một sự kiện có thể được thêm vào trang HTML hoặc trực tiếp thông qua JavaScript

Sự kiện onclick xảy ra khi người dùng nhấp vào một phần tử có sự kiện onclick được chỉ định

Thêm sự kiện onclick vào tài liệu HTML

Đoạn mã sau định nghĩa một hàm, hello(), in ra 'Xin chào clicker. ' vào bảng điều khiển

JavaScript

function greet() {
    console.log('Hey there clicker!');
}

Chúng tôi có thể đặt Nút HTML để gọi chức năng này khi nhấp vào nút

Ví dụ dưới đây cho thấy cách một sự kiện onclick được chỉ định trực tiếp trong tài liệu HTML

HTML

Click me

Đoạn mã trên hiển thị một nút trên màn hình của người dùng với nội dung 'Nhấp vào tôi'. Khi được nhấp vào, chức năng chào () sẽ được gọi và 'Xin chào người nhấp chuột. ’ sẽ được in ra bàn điều khiển

Ví dụ trên sử dụng khai báo hàm. Kết quả tương tự có thể đạt được với một

JavaScript

const greeting = function greet() {
    console.log('Hey there clicker!');
}

Đoạn mã trên sử dụng một biểu thức hàm để lưu trữ hàm xử lý trong một biến – const Greeting

Để gọi trình xử lý, chúng tôi sử dụng tên của biến – chứ không phải tên của hàm – khi xác định trình xử lý sự kiện onclick. Hàm này cũng có thể là khi được xác định

HTML

Click me

Ví dụ trên gán biến chào mừng const làm trình xử lý onclick cho nút 'Nhấp vào tôi'

Tìm hiểu thêm về các chức năng JavaScript bằng cách nhấp vào liên kết này

Ghi chú. Để gọi một biểu thức hàm, dấu ngoặc đơn phải xuất hiện sau tên biến

Thêm sự kiện onclick bằng mã JavaScript

Ngoài việc xác định trình xử lý trên một phần tử HTML riêng lẻ, bạn cũng có thể tự động thêm trình xử lý bằng mã JavaScript. Có hai cách để thực hiện điều này

1. gán sự kiện trực tiếp cho một phần tử;
2. sử dụng trình lắng nghe sự kiện

Trong cả hai trường hợp, bản thân Nút trong tài liệu HTML ban đầu sẽ không có sự kiện onclick được gán cho nó khi được xác định

HTML

Click me

Trong đoạn HTML ở trên, nút không có sự kiện nào được gán cho nó. Đó là một nút đơn giản với văn bản

Cả hai cách tiếp cận để thêm trình xử lý sự kiện bằng JavaScript đều yêu cầu chúng tôi lấy một tham chiếu đến nút và nối thêm một sự kiện vào đó. Dưới đây là một ví dụ về việc lấy tham chiếu đến nút của chúng tôi từ DOM

JavaScript

const myButton = document.querySelector('button');
console.log(myButton);

Có nhiều cách khác nhau để lấy tham chiếu đến phần tử DOM. Ví dụ trên sử dụng phương thức Document querySelector để truy xuất định nghĩa của nút. Đoạn mã sau đó in tham chiếu đến bảng điều khiển, đây đơn giản là HTML để xác định nút

Nhấp vào đây

Bây giờ chúng ta có một tham chiếu đến phần tử, chúng ta có thể sử dụng tham chiếu đó để chỉ định một trình xử lý sự kiện

Chỉ định một trình xử lý sự kiện trực tiếp cho một phần tử

Để gán một trình xử lý sự kiện trực tiếp cho phần tử, chỉ cần đặt thuộc tính được liên kết trên tham chiếu của phần tử như bên dưới

JavaScript

myButton.onclick = greet

Trong ví dụ trên, lời khai báo hàm chào được gán trực tiếp cho phương thức onclick của nút

Ghi chú. Trong ví dụ trên, dấu ngoặc đơn của hàm được bỏ qua. Nếu chúng được bao gồm, thì lời chào () sẽ được gọi ngay lập tức, ngay cả khi không có sự kiện kích hoạt và do đó, trình xử lý sẽ không hoạt động bình thường

Khi sử dụng , quy trình tương tự cũng được áp dụng – đặt giá trị trình xử lý thành tên biến mà không có dấu ngoặc đơn, như bên dưới

JavaScript

myButton.onclick = greeting

Chỉ định một sự kiện bằng cách sử dụng trình lắng nghe sự kiện

Trình lắng nghe sự kiện đảm nhận việc xử lý sự kiện đang được lắng nghe, tương tự như giao cho người khác chịu trách nhiệm gọi trình xử lý khi sự kiện xảy ra

JavaScript

Đoạn mã trên thêm một trình lắng nghe sự kiện vào myButton, nơi lưu trữ một tham chiếu đến phần tử mà chúng tôi muốn nhận các sự kiện trên đó. Với hành động này, đối tượng nút hiện đang "nghe" - chờ "nghe" một lần nhấp vào nút cụ thể đó - và sẽ gọi phương thức chào khi sự kiện đó xảy ra

Thông số

Các tham số cho addEventListener như sau

1. Tham số đầu tiên là sự kiện được lắng nghe

Ghi chú. sự kiện trên được xác định là 'nhấp chuột', không phải 'onclick'

2. Tham số thứ hai là chức năng gọi khi sự kiện xảy ra. Trong trường hợp này, hàm hello sẽ được gọi khi sự kiện diễn ra

Ghi chú. Một lần nữa, dấu ngoặc đơn được bỏ qua để ngăn hàm được gọi ngay lập tức

Ghi chú. A cũng có thể được sử dụng ở đây

yếu tố có thể nhấp

Phần lớn các phần tử HTML có thể được chỉ định một sự kiện onclick, trở thành "có thể nhấp" trong quá trình này. Trên thực tế, rất khó để tìm một phần tử HTML không thể gán sự kiện onclick. Nếu bạn chọn làm cho một phần tử có thể nhấp được, hãy trợ giúp người dùng bằng cách áp dụng con trỏ. kiểu con trỏ tới phần tử đó – điều này cung cấp một chỉ báo trực quan rằng một phần tử nhất định có thể nhấp được

HTML

I'm clickable

Trong ví dụ trên, các

phần tử có một sự kiện onclick được gán cho nó. Khi được nhấp, chức năng chào được gọi. Với việc thêm kiểu con trỏ vào phần tử, con trỏ sẽ xuất hiện dưới dạng bàn tay trỏ bất cứ khi nào nó di chuyển qua bất kỳ phần nào của phần tử.

phần tử khối. Điều này cho người dùng biết rằng

phần tử có thể được tương tác vớiCách tiếp cận trên có thể áp dụng cho nhiều loại phần tử HTML khác, hiển thị chúng có thể nhấp đượcTìm hiểu thêm về cách đặt kiểu cho các phần tử HTML bằng cách nhấp vào liên kết này

Ghi chú quan trọng

Có hai lưu ý quan trọng bổ sung cần ghi nhớ khi làm việc với các sự kiện onclick

1. Chỉ có thể gán một sự kiện onclick cho mỗi phần tử
2. Hai sự kiện DOM khác trước sự kiện nhấp chuột. mousedown và mouseup

Ví dụ dưới đây khám phá sự tương tác của từng sự kiện trong số ba sự kiện này. Cả ba sự kiện đều được gán cho cùng một nút, với mỗi nút nhận một bộ mã khác nhau để chạy

HTML

Click me

Mặc dù thứ tự xác định các trình xử lý sự kiện trên nút là tùy ý, nhưng các trình xử lý sự kiện sẽ luôn được gọi theo cùng một trình tự. Đầu ra được tạo bằng cách nhấp vào nút ở trên như sau

'Giai đoạn 1

Giai đoạn 2

Giai đoạn 3’

Điều này là do các sự kiện trên nút xảy ra theo đúng thứ tự sau

1. Giai đoạn 1 xảy ra trước, kích hoạt sự kiện onmousedown khi phím chuột được nhấn xuống
2. Giai đoạn 2 xảy ra tiếp theo, kích hoạt sự kiện onmouseup khi phím chuột được nhả ra và được phép trở về vị trí ban đầu
3. Giai đoạn 3 xảy ra ngay sau đó, kích hoạt sự kiện onclick

Ghi chú. Trình tự trên chỉ áp dụng khi sử dụng nút chuột trái – nhấp bằng nút chuột phải sẽ không kích hoạt sự kiện onclick

Sự kiện nhấp chuột là gì?

Onclick trong HTML là gì?

Click và Onclick là gì?

Onclick và click có giống nhau không?