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 title xảy ra khi người dùng nhấp vào một phần tử có sự kiện title được chỉ định
Thêm sự kiện title 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 title đượ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 title. 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ý title 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 title 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
- gán sự kiện trực tiếp cho một phần tử;
- 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 title đượ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. title = 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 title 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. title = 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
________số 8Đ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 ' title'
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 title, 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 title. 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 title đượ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ới
Cá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 được
Tì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 title
- Chỉ có thể gán một sự kiện title cho mỗi phần tử
- 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
- 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
- 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
- Giai đoạn 3 xảy ra ngay sau đó, kích hoạt sự kiện title
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 title