Xử lý sự kiện trong JavaScript là gì

Trình xử lý sự kiện trong JavaScript là gì?

Khi một sự kiện, chẳng hạn như nhấn một phím trên bàn phím hoặc nhấp vào một phần tử, xảy ra trên DOM hoặc phần tử HTML, chúng ta có thể gọi các chức năng cụ thể dựa trên các sự kiện này. Bây giờ, làm cách nào để phần tử HTML biết khi nào nên gọi mã JavaScript hoặc hàm JavaScript đã đề cập? . Các thuộc tính của phần tử DOM hoặc HTML được gọi là trình xử lý sự kiện để kiểm soát cách một phần tử sẽ phản hồi một sự kiện nhất định. Khái niệm và hoạt động của event handler được tóm tắt trong hình bên dưới

Như thể hiện trong hình trên, khi người dùng nhấp vào một nút chuột cụ thể hoặc nhập một từ khóa cụ thể vào trình duyệt, hành động đó sẽ kích hoạt trình xử lý sự kiện tương ứng cho phần tử HTML đó. Sau đó, trình duyệt hiển thị cho người dùng cuối tác động của các hành động được thực hiện trên trang web bằng mã JavaScript được thực thi bởi trình xử lý sự kiện

Trình xử lý sự kiện có thể được chỉ định trực tiếp bằng toán tử bằng (=) vì chúng cũng là thuộc tính của phần tử HTML/DOM. Cú pháp như sau

cú pháp

name_of_EventHandler = "The javaScript code / function which is required to be executed"

Đăng ký Trình xử lý sự kiện trong Javascript

Để đăng ký trình xử lý, có hai phương pháp đề xuất. Bằng cách gán mã trình xử lý sự kiện cho thuộc tính onevent tương ứng của phần tử đích hoặc bằng cách thêm trình xử lý làm trình lắng nghe cho phần tử bằng phương thức addEventListener(), mã trình xử lý sự kiện có thể được thực thi khi một sự kiện được kích hoạt. Trình xử lý sẽ nhận được một đối tượng tuân thủ giao diện Sự kiện trong cả hai trường hợp (hoặc giao diện dẫn xuất). Sự khác biệt chính là bằng cách sử dụng các phương thức xử lý sự kiện, có thể thêm (hoặc xóa) các trình xử lý sự kiện bổ sung.

Các giai đoạn xử lý sự kiện khác nhau trong Javascript

Vòng đời của một sự kiện JavaScript bao gồm ba giai đoạn sự kiện khác nhau

• Giai đoạn chụp. Trong giai đoạn nắm bắt, thường được gọi là giai đoạn nhỏ giọt, sự kiện "nhỏ giọt" xuống phần tử gây ra sự kiện
• Giai đoạn mục tiêu. Nó bắt đầu với phần tử và trình xử lý ở cấp cao nhất và đi xuống phần tử. Khi sự kiện đến mục tiêu, giai đoạn bắt giữ kết thúc
• Giai đoạn sủi bọt. Sự kiện được "tạo bong bóng" cho cây DOM trong giai đoạn bong bóng. Trình xử lý trong cùng ban đầu nắm bắt và xử lý nó (trình xử lý gần nhất với phần tử xảy ra sự kiện). Sau đó, nó di chuyển lên (hoặc nổi bong bóng) lên các cấp độ cao hơn của cây DOM, di chuyển lên cha mẹ của nó và cuối cùng trở về gốc của nó

Họ làm theo thứ tự như được liệt kê ở trên. Như thể hiện trong sơ đồ dưới đây

Trong xử lý sự kiện trong javascript, khi một sự kiện đến phần tử, nó sẽ chuyển sang giai đoạn bắt giữ. Các sự kiện đi vào giai đoạn mục tiêu khi tiếp cận phần tử và đi lên từ phần tử trong giai đoạn bong bóng

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

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

Trong ví dụ này, hộp cảnh báo xuất hiện khi nhấp vào nút
Các ký tự HTML như dấu và (&), dấu ngoặc kép ("), nhỏ hơn (") và các ký tự đặc biệt khác phải được thoát khi sử dụng mã JavaScript làm giá trị của thuộc tính onclick. Nếu không sẽ xảy ra lỗi cú pháp
Một chức năng được xác định trong tập lệnh có thể được gọi bởi trình xử lý sự kiện được xác định trong HTML. Ví dụ


Khi một nút được bấm trong ví dụ này, hàm myAlert() được gọi. riêng biệt

Các loại Trình xử lý sự kiện trong JavaScript là gì?

JavaScript cung cấp nhiều trình xử lý sự kiện được kích hoạt để đáp ứng với các hành động cụ thể được thực hiện trên các phần tử HTML. Một số trình xử lý sự kiện trong xử lý sự kiện trong javascript là

Trình xử lý sự kiệnDescriptiononclickKhi hành động nhấp chuột xảy ra trên phần tử HTML, trình xử lý sự kiện này sẽ chạy tập lệnh JavaScript. Ví dụ: trình xử lý sự kiện onClick có thể được gọi khi một nút được bấm, một liên kết được bấm, một hộp kiểm được chọn hoặc một bản đồ hình ảnh được chọn. onmouseoverKhi chuột di chuyển qua một liên kết hoặc đối tượng cụ thể, trình xử lý sự kiện này sẽ chạy tập lệnh JavaScript. onloadKhi một cửa sổ hoặc hình ảnh đã được tải đầy đủ, trình xử lý sự kiện này sẽ thực thi một số mã JavaScript. onkeypressKhi người dùng nhấn một phím, trình xử lý sự kiện này sẽ thực thi mã JavaScript. onmouseoutKhi chuột rời khỏi một liên kết hoặc đối tượng cụ thể, trình xử lý sự kiện này sẽ chạy tập lệnh JavaScript. onkeyupKhi một phím được giải phóng trong một thao tác bàn phím, trình xử lý sự kiện này sẽ thực thi mã JavaScript. onkeydownKhi một phím được nhấn trên bàn phím trong một hành động, trình xử lý sự kiện này sẽ chạy tập lệnh JavaScript

Lan truyền

Đối với phần lớn các loại sự kiện, trình xử lý đã đăng ký trên các nút có nút con sẽ nhận được các sự kiện cấp độ con. Nếu nút trong một đoạn được nhấp, trình xử lý sự kiện của đoạn đó cũng có thể thấy sự kiện nhấp đó. Nếu cả nút và đoạn văn đều có trình xử lý, thì trình xử lý trên nút, cụ thể hơn, sẽ thực thi trước

Sự kiện được cho là lan truyền ra bên ngoài, từ nút nơi nó xảy ra đến nút cha của nút đó và sau đó đến thư mục gốc của tài liệu. Sau khi mọi trình xử lý đã đăng ký trên nút cụ thể có cơ hội phản hồi sự kiện, những trình xử lý đã đăng ký trên toàn bộ cửa sổ sẽ có cơ hội thực hiện điều đó

Trình xử lý sự kiện có thể gọi phương thức stopPropagation trên đối tượng sự kiện bất kỳ lúc nào để ngăn các trình xử lý liên tiếp nhận sự kiện. Điều này có thể hữu ích trong việc xử lý sự kiện trong javascript, ví dụ: nếu chúng tôi có một nút bên trong một phần tử có thể nhấp khác và chúng tôi không muốn các lần nhấp vào nút để kích hoạt hành vi nhấp bên ngoài của một phần tử

Hành động mặc định

Đối với phần lớn các loại sự kiện, trình xử lý sự kiện JavaScript được gọi trước hành vi mặc định. Nếu trình xử lý không muốn hành vi bình thường này xảy ra, thường là do nó đã xử lý sự kiện rồi, thì nó có thể gọi phương thức preventDefault của đối tượng sự kiện

Điều này cho phép bạn triển khai các phím tắt tùy chỉnh và menu ngữ cảnh. Nó cũng có thể được sử dụng để can thiệp một cách đáng ghét vào hành vi mong đợi của người dùng. Ví dụ: không thể theo liên kết sau

what is event handler

Sự kiện chính trong Javascript

Các sự kiện quan trọng xảy ra mỗi khi người dùng tương tác với bàn phím. Có ba loại sự kiện quan trọng chính trong việc xử lý sự kiện trong javascript bao gồm keyup, keydown và keypress

EventDescriptionOnkeydown Sự kiện này được kích hoạt khi người dùng đang nhấn một phím. Onkeypress Sự kiện này được kích hoạt khi người dùng nhấn phím. OnkeyupSự kiện này được kích hoạt khi người dùng nhả phím

Mặc dù tên của nó, "keydown" không chỉ được kích hoạt khi một phím được nhấn vật lý. Khi một phím được nhấn và giữ, sự kiện sẽ được kích hoạt mỗi khi phím được lặp lại. Hoặc đôi khi, bạn phải cẩn thận hơn trong trường hợp này. Chẳng hạn, nếu chúng ta thêm một nút vào Mô hình đối tượng tài liệu khi nhấn một phím và xóa nó khi nhả phím. Bây giờ, nếu phím được giữ lâu hơn, bạn có thể vô tình thêm hàng trăm nút

Sự kiện con trỏ

Sự kiện con trỏ là sự kiện DOM (Mô hình đối tượng tài liệu) được kích hoạt cho thiết bị trỏ. Có một số phương pháp phổ biến để trỏ vào các đối tượng trên màn hình, chẳng hạn như chuột (bao gồm các thiết bị hoạt động như chuột, chẳng hạn như bi xoay và bàn di chuột), bút stylus/bút và màn hình cảm ứng. Con trỏ là một thiết bị độc lập với phần cứng và có thể nhắm mục tiêu một tập hợp tọa độ màn hình cụ thể

Nhấp chuột

Khi nhấn bất kỳ nút chuột nào, một số sự kiện sẽ được kích hoạt. Tương tự như "keydown" và "keyup", các sự kiện "mouseup" và "mousedown" cũng được kích hoạt khi nhấn và thả nút chuột. Và, những điều này xảy ra trên các nút DOM ngay dưới con trỏ chuột tại thời điểm sự kiện xảy ra

Sau sự kiện "mouseup", sự kiện "nhấp chuột" được kích hoạt trên nút được chỉ định nhiều nhất có chứa cả thao tác nhấn và thả nút. Ví dụ, nếu chúng ta nhấn giữ chuột trên một đoạn, và di chuyển con trỏ đến đoạn khác, sau đó nhả nút, sự kiện "click" sẽ xảy ra trên phần tử chứa cả hai đoạn

Sự kiện và Vòng lặp sự kiện

Trình xử lý sự kiện hoạt động tương tự như các thông báo không đồng bộ khác. Chúng được lên lịch để chạy khi sự kiện xảy ra nhưng phải đợi các tập lệnh khác hoàn thành trước khi chúng có thể thực thi

Vòng lặp sự kiện là chìa khóa để lập trình không đồng bộ trong JavaScript. JS thực thi tất cả các thao tác trên một luồng đơn lẻ, nhưng thông qua việc sử dụng một vài cấu trúc dữ liệu thông minh, nó tạo ảo giác về đa luồng. Hãy phân tích những gì xảy ra phía sau hậu trường (ở phần phụ trợ)

Ngăn xếp cuộc gọi chịu trách nhiệm theo dõi tất cả các hoạt động trong hàng đợi thực thi. Một chức năng được bật ra khỏi ngăn xếp bất cứ khi nào nó hoàn thành

Hàng đợi sự kiện chịu trách nhiệm gửi các chức năng mới để xử lý tới ngăn xếp. Nó tuân thủ cấu trúc dữ liệu hàng đợi để duy trì thứ tự thực hiện đúng của tất cả các hoạt động

Vòng lặp sự kiện hỗ trợ quá trình này bằng cách liên tục kiểm tra xem ngăn xếp cuộc gọi có trống không. Nếu nó trống, hàng đợi sự kiện được sử dụng để thêm các chức năng mới. Nếu không, lệnh gọi hàm hiện tại sẽ được thực hiện

Bộ đếm thời gian được tạo trong JavaScript để thực thi một tác vụ hoặc chức năng tại một thời điểm xác định. Chủ yếu trong việc xử lý sự kiện trong javascript, bộ đếm thời gian được sử dụng để trì hoãn việc thực thi chương trình hoặc thực thi mã JavaScript theo các khoảng thời gian đều đặn. Bộ đếm thời gian cho phép chúng tôi trì hoãn việc thực thi mã. Do đó, mã không kết thúc thực thi đồng thời khi một sự kiện kích hoạt hoặc tải trang

Đôi khi cần phải hủy một sự kiện đã lên lịch trước đó. Điều này thực sự được thực hiện bằng cách lưu trữ giá trị do setTimeout trả về, sau đó gọi clearTimeout trên giá trị đó

let timer = setTimeout(() => {
  console.log("Hurray!");
}, 500);

if (Math.random() < 0.5) { // 50% chances
  console.log("Over!");
  clearTimeout(timer);
}

ra mắt

Gỡ lỗi trong JavaScript là một kỹ thuật được sử dụng để nâng cao hiệu suất của trình duyệt web. Một trang web có thể chứa chức năng yêu cầu tính toán tốn thời gian. Vì JavaScript là ngôn ngữ lập trình đơn luồng nên việc triển khai thường xuyên một phương pháp như vậy có thể tác động tiêu cực đến hiệu suất của trình duyệt

Gỡ lỗi là một phương pháp lập trình để ngăn các tác vụ tốn thời gian kích hoạt thường xuyên đến mức chúng làm chậm hiệu suất của trang web. Nói cách khác, nó giới hạn tần suất gọi hàm

xử lý sự kiện trong JavaScript với ví dụ là gì?

Điều gì có nghĩa là bằng cách xử lý sự kiện?

Các sự kiện được xử lý như thế nào trong JavaScript?

Ví dụ Trình xử lý sự kiện là gì?