Hướng dẫn geteventlisteners javascript - geteventlistists javascript

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 đó.
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ể dùng thuộc tính EventHandler có sẵn của object để "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.

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

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

// OR using Javascript one-liners make you look like a pro
button.onclick = () => {console.log("Hello!")};

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.
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.

STT	Event Name	Description
1	onclick	Sự kiện xảy ra khi click vào thẻ HTML
2	ondbclick	Sự kiện xảy ra khi double click vào thẻ HTML
3	onchange	Sự 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
4	onmouseover	Sự kiện xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5	onmouseout	Sự kiện xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6	onmouseenter	Tương tự như onmouseover
7	onmouseleave	Tương tự như onmouseout
8	onmousemove	Sự kiện xảy ra khi con chuột di chuyển bên trong thẻ HTML
9	onkeydown	Sự kiện xảy ra khi gõ một phím bất kì vào ô input
10	onload	Sự 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 đó.
11	onkeyup	Sự 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
12	onkeypress	Sự kiện xảy ra khi bạn nhấn môt phím vào ô input
14	onblur	Sự kiện xảy ra khi con trỏ chuột rời khỏi ô input
15	oncopy	Sự kiện xảy ra khi bạn copy nội dung của thẻ
16	oncut	Sự kiện xảy ra khi bạn cắt nội dung của thẻ
17	onpaste	Sự 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

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

0.

Bằng cách thêm

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

1 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.

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

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

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

3:

target.addEventListener(event, function, useCapture);

• const button = document.querySelector(".btn")
  button.addEventListener("click", function(event) {
    console.log("Hello!");
  })
  
  // OR using Javascript one-liners
  button.addEventListener("click", event => console.log("Hello!"))
  

  4: Đây là phần tử bạn cần thêm Event Listeners vào. (Sử dụng DOM Selector).

• const button = document.querySelector(".btn")
  button.addEventListener("click", function(event) {
    console.log("Hello!");
  })
  
  // OR using Javascript one-liners
  button.addEventListener("click", event => console.log("Hello!"))
  

  5: Là các loại sự kiện như click, mouseover, ... (Bạn có thể xem ở đây)

• const button = document.querySelector(".btn")
  button.addEventListener("click", function(event) {
    console.log("Hello!");
  })
  
  // OR using Javascript one-liners
  button.addEventListener("click", event => console.log("Hello!"))
  

  6: 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 nhiều sự kiện cho cùng một 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

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

8 cho mỗi loại sự kiện, nhưng bạn có thể có nhiều

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

9.

const button = document.querySelector(".btn")
button.onclick = () => {
  console.log("Hello!");
};
button.onclick = () => {
  console.log("How are you?");
};

// When click button
// "How are you?"

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

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

0

const button = document.querySelector(".btn")
button.addEventListener("click", event => {
  console.log("Hello!");
})
button.addEventListener("click", event => {
  console.log("How are you?");
})

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

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

const button = document.querySelector(".btn")
button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR using Javascript one-liners
button.addEventListener("click", event => console.log("Hello!"))

0 lại được khuyên dùng.

Tham khảo

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