Hướng dẫn what is the difference between an event handler and an event listener in javascript? - sự khác biệt giữa trình xử lý sự kiện và trình xử lý sự kiện trong javascript là gì?

Bạn có biết có một sự khác biệt giữa người xử lý sự kiện và người nghe sự kiện?

Trong JavaScript, một sự kiện có thể, ví dụ: một nút nhấp chuột hoặc một con chuột di chuột qua. Điều quan trọng là phải trả lời các sự kiện, ví dụ: Bằng cách hiển thị một phương thức khi nhấp vào nút.

Cảm ơn vì đã đọc! Tôi hy vọng bạn đã học được điều gì đó mới hôm nay.

Events!

Bạn muốn cải thiện kỹ năng JS của bạn hơn nữa? Kiểm tra bài viết khác của tôi, 6 Mẹo JavaScript cần thiết cho nhà phát triển 2020, để có được tốt hơn ở JS.

Chúc một ngày tốt lành! 😄

Đó là một quả trứng

Blog cá nhân của Twan Mulder. Làm cho cuộc sống của nhà phát triển của bạn dễ dàng hơn, một bài viết tại một thời điểm.

← 5 cách mà bạn không làm cho trang web của mình có thể truy cập được

10 JavaScript Oneliners Bạn phải thêm kho vũ khí của mình làm nhà phát triển →the 2 ways of handling events and which method you should use depending on your situation.

Sự khác biệt giữa sự kiện và xử lý sự kiện là gì?

Trong lập trình, một trình xử lý sự kiện là một thói quen gọi lại hoạt động không đồng bộ sau khi một sự kiện diễn ra. Nó ra lệnh cho hành động theo sau sự kiện. Các lập trình viên viết một mã cho hành động này diễn ra. Một sự kiện là một hành động diễn ra khi người dùng tương tác với một chương trình.

1. Trình xử lý sự kiện trong JavaScript là gì?
2. Trình xử lý sự kiện là mã JavaScript gọi một đoạn mã cụ thể khi một hành động cụ thể xảy ra trên phần tử HTML. Trình xử lý sự kiện có thể gọi mã JavaScript trực tiếp hoặc một hàm.

Trình nghe sự kiện và sự kiện trong JavaScript là gì?

Một trang web trả lời theo một sự kiện xảy ra. Một số sự kiện được tạo ra và một số được tạo bởi API. Người nghe sự kiện là một thủ tục trong JavaScript chờ đợi một sự kiện xảy ra. Ví dụ đơn giản về một sự kiện là người dùng nhấp chuột hoặc nhấn phím trên bàn phím.

Sự khác biệt giữa sự kiện và người nghe trong Java là gì?the JavaScript using an “EventHandler” property of the object.

Giao diện EventListener xác định các phương thức phải được thực hiện bởi trình xử lý sự kiện cho một loại sự kiện cụ thể trong khi lớp bộ điều hợp sự kiện cung cấp một triển khai mặc định của giao diện EventListener.

16 tháng 11 năm 2020 • ☕ 3 phút đọc

const button = document.querySelector(".btn");

button.onclick = function() {
  console.log("Hello!");
};

// OR

button.onclick = () => {
  console.log("Hello!");
};

MDN định nghĩa một sự kiện là:

Giao diện Event đại diện cho một sự kiện diễn ra trong DOM.

Phương pháp 2 - Người nghe sự kiện

Phương pháp khác để sử dụng các sự kiện trong JavaScript là bằng cách thêm trình nghe sự kiện vào một đối tượng.

Bằng cách thêm trình nghe sự kiện vào một đối tượng, chúng ta có thể bắt một loạt các sự kiện được kích hoạt bởi người dùng hoặc trình duyệt.

Bạn cũng có thể quen thuộc với điều này. Họ có thể trông hơi như thế này:

const button = document.querySelector(".btn");

button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR

button.addEventListener("click", event => {
  console.log("Hello!");
})

Mã trên cho chúng ta thấy ví dụ tương tự như được sử dụng với trình xử lý sự kiện, đăng nhập vào Hello Hello! Trong bảng điều khiển khi người dùng nhấp vào nút.

Lần này, thay vì sử dụng thuộc tính của On Onclick, chúng tôi thêm một trình nghe sự kiện sẽ kích hoạt trên sự kiện Click Click, sau đó nó đăng nhập vào Hello Hello!

Ngoài ra còn có một tấn các sự kiện có thể được nghe vì sử dụng trình nghe sự kiện. Dưới đây là danh sách đầy đủ của tất cả các sự kiện có thể được lắng nghe.

Có gì khác biệt?

Có một sự khác biệt tinh tế, nhưng quan trọng giữa 2 phương pháp xử lý các sự kiện này.

Nếu bạn sẽ sử dụng phương thức đầu tiên, Trình xử lý sự kiện, sự khác biệt là nếu bạn thêm hai trình xử lý sự kiện cho cùng một nút bấm, trình xử lý sự kiện thứ hai sẽ ghi đè lên sự kiện thứ nhất và duy nhất đó sẽ kích hoạt.

Điều này đưa chúng ta đến việc học chính:

Đối với một yếu tố nhất định, bạn chỉ có thể có một xử lý sự kiện cho mỗi loại sự kiện, nhưng bạn có thể có nhiều trình nghe sự kiện.

Đó là sự khác biệt chính. Vậy cái này trông như thế nào?

const button = document.querySelector(".btn");

button.onclick = () => {
  console.log("Hello!");
};

button.onclick = () => {
  console.log("How are you?");
};

// This wil log "How are you?" to the console.

Trong ví dụ trên, trình xử lý sự kiện của On Onclick được sử dụng hai lần.

Bằng cách đó, cái đầu tiên sẽ bị ghi đè và khi người dùng nhấp vào nút, nó sẽ ghi lại bạn có khỏe không? đến giao diện điều khiển.

Vì vậy, điều gì xảy ra khi chúng ta sử dụng add addEventListener?

const button = document.querySelector(".btn");

button.addEventListener("click", event => {
  console.log("Hello!");
})

button.addEventListener("click", event => {
  console.log("How are you?");
})

// This wil log 
// "Hello!"
// "How are you?"
// to the console

Trong ví dụ trên, chúng tôi thêm nhiều trình nghe sự kiện vào nút.

Bằng cách này, khi người dùng nhấp vào nó, nó sẽ kích hoạt cả hai chức năng và ghi nhật ký Hello Hello! Bạn có khỏe không?" đến giao diện điều khiển.

Bạn nên sử dụng cái nào?

Phương pháp nào bạn nên sử dụng, sẽ phụ thuộc hoàn toàn vào trường hợp sử dụng của bạn.

Bạn có cần gắn nhiều hơn một sự kiện vào một yếu tố? Bạn sẽ trong tương lai? Tỷ lệ cược là, bạn sẽ.

Đó là lý do tại sao, nói chung, việc sử dụng của Add AdventListener, được khuyến khích.in general, the use of “addEventListener” is advised.

Vậy chúng ta đã học được những gì?

1. Có 2 phương pháp xử lý các sự kiện, sử dụng thuộc tính xử lý sự kiện hoặc thêm trình nghe sự kiện.
2. Đối với một yếu tố nhất định, bạn chỉ có thể có một xử lý sự kiện cho mỗi loại sự kiện, nhưng bạn có thể có nhiều trình nghe sự kiện.
3. Đó là sự khác biệt chính. Vậy cái này trông như thế nào?

Ở đây, người xử lý sự kiện thứ hai sẽ ghi đè lên lần đầu tiên.

const button = document.querySelector(".btn");

button.onclick = () => {
  console.log("Hello!");
};

button.onclick = () => {
  console.log("How are you?");
};

// This wil log "How are you?" to the console.

Trong ví dụ trên, trình xử lý sự kiện của On Onclick được sử dụng hai lần.