Phím enter là ký tự keyup bao nhiêu trong js

Bây giờ, thực hiện lắng nghe sự kiện click chuột của người dùng. Nếu click vào khóa học nào thì màu của khóa học đó đổi thành màu đỏ.

// Lấy các phần tử có class là menu

let x \= document.getElementsByClassName("menu");

// Lặp qua các phần tử có class là menu

for (let i \= 0; i < x.length; i++) {

// Lắng nghe sự kiện click

// và đổi màu chữ thành màu đỏ

x[i].onclick \= function() {

this.style.color \= "red";

};

}

Ở đây bạn thấy mình sử dụng từ khóa this. Từ khóa này mình sẽ giải thích ở một bài khác.

Bây giờ bạn chỉ cần hiểu hoạt động này như là:

"Á À, tao bắt được mày click vào đây rồi nhá. Tô màu đỏ ngay cho thằng cho thằng này (this) thôi"

3.2. Sử dụng phương thức addEvenListener()

Phương thức này cũng cho phép ta gán sự kiện cho một phần tử HTML DOM, điểm khác các phương thức trên là có thể gán một hoặc nhiều events vào một phần tử HTML mà không xóa đi các sự kiện khác.

Khi ta sử dụng phương thức addEventsListenner(), JavaScript sẽ tách biệt nó với HTML Makup.

Bạn cũng có thể dễ dàng xóa bất kỳ event listenner bằng cách sử dụng phương thức removeEvenListenner().

Cú pháp để thêm sự kiện như sau:

element.addEventListener(event, function, useCapture);

Trong đó:

• event: Là tên sự kiện (bạn có thể tham khảo ở bảng phía trên).
• `events`0: Là hàm JavaScript mà bạn muốn thực thi khi sự kiện kích hoạt.
• `events`1: Là một giá trị boolean value cho hai lựa chọn: `events`2 hoặc `events`3.

Phương thức này cho phép bạn thêm nhiều events cho một element cùng một lúc.

Ví dụ, ta có một nút:

Nhấn vào đây

Bây giờ, tiếp tục viết code JS như sau:

function suKien1() {

alert("Lập trình JavaScript căn bản!");

}

function suKien2() {

alert("Thêm sự kiện thành công");

}

// Chọn đến nút có id là btn

let x \= document.getElementById("btn");

// Thêm sự kiện

x.addEventListener("click", suKien1);

x.addEventListener("click", suKien2);

Bạn hãy thử chạy trên trình duyệt để xem kết quả.

Và ấn F12 để kiểm tra luôn xem mã HTML có thay đổi gì không nhé.

Nên sử dụng Bubbling hay Event capturing?

Có hai cách để sự kiện được lan truyền (event propagation) trong HTML DOM: `events`4 và `events`5.> Khái niệm Event propagation là cách định nghĩa thứ tự của HTML element khi event xảy ra.

Ví dụ nếu ta có một phần tử `events`6 bên trong một phần tử `events`7

Thì câu hỏi đặt ra là...

Khi người dùng click lên phần tử `events`6, thì sự kiện “click” của phần tử nào sẽ được xử lý trước?

Trong bubbling, sự kiện của phần tử bên trong cùng sẽ được xử lý trước:

• Với ví dụ trên, sự kiện “click” của phần tử `events`6 sẽ được xử lý trước
• Sau đó đến sự kiện của phần tử `function(){ ... }`0.

Trong capturing thì ngược lại, sự kiện của phần tử bên ngoài cùng sẽ được xử lý trước:

• Sự kiện “click” của phần tử `function(){ ... }`0 được xử lý trước
• sau đó tới phần tử `events`6.

Với phương thức `function(){ ... }`3, bạn có thể chỉ định propagation type bằng tham số “useCapture”:

addEventListener(event, function, useCapture);

Giá trị mặc định là `function(){ ... }`4 (sử dụng bubbling propagation).

Khi giá trị tham số được thiết lập là `function(){ ... }`5, sự kiện sẽ sử dụng capturing propagation.

3.3. Xóa một sự kiện với removeEventListener()

Phương thức `function(){ ... }`6 cho phép xóa sự kiện đã được gắn vào phần tử HTML trước đó bằng phương thức `function(){ ... }`3