Làm thế nào để bạn xử lý các sự kiện trong HTML?

Sự thay đổi trạng thái của một đối tượng được gọi là Sự kiện. Trong html, có nhiều sự kiện khác nhau biểu thị rằng một số hoạt động được thực hiện bởi người dùng hoặc bởi trình duyệt. Khi mã javascript được bao gồm trong HTML, js phản ứng với các sự kiện này và cho phép thực thi. Quá trình phản ứng lại các sự kiện này được gọi là Xử lý sự kiện. Do đó, js xử lý các sự kiện HTML thông qua Trình xử lý sự kiện

Ví dụ khi người dùng click vào trình duyệt thêm đoạn code js vào, đoạn code này sẽ thực thi tác vụ cần thực hiện trên sự kiện

Một số sự kiện HTML và trình xử lý sự kiện của chúng là

sự kiện chuột

Sự kiện được thực hiện Trình xử lý sự kiện Mô tảclick titleKhi nhấp chuột vào một phần tửmouseoveronmouseoverKhi con trỏ chuột đi qua phần tửmouseoutonmouseoutKhi con trỏ chuột rời khỏi phần tửmousedownonmousedownKhi nhấn nút chuột trên phần tửmouseuponmouseupKhi thả nút chuột trên phần tửmousemoveonmousemoveKhi di chuyển chuột diễn ra

sự kiện bàn phím

Sự kiện được thực hiệnTrình xử lý sự kiệnMô tảKeydown & Keyuponkeydown & onkeyupKhi người dùng nhấn rồi nhả phím

Sự kiện biểu mẫu

Sự kiện được thực hiệnTrình xử lý sự kiệnMô tảtiêu điểmvào tiêu điểmKhi người dùng tập trung vào một phần tửgửi biểu mẫuKhi người dùng gửi biểu mẫubluronblurKhi tiêu điểm cách xa phần tử biểu mẫuchangeonchangeKhi người dùng sửa đổi hoặc thay đổi giá trị của phần tử biểu mẫu

Sự kiện cửa sổ/tài liệu

Sự kiện được thực hiệnTrình xử lý sự kiệnMô tảloadonloadKhi trình duyệt tải xong trangunloadonunloadKhi khách truy cập rời khỏi trang web hiện tại, trình duyệt sẽ hủy tải nóresizeonresizeKhi khách truy cập thay đổi kích thước cửa sổ của trình duyệt

Hãy thảo luận về một số ví dụ về các sự kiện và trình xử lý của chúng

Nhấp vào Sự kiện

Kiểm tra nó ngay bây giờ

Sự kiện MouseOver

Kiểm tra nó ngay bây giờ

Tiêu điểm sự kiện

Kiểm tra nó ngay bây giờ

Sự kiện gõ phím

Kiểm tra nó ngay bây giờ

Tải sự kiện

Kiểm tra nó ngay bây giờ

Khi một sự kiện xảy ra, bạn có thể tạo một trình xử lý sự kiện là một đoạn mã sẽ thực thi để đáp ứng sự kiện đó. Trình xử lý sự kiện còn được gọi là trình xử lý sự kiện. Nó lắng nghe sự kiện và phản ứng phù hợp với sự kiện cháy

Trình lắng nghe sự kiện là một hàm có tên rõ ràng nếu nó có thể được sử dụng lại hoặc một hàm ẩn danh trong trường hợp nó được sử dụng một lần

Một sự kiện có thể được xử lý bởi một hoặc nhiều trình xử lý sự kiện. Nếu một sự kiện có nhiều trình xử lý sự kiện, tất cả các trình xử lý sự kiện sẽ được thực thi khi sự kiện được kích hoạt

Có ba cách để gán trình xử lý sự kiện

1) Thuộc tính trình xử lý sự kiện HTML

Trình xử lý sự kiện thường có tên bắt đầu bằng

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)4, ví dụ: trình xử lý sự kiện cho sự kiện

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)5 là

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)6

Để chỉ định trình xử lý sự kiện cho sự kiện được liên kết với phần tử HTML, bạn có thể sử dụng thuộc tính HTML có tên của trình xử lý sự kiện. Ví dụ: để thực thi một số mã khi nhấp vào nút, bạn sử dụng như sau

<input type="button" value="Save" title="alert('Clicked!')">

Code language: HTML, XML (xml)

Trong trường hợp này, khi nhấp vào nút, hộp cảnh báo sẽ hiển thị

Khi bạn gán mã JavaScript làm giá trị của thuộc tính

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)6, bạn cần thoát khỏi các ký tự HTML chẳng hạn như dấu và (

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)8), dấu ngoặc kép (

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)9), nhỏ hơn (

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)0), v.v. , hoặc bạn sẽ gặp lỗi cú pháp

Trình xử lý sự kiện được xác định trong HTML có thể gọi hàm được xác định trong tập lệnh. Ví dụ

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)

Trong ví dụ này, nút gọi hàm

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)1 khi được nhấp vào

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)1 là một hàm được xác định trong một phần tử

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)3 riêng biệt và có thể được đặt trong một tệp JavaScript bên ngoài

Ghi chú quan trọng

Sau đây là một số điểm quan trọng khi bạn sử dụng trình xử lý sự kiện làm thuộc tính của phần tử HTML

Đầu tiên, mã trong trình xử lý sự kiện có thể truy cập đối tượng

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)4 mà không cần xác định rõ ràng đối tượng đó

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)

Thứ hai, giá trị

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)5 bên trong trình xử lý sự kiện tương đương với phần tử đích của sự kiện

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)

Thứ ba, trình xử lý sự kiện có thể truy cập các thuộc tính của phần tử, ví dụ

<input type="button" value="Save" title="alert(value)">

Code language: HTML, XML (xml)

Nhược điểm của việc sử dụng các thuộc tính xử lý sự kiện HTML

Chỉ định trình xử lý sự kiện bằng cách sử dụng thuộc tính trình xử lý sự kiện HTML được coi là thông lệ xấu và nên tránh càng nhiều càng tốt vì những lý do sau

Đầu tiên, mã xử lý sự kiện được trộn lẫn với mã HTML, điều này sẽ khiến mã khó bảo trì và mở rộng hơn

Thứ hai, đó là vấn đề thời gian. Nếu phần tử được tải đầy đủ trước mã JavaScript, người dùng có thể bắt đầu tương tác với phần tử trên trang web và điều này sẽ gây ra lỗi

Ví dụ: giả sử rằng hàm

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)1 sau đây được xác định trong tệp JavaScript bên ngoài

<input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)

Và khi trang được tải đầy đủ và JavaScript chưa được tải, hàm

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)1 không được xác định. Nếu người dùng nhấp vào nút tại thời điểm này, sẽ xảy ra lỗi

2) Trình xử lý sự kiện DOM Cấp 0

Mỗi phần tử có các thuộc tính xử lý sự kiện, chẳng hạn như

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)6. Để gán một trình xử lý sự kiện, bạn đặt thuộc tính cho một hàm như trong ví dụ

let btn = document.querySelector('#btn'); btn. title = function() { alert('Clicked!'); };

Code language: JavaScript (javascript)

Trong trường hợp này, hàm ẩn danh trở thành phương thức của phần tử

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)9. Do đó, giá trị

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)5 tương đương với phần tử. Và bạn có thể truy cập các thuộc tính của phần tử bên trong trình xử lý sự kiện

let btn = document.querySelector('#btn'); btn. title = function() { alert(this.id); };

Code language: JavaScript (javascript)

đầu ra

btn

Bằng cách sử dụng giá trị

<input type="button" value="Save" title="alert(event.type)">

Code language: HTML, XML (xml)5 bên trong trình xử lý sự kiện, bạn có thể truy cập các thuộc tính và phương thức của phần tử

Để xóa trình xử lý sự kiện, bạn đặt giá trị của thuộc tính trình xử lý sự kiện thành

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)2

btn. title = null;

Code language: JavaScript (javascript)

Trình xử lý sự kiện DOM Cấp 0 vẫn đang được sử dụng rộng rãi vì tính đơn giản và hỗ trợ nhiều trình duyệt của nó

3) Trình xử lý sự kiện DOM Cấp 2

Trình xử lý sự kiện cấp 2 của DOM cung cấp hai phương thức chính để xử lý trình lắng nghe sự kiện đăng ký/hủy đăng ký

• <input type="button" value="Save" title="alert(this.value)">

  Code language: HTML, XML (xml)3 – đăng ký trình xử lý sự kiện

• <input type="button" value="Save" title="alert(this.value)">

  Code language: HTML, XML (xml)4 – xóa trình xử lý sự kiện

Các phương thức này có sẵn trong tất cả các nút DOM

Phương pháp

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)3

Phương thức

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)3 chấp nhận ba đối số. tên sự kiện, hàm xử lý sự kiện và giá trị Boolean hướng dẫn phương thức gọi trình xử lý sự kiện trong giai đoạn bắt giữ (

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)7) hoặc trong giai đoạn bong bóng (

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)8). Ví dụ

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)0

Có thể thêm nhiều trình xử lý sự kiện để xử lý một sự kiện, như thế này

<script> function showAlert() { alert('Clicked!'); } </script> <input type="button" value="Save" title="showAlert()">

Code language: HTML, XML (xml)1

Phương pháp

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)4

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)4 xóa một trình xử lý sự kiện đã được thêm thông qua

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)3. Tuy nhiên, bạn cần phải chuyển các đối số giống như đã được chuyển cho

<input type="button" value="Save" title="alert(this.value)">

Code language: HTML, XML (xml)3. Ví dụ

Làm cách nào để sử dụng các sự kiện HTML?

Làm thế nào các sự kiện được xử lý?

Sự kiện là gì Làm thế nào chúng ta có thể xử lý các sự kiện trong JavaScript?

Ví dụ sự kiện HTML là gì?