Hướng dẫn how is event handling done in javascript? - xử lý sự kiện được thực hiện như thế nào trong javascript?

Question

Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu các cách khác nhau để thực hiện xử lý sự kiện trong JavaScript.: in this tutorial, you will learn the various ways to perform event handling in JavaScript.

Nội dung chính Show

1) Thuộc tính xử lý sự kiện HTML
Ghi chú quan trọng
Nhược điểm của việc sử dụng các thuộc tính xử lý sự kiện HTML
2) DOM Cấp độ 0 Trình xử lý sự kiện
3) DOM Cấp độ 2 Người xử lý sự kiện
Phương pháp Code language: HTML, XML (xml)3
Phương pháp Code language: HTML, XML (xml)4
Bản tóm tắt
Sự kiện được xử lý như thế nào trong JavaScript?
Làm thế nào để một người xử lý sự kiện hoạt động?
Cách nào được ưa thích nhất để xử lý các sự kiện trong JavaScript?

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 đó. Một người xử lý sự kiện còn được biết đến như một người nghe sự kiện. Nó lắng nghe sự kiện và ứng phó tương ứng với các vụ cháy sự kiện.

Người nghe sự kiện là một hàm có tên rõ ràng nếu nó có thể nối 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 hiện khi sự kiện được sa thải.

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

1) Thuộc tí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" onclick="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" onclick="showAlert()">
Code language: HTML, XML (xml)

5 là

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

6.

Để gán một trình xử lý sự kiện cho một 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 với tên của trình xử lý sự kiện. Ví dụ: để thực hiện một số mã khi nhấp vào nút, bạn sử dụng các ứng dụng sau:

<input type="button" value="Save" onclick="alert('Clicked!')">
Code language: HTML, XML (xml)

Trong trường hợp này, khi nút được nhấp, hộp cảnh báo được 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" onclick="showAlert()">
Code language: HTML, XML (xml)

6, bạn cần thoát các ký tự HTML như ampersand (

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

8), trích dẫn kép (

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

9), ít hơn (

<input type="button" value="Save" onclick="alert(event.type)">
Code language: HTML, XML (xml)

0), v.v.

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

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

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

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



Code language: HTML, XML (xml)

1 khi được nhấp.

<input type="button" value="Save" onclick="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" onclick="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 bộ xử lý sự kiện có thể truy cập đối tượng

<input type="button" value="Save" onclick="alert(event.type)">
Code language: HTML, XML (xml)

4 mà không cần xác định rõ ràng:

<input type="button" value="Save" onclick="alert(event.type)">
Code language: HTML, XML (xml)

Thứ hai, giá trị

<input type="button" value="Save" onclick="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ử mục tiêu của sự kiện:

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

Thứ ba, người 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" onclick="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

Việc gán trình xử lý sự kiện bằng cách sử dụng các thuộc tính xử lý sự kiện HTML được coi là thực hành 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 với mã HTML, điều này sẽ làm cho mã khó khăn hơn để duy trì và mở rộng.

Thứ hai, đó là một 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 sẽ gây ra lỗi.

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

<input type="button" value="Save" onclick="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" onclick="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" onclick="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) DOM Cấp độ 0 Trình xử lý sự kiện

Mỗi phần tử có các thuộc tính xử lý sự kiện như

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

6. Để gán trình xử lý sự kiện, bạn đặt thuộc tính thành một hàm như được hiển thị trong ví dụ:

let btn = document.querySelector('#btn');

btn.onclick = function() {
    alert('Clicked!');
};
Code language: JavaScript (javascript)

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

<input type="button" value="Save" onclick="alert(event.type)">
Code language: HTML, XML (xml)

9. Do đó, giá trị

<input type="button" value="Save" onclick="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.onclick = function() {
    alert(this.id); 
};
Code language: JavaScript (javascript)

Output:

btn

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

<input type="button" value="Save" onclick="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" onclick="alert(this.value)">
Code language: HTML, XML (xml)

2:

btn.onclick = null;
Code language: JavaScript (javascript)

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

3) DOM Cấp độ 2 Người xử lý sự kiện

Người xử lý sự kiện cấp 2 DOM cung cấp hai phương pháp chính để xử lý người nghe sự kiện đăng ký/hủy đăng ký:

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

3 - Đăng ký một người xử lý sự kiện

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

4 - Xóa người xử lý sự kiện

Các phương pháp này có sẵn trong tất cả các nút dom.

Phương pháp Code language: HTML, XML (xml)3

Phương pháp

<input type="button" value="Save" onclick="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" onclick="alert(this.value)">
Code language: HTML, XML (xml)

7) hoặc trong giai đoạn bong bóng (

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

8). Ví dụ:

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="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" onclick="showAlert()">
Code language: HTML, XML (xml)

1

Phương pháp Code language: HTML, XML (xml)4

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

4 loại bỏ một trình nghe sự kiện đã được thêm vào thông qua

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

3. Tuy nhiên, bạn cần chuyển các đối số tương tự như đã được chuyển cho

<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)

3. Ví dụ:

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

2

Sử dụng trình nghe sự kiện ẩn danh như sau đây sẽ không hoạt động:

<script>
    function showAlert() {
        alert('Clicked!');
    }
script>
<input type="button" value="Save" onclick="showAlert()">
Code language: HTML, XML (xml)

3

Bản tóm tắt

Có ba cách để gán một trình xử lý sự kiện: thuộc tính HTML Event Handler, thuộc tính Trình xử lý sự kiện phần tử và
```
<input type="button" value="Save" onclick="alert(this.value)">
Code language: HTML, XML (xml)
```
3.
Chỉ nên tránh một trình xử lý sự kiện thông qua thuộc tính xử lý sự kiện HTML.

Hướng dẫn này có hữu ích không?

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

Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác một trang.Khi trang tải, nó được gọi là một sự kiện.Khi người dùng nhấp vào một nút, nhấp vào đó cũng là một sự kiện.Các ví dụ khác bao gồm các sự kiện như nhấn bất kỳ phím nào, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v.through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc.

Làm thế nào để một người xử lý sự kiện hoạt động?

Mỗi nút khóa có một trình xử lý nhận các sự kiện chính khi khóa có tiêu điểm.Trình xử lý phản hồi các sự kiện được nhấn phím và phát hành khóa cho phím Enter bằng cách thay đổi màu của phím trên màn hình.Sự kiện này sau đó được tiêu thụ sao cho nút bàn phím, là nút cha, không nhận được sự kiện.

Cách nào được ưa thích nhất để xử lý các sự kiện trong JavaScript?

Phương thức AddEventListener là cách được ưa thích nhất để thêm trình nghe sự kiện vào cửa sổ, tài liệu hoặc bất kỳ yếu tố nào khác trong DOM.Có một cách nữa được gọi là tài sản của On On On, OnmouseOver, v.v.addEventListener method is the most preferred way to add an event listener to window, document or any other element in the DOM. There is one more way called “on” property onclick, onmouseover, and so on.

programming javascript Event JS Event listener JavaScript Event handler JS JavaScript events Mouse event JS DOM event Event handler Java

Hướng dẫn how is event handling done in javascript? - xử lý sự kiện được thực hiện như thế nào trong javascript?

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

Ghi chú quan trọng

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

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

3) DOM Cấp độ 2 Người xử lý sự kiện

Phương pháp Code language: HTML, XML (xml)3

Phương pháp Code language: HTML, XML (xml)4

Bản tóm tắt

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

Làm thế nào để một người xử lý sự kiện hoạt động?

Cách nào được ưa thích nhất để xử lý các sự kiện trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội