Trình xử lý sự kiện và Trình xử lý sự kiện

Tram Ho

Events!
Một phần không thể thiếu của một trang web. Thứ giúp người dùng có cảm giác rằng đang thực sự giao tiếp trang web chứ không chỉ đơn thuần như đọc báo hay xem phim.
Event hiểu đơn giản là các hành động diễn ra trong trình duyệt có thể được tạo bởi người dùng hoặc chính trình duyệt.
Ví dụ như khi người dùng click chuột vào phần tử, gõ văn bản vào textfield hay di chuyển con trỏ vào phần tử nào đó.

Trong bài viết này, mình sẽ nói về hai cách xử lý sự kiện và sử dụng hợp lý cho từng trường hợp.

Sử dụng Event Handler

Bạn có thể thuộc tính EventHandler có sẵn của object để có thể “bắt sự kiện”.

Nghe có vẻ hơi phức tạp, nhưng có thể bạn đã làm nó mà chưa biết tên nó chăng.

Trong ví dụ này, thuộc tính onclick được sử dụng để khi người dùng nhấp vào button, nó sẽ in ra dòng chữ “Xin chào!” vào console log.
Thuộc tính “onclick” chỉ là một trong những EventHandlercó thể sử dụng được thôi. Dước đây là một số thuộc tính thông dụng có thể dùng.

STTEvent NameDescription
1onclickSự kiện xảy ra khi click vào thẻ HTML
2ondbclickSự kiện xảy ra khi double click vào thẻ HTML
3onchangeSự kiện xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input
4onmouseoverSự kiện xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5onmouseoutSự kiện xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6onmouseenterTương tự như onmouseover
7onmouseleaveTương tự như onmouseout
8onmousemoveSự kiện xảy ra khi con chuột di chuyển bên trong thẻ HTML
9onkeydownSự kiện xảy ra khi gõ một phím bất kì vào ô input
10onloadSự kiện xảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó.
11onkeyupSự kiện xảy ra khi bạn gõ phím nhưng lúc bạn nhả phím ra sẽ được kích hoạt
12onkeypressSự kiện xảy ra khi bạn nhấn môt phím vào ô input
14onblurSự kiện xảy ra khi con trỏ chuột rời khỏi ô input
15oncopySự kiện xảy ra khi bạn copy nội dung của thẻ
16oncutSự kiện xảy ra khi bạn cắt nội dung của thẻ
17onpasteSự kiện xảy ra khi bạn dán nội dung vào thẻ

 

Thêm Event Listener

Ngoài những thuộc tính EventHandler trên ra, chúng ta cũng có thể thêm có sự kiện vào đối tượng thông qua addEventListener.

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

Thay vì dùng thuộc tính onclick, thì ở đây mình dùng method addEventListener():

  • target: Đây là phần tử bạn cần thêm Event Listeners vào. (Sử dụng DOM Selector).
  • event: Là các loại sự kiện như click, mouseover, … (Bạn có thể xem ở đây)
  • function: Tên hàm bạn cần thêm vào

Khác biệt giữa Event Handlers và addEventListener

Nếu bạn sẽ sử dụng EventHandler, điểm khác biệt rõ ràng nhất chính là nếu bạn thêm sự kiện cho cùng một lần loại(ví dụ là onclick vào nút), thì sự kiện thứ 2 sẽ ghi đè lên sự kiện đầu tiên và chỉ sự kiện đó được thực thi. Nguyên nhân là do:

Đối với một phần tử nhất định, bạn chỉ có thể có một event handler cho mỗi loại sự kiện, nhưng bạn có thể có nhiều event listeners.

Những lúc như thế này thì chúng ta sẽ cần đến addEventListener

Nên sử dụng cách nào?

Phương pháp nào bạn nên sử dụng còn tùy thuộc vào trường hợp sử dụng đến nó.

Bạn có cần bổ sung thêm nhiều sự kiện vào một phần tử không? Trong tương lai sẽ có cần thêm sự có phần tử đó không?

Đúng vậy, đó là lý do tại sao addEventListener lại được khuyên dùng.

Tham khảo

https://medium.com/dailyjs/whats-the-difference-between-event-handlers-addeventlistener-in-js-963431f05c34

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo