JavaScript Events: Hướng Dẫn Toàn Diện (Kèm Ví Dụ)

Chào bạn, đã bao giờ bạn tự hỏi làm thế nào một website có thể phản hồi lại từng cú nhấp chuột hay phím bấm của mình chưa? Câu trả lời nằm ở events javascript, trái tim của mọi trang web tương tác. Trong hướng dẫn toàn diện này, WiWeb sẽ cùng bạn tìm hiểu từ những khái niệm cơ bản nhất đến các kỹ thuật nâng cao, giúp bạn làm chủ hoàn toàn các sự kiện trong JavaScript.

Giới thiệu về Events trong JavaScript

Hãy tưởng tượng một trang web không có sự kiện. Nó sẽ chỉ là một văn bản tĩnh, không hơn không kém. Bạn không thể nhấp vào nút, không thể điền vào biểu mẫu, không thể tương tác. Chính các Events trong JavaScript đã thổi hồn vào website, biến chúng thành những ứng dụng sống động và hữu ích.

Event là gì và vai trò của nó?

Một event (sự kiện) là một hành động hoặc một sự việc xảy ra trong trình duyệt. Trình duyệt sẽ phát ra một tín hiệu để thông báo rằng có điều gì đó vừa diễn ra. Vai trò của nó là cầu nối giữa người dùng và trang web. Khi người dùng thực hiện một hành động, một sự kiện sẽ được kích hoạt. Lập trình viên có thể “lắng nghe” những tín hiệu này và viết mã để phản hồi lại.

Nói đơn giản, event chính là cơ chế cho phép chúng ta chạy code JavaScript để đáp lại tương tác của người dùng.

Ví dụ về các sự kiện JavaScript phổ biến trong thực tế

Bạn gặp các sự kiện này mỗi ngày mà có thể không nhận ra:

• Nhấp vào một nút ‘Thích’: Đây là một sự kiện click.
• Gửi thông tin liên hệ qua form: Đây là một sự kiện submit.
• Di chuột qua menu và thấy các mục con hiện ra: Đây là sự kiện mouseover.
• Nhấn phím Enter để tìm kiếm: Đây là một sự kiện keydown.
• Trang web hiển thị đầy đủ nội dung sau khi tải xong: Đây là sự kiện load.

Event Handlers: Cách lắng nghe và xử lý sự kiện

Khi một sự kiện xảy ra, làm thế nào để chúng ta thực thi một hành động cụ thể? Đó là lúc event handlers (trình xử lý sự kiện) vào cuộc. Chúng chính là những hàm JavaScript được sinh ra để phản hồi lại các sự kiện.

Event Handler là gì?

Một event handler là một hàm sẽ được thực thi khi một sự kiện cụ thể xảy ra trên một phần tử nhất định. Nó là đoạn code chứa logic “làm gì khi sự kiện X diễn ra”. Có nhiều cách để gán một event handler, nhưng không phải cách nào cũng tối ưu. Hãy cùng WiWeb điểm qua 3 phương pháp chính.

Cách 1: Inline HTML Attributes (onclick=’…’) – Không khuyến khích

Đây là cách gán trực tiếp hàm xử lý vào thuộc tính HTML của phần tử.

<button onclick="alert('Bạn vừa click!');">Nhấn vào tôi</button>

Tại sao không nên dùng? Cách này trộn lẫn mã JavaScript vào trong HTML. Điều này làm cho code rất khó đọc, khó bảo trì và đi ngược lại nguyên tắc tách biệt cấu trúc (HTML) và hành vi (JavaScript).

Cách 2: DOM Properties (element.onclick) – Giới hạn và nhược điểm

Bạn có thể gán một hàm vào thuộc tính DOM của phần tử trong file JavaScript.

const myButton = document.querySelector('#myBtn');
myButton.onclick = function() {
  alert('Bạn lại click nữa rồi!');
};

Cách này tốt hơn vì đã tách biệt được JavaScript. Tuy nhiên, nó có một nhược điểm lớn: mỗi sự kiện chỉ có thể có một handler. Nếu bạn gán một hàm onclick mới, hàm cũ sẽ bị ghi đè và biến mất.

Cách 3: addEventListener() – Phương pháp hiện đại và tối ưu nhất

Đây là phương pháp được khuyến khích hàng đầu hiện nay. Nó mạnh mẽ, linh hoạt và giải quyết mọi nhược điểm của hai cách trên. Một javascript event listener được thêm vào bằng phương thức này là cách làm sạch sẽ nhất.

const myButton = document.querySelector('#myBtn');

function sayHello() {
  console.log('Xin chào từ WiWeb!');
}

function sayGoodbye() {
  console.log('Tạm biệt!');
}

// Bạn có thể thêm nhiều handler cho cùng một sự kiện
myButton.addEventListener('click', sayHello);
myButton.addEventListener('click', sayGoodbye);

Lợi ích của addEventListener():

• Cho phép gán nhiều hàm xử lý cho cùng một sự kiện trên một phần tử.
• Cung cấp quyền kiểm soát chi tiết hơn đối với luồng sự kiện (chúng ta sẽ tìm hiểu về bubbling và capturing ở phần sau).
• Giúp mã nguồn sạch sẽ và dễ quản lý hơn.

Tìm hiểu sâu về Đối tượng Event

Khi một sự kiện được kích hoạt và hàm xử lý của bạn được gọi, trình duyệt sẽ tự động truyền vào hàm đó một đối số đặc biệt. Đó chính là đối tượng event (the event object), thường được đặt tên là event, evt, hoặc đơn giản là e.

Đối tượng ‘event’ là gì và nó được truyền vào khi nào?

Đối tượng event là một kho báu chứa đầy thông tin chi tiết về sự kiện vừa xảy ra. Nó được tạo ra tự động mỗi khi một sự kiện được kích hoạt. Bạn có thể truy cập nó bên trong hàm xử lý sự kiện của mình.

const myButton = document.querySelector('#myBtn');

myButton.addEventListener('click', function(e) {
  // 'e' chính là đối tượng event
  console.log(e);
});

Các thuộc tính quan trọng: event.target, event.type, event.currentTarget

Đối tượng event object javascript có rất nhiều thuộc tính, nhưng đây là những thuộc tính bạn sẽ sử dụng thường xuyên nhất:

• event.target: Đây là thuộc tính cực kỳ quan trọng. Nó trỏ đến phần tử gốc đã kích hoạt sự kiện. Ví dụ, nếu bạn click vào một icon bên trong một nút, event.target sẽ là icon đó, không phải nút.
• event.type: Cho bạn biết loại sự kiện đã xảy ra, dưới dạng một chuỗi (ví dụ: ‘click’, ‘mouseover’, ‘keydown’).
• event.currentTarget: Trỏ đến phần tử mà bạn đã gắn trình lắng nghe sự kiện (addEventListener) vào. Nó không phải lúc nào cũng giống event.target.

Các phương thức hữu ích: Ngăn chặn hành vi mặc định với event.preventDefault()

Một số phần tử HTML có hành vi mặc định. Ví dụ, thẻ <a> sẽ chuyển hướng trang, hoặc nút submit trong form sẽ gửi dữ liệu và tải lại trang. Đôi khi, chúng ta muốn ngăn chặn những hành vi này để xử lý bằng JavaScript. Đó là lúc event.preventDefault() tỏa sáng.

const myForm = document.querySelector('#myForm');

myForm.addEventListener('submit', function(e) {
  // Ngăn form gửi đi và tải lại trang
  e.preventDefault();
  console.log('Form đã được xử lý bằng JavaScript!');
});

Ngừng lan truyền sự kiện với event.stopPropagation()

Phương thức này dùng để ngăn sự kiện lan truyền lên các phần tử cha trong cây DOM. Chúng ta sẽ tìm hiểu kỹ hơn về cơ chế lan truyền (bubbling) ngay trong phần tiếp theo.

Luồng Sự kiện trong DOM: Bubbling và Capturing

Khi một sự kiện xảy ra trên một phần tử, nó không chỉ xảy ra ở riêng phần tử đó. Nó thực hiện một hành trình qua các phần tử cha của nó trong cây DOM. Quá trình này được gọi là luồng sự kiện (Event Flow).

Event Flow là gì?

Luồng sự kiện trong các trình duyệt hiện đại bao gồm ba giai đoạn:

1. Giai đoạn Capturing: Sự kiện bắt đầu từ phần tử gốc (window), đi xuống qua các phần tử cha cho đến khi tới phần tử đích (event.target).
2. Giai đoạn Target: Sự kiện đến được phần tử đích.
3. Giai đoạn Bubbling: Sự kiện bắt đầu nổi bọt (bubble) từ phần tử đích, đi ngược lên qua các phần tử cha cho đến khi trở lại phần tử gốc (window).

Event Bubbling: Sự kiện nổi bọt từ trong ra ngoài

Đây là hành vi mặc định và được sử dụng nhiều nhất. Hãy tưởng tượng bạn có một nút nằm trong một div. Khi bạn nhấp vào nút:

1. Sự kiện click xảy ra trên nút.
2. Sau đó, sự kiện click tiếp tục xảy ra trên div cha.
3. Và cứ thế tiếp tục đi lên body, html, và window.

Cơ chế event bubbling javascript này cực kỳ hữu ích và là nền tảng cho một kỹ thuật tối ưu quan trọng.

Event Capturing: Sự kiện đi từ ngoài vào trong

Đây là giai đoạn đi ngược lại với bubbling. Sự kiện đi từ window xuống phần tử đích. Giai đoạn này ít được sử dụng trong thực tế, nhưng bạn có thể lắng nghe sự kiện trong giai đoạn này bằng cách truyền một tùy chọn vào addEventListener.

// Tham số thứ ba là 'true' để bật chế độ capturing
element.addEventListener('click', myFunction, true);

Event Delegation: Kỹ thuật tối ưu hiệu năng bằng Event Bubbling

Đây là một trong những kỹ thuật mạnh mẽ nhất liên quan đến sự kiện. Event delegation javascript tận dụng cơ chế bubbling để cải thiện hiệu năng.

Thay vì thêm một trình xử lý sự kiện cho 100 mục trong một danh sách, bạn chỉ cần thêm một trình xử lý duy nhất cho phần tử cha (ví dụ: thẻ <ul>). Khi một mục con (<li>) được nhấp, sự kiện sẽ nổi bọt lên <ul>. Bên trong hàm xử lý, chúng ta có thể dùng event.target để xác định chính xác mục con nào đã được nhấp.

const list = document.querySelector('#myList');

list.addEventListener('click', function(e) {
  // Kiểm tra xem phần tử được click có phải là một thẻ LI không
  if (e.target.tagName === 'LI') {
    console.log('Bạn đã click vào mục:', e.target.textContent);
  }
});

Cách này tiết kiệm bộ nhớ và đặc biệt hiệu quả khi các mục con được thêm hoặc xóa động.

Các Loại Sự kiện JavaScript Phổ biến (Kèm ví dụ Code)

JavaScript cung cấp rất nhiều loại sự kiện để bạn lắng nghe. Dưới đây là một số nhóm sự kiện phổ biến nhất mà WiWeb đã tổng hợp kèm ví dụ minh họa.

Sự kiện Chuột (Mouse Events)

Đây là những sự kiện liên quan đến hành động của con trỏ chuột.

• click: Khi người dùng nhấp chuột trái.
• dblclick: Khi người dùng nhấp đúp chuột trái.
• mouseover: Khi con trỏ chuột di chuyển vào một phần tử.
• mouseout: Khi con trỏ chuột di chuyển ra khỏi một phần tử.

const box = document.querySelector('.box');
box.addEventListener('mouseover', function() {
  box.style.backgroundColor = 'lightblue';
});
box.addEventListener('mouseout', function() {
  box.style.backgroundColor = 'lightgray';
});

Sự kiện Bàn phím (Keyboard Events)

Những sự kiện này được kích hoạt khi người dùng tương tác với bàn phím.

• keydown: Khi một phím được nhấn xuống.
• keyup: Khi một phím được thả ra.
• keypress: Khi một phím tạo ra một ký tự được nhấn (đã lỗi thời, nên dùng keydown).

const input = document.querySelector('input');
input.addEventListener('keydown', function(e) {
  console.log('Bạn vừa nhấn phím:', e.key);
});

Sự kiện Biểu mẫu (Form Events)

Những sự kiện này rất quan trọng khi làm việc với các DOM events trong biểu mẫu.

• submit: Khi biểu mẫu được gửi đi.
• change: Khi giá trị của một phần tử <input>, <select>, hoặc <textarea> thay đổi.
• focus: Khi một phần tử nhận được tiêu điểm (focus).
• blur: Khi một phần tử mất tiêu điểm.

const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
  e.preventDefault(); // Ngăn hành vi mặc định
  alert('Form đã được gửi!');
});

Sự kiện Cửa sổ & Tài liệu (Window & Document Events)

Những sự kiện này liên quan đến trạng thái của cửa sổ trình duyệt hoặc tài liệu HTML.

• load: Khi toàn bộ trang, bao gồm tất cả tài nguyên (ảnh, CSS), đã được tải xong.
• DOMContentLoaded: Khi cây DOM HTML đã được xây dựng hoàn chỉnh, nhưng các tài nguyên khác có thể chưa tải xong. Sự kiện này nhanh hơn load.
• resize: Khi cửa sổ trình duyệt được thay đổi kích thước.

Lời kết

Qua bài viết này, chúng ta đã cùng nhau đi qua một hành trình chi tiết về events javascript. Hy vọng rằng bạn đã có một cái nhìn rõ ràng và sâu sắc hơn về chủ đề quan trọng này.

Tóm tắt những kiến thức cốt lõi về JavaScript Events

• Sự kiện là tín hiệu về hành động của người dùng hoặc trình duyệt.
• Event Handler là hàm để xử lý các sự kiện đó.
• addEventListener() là phương pháp hiện đại và tốt nhất để đăng ký trình xử lý sự kiện.
• Đối tượng Event chứa thông tin chi tiết về sự kiện, với event.target là một thuộc tính cực kỳ hữu ích.
• Luồng sự kiện bao gồm Capturing và Bubbling, trong đó Bubbling là nền tảng cho kỹ thuật Event Delegation để tối ưu hiệu năng.

Nếu bạn muốn đào sâu hơn, hãy thử tìm hiểu về:

• Tạo và kích hoạt sự kiện tùy chỉnh (Custom Events).
• Các sự kiện chạm (Touch Events) cho thiết bị di động.
• Throttling và Debouncing để kiểm soát tần suất thực thi của các event handler.

Bạn còn thắc mắc nào về chủ đề này không? Hãy để lại bình luận bên dưới, WiWeb sẽ giải đáp giúp bạn nhé!

Nếu bạn cần một website chuyên nghiệp để phát triển thương hiệu, WiWeb luôn sẵn sàng tư vấn. Liên hệ với chúng tôi nhé!