JavaScript, jQuery

Xử lý sự kiện trong JavaScript

Posted on by Đỗ Thành
JavaScript
08
Th4
View: 8

Các sự kiện phổ biến trong trang web

JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới và được sử dụng rộng rãi trong phát triển các trang web và ứng dụng web. Dưới đây là một số sự kiện phổ biến trên trang web được xử lý bằng JavaScript:

  1. Click: Sự kiện này được kích hoạt khi người dùng nhấp chuột lên một phần tử trên trang web, ví dụ như một nút hoặc liên kết.

  2. Scroll: Sự kiện này xảy ra khi người dùng cuộn trang web lên hoặc xuống.

  3. Keydown: Sự kiện này được kích hoạt khi người dùng ấn một phím trên bàn phím.

  4. Submit: Sự kiện này xảy ra khi người dùng gửi một biểu mẫu trên trang web.

  5. Load: Sự kiện này xảy ra khi trang web hoàn tất quá trình tải.

  6. Mouseover: Sự kiện này xảy ra khi người dùng di chuột qua một phần tử trên trang web.

  7. Resize: Sự kiện này xảy ra khi kích thước của trang web thay đổi, ví dụ như khi người dùng thay đổi kích thước của trình duyệt.

  8. Focus: Sự kiện này xảy ra khi một phần tử trên trang web được chọn hoặc nhận trọng tâm.

  9. Blur: Sự kiện này xảy ra khi một phần tử trên trang web bị mất trọng tâm.

Đây chỉ là một vài ví dụ về các sự kiện được xử lý bằng JavaScript trên trang web. Có rất nhiều sự kiện khác, tùy thuộc vào tính năng của trang web và ứng dụng web cụ thể.

Cách gán sự kiện cho các phần tử HTML

Để gán sự kiện cho các phần tử HTML với JavaScript, bạn có thể sử dụng phương thức addEventListener trên đối tượng phần tử HTML. Cú pháp của phương thức này như sau:

element.addEventListener(event, function, useCapture);

Trong đó:

  • element là đối tượng phần tử HTML mà bạn muốn gán sự kiện.
  • event là tên của sự kiện mà bạn muốn gán cho phần tử HTML. Ví dụ: “click”, “mouseover”, “submit”,…
  • function là hàm JavaScript được thực thi khi sự kiện được kích hoạt. Hàm này có thể được định nghĩa trực tiếp trong phương thức addEventListener, hoặc được định nghĩa ở nơi khác và được truyền vào phương thức này dưới dạng tham số.
  • useCapture là một giá trị boolean (true/false) cho biết liệu sự kiện có được kích hoạt trong chế độ capture hay không. Giá trị mặc định là false.

Ví dụ: để gán sự kiện “click” cho một nút (button) trên trang web, bạn có thể sử dụng mã sau:

let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
    alert("Button clicked!");
});

Trong ví dụ này, đối tượng phần tử HTML được lấy thông qua phương thức getElementById, và sau đó sự kiện “click” được gán bằng cách sử dụng phương thức addEventListener. Khi nút được nhấp, hàm được định nghĩa trong phương thức addEventListener sẽ được thực thi, và một thông báo sẽ hiển thị trên trình duyệt.

Xử lý sự kiện trong JavaScript

Trong JavaScript, xử lý sự kiện là quá trình đăng ký và thực thi các hàm JavaScript khi người dùng thực hiện các hoạt động trên trang web, như nhấp chuột, nhập liệu, hoặc cuộn trang.

Để xử lý sự kiện trong JavaScript, bạn có thể sử dụng phương thức addEventListener để đăng ký các hàm JavaScript để được thực thi khi sự kiện được kích hoạt.

Ví dụ: để xử lý sự kiện “click” trên một nút (button) trên trang web, bạn có thể sử dụng đoạn mã sau:

let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
    // code xử lý sự kiện
});

Trong ví dụ này, đối tượng phần tử HTML được lấy thông qua phương thức getElementById, và sau đó sự kiện “click” được đăng ký bằng cách sử dụng phương thức addEventListener. Khi người dùng nhấp chuột vào nút, hàm được định nghĩa trong phương thức addEventListener sẽ được thực thi.

Bạn cũng có thể sử dụng các hàm xử lý sự kiện được định nghĩa riêng để xử lý các sự kiện trên trang web. Ví dụ: để xử lý sự kiện “click” trên một nút và gọi đến một hàm được định nghĩa riêng, bạn có thể sử dụng đoạn mã sau:

let myButton = document.getElementById("myButton");

function handleClick() {
    // code xử lý sự kiện
}

myButton.addEventListener("click", handleClick);

Trong ví dụ này, một hàm handleClick được định nghĩa để xử lý sự kiện “click”. Hàm này được truyền vào phương thức addEventListener để đăng ký sự kiện. Khi người dùng nhấp chuột vào nút, hàm handleClick sẽ được thực thi.

Một số ví dụ về xử lý sự kiện trong JavaScript

Đây là một ví dụ cụ thể về sự kiện Keydown trong JavaScript. Trong ví dụ này, chúng ta sẽ thực hiện một hành động khi người dùng nhấn phím “Enter” trên bàn phím.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Keydown event</title>
  </head>
  <body>
    <input type="text" id="textInput" />
    <p id="message"></p>
    
    <script>
      const input = document.getElementById("textInput");
      const message = document.getElementById("message");
      
      input.addEventListener("keydown", function(event) {
        if (event.keyCode === 13) {
          message.innerHTML = `You have typed: ${input.value}`;
        }
      });
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta có một trang web đơn giản với một ô nhập liệu và một đoạn văn bản. Khi người dùng nhấn phím “Enter” trên bàn phím trong ô nhập liệu, chúng ta sẽ hiển thị nội dung của ô nhập liệu trong đoạn văn bản.

Trong JavaScript, chúng ta sử dụng phương thức addEventListener để đăng ký sự kiện Keydown trên đối tượng ô nhập liệu. Trong hàm xử lý sự kiện, chúng ta kiểm tra xem phím được nhấn có phải là phím “Enter” hay không bằng cách sử dụng thuộc tính keyCode của đối tượng event. Nếu là phím “Enter”, chúng ta hiển thị nội dung của ô nhập liệu trong đoạn văn bản bằng cách thay đổi nội dung của đối tượng văn bản bằng thuộc tính innerHTML.

Lưu ý rằng trong các phiên bản JavaScript mới, chúng ta nên sử dụng thuộc tính key của đối tượng event để kiểm tra xem phím được nhấn có phải là phím “Enter” hay không. Ví dụ:

if (event.key === "Enter") {
  // Do something
}

Dưới đây là một ví dụ cụ thể về sự kiện Submit trong JavaScript. Trong ví dụ này, chúng ta sẽ thực hiện một hành động khi người dùng nhấn nút Submit trong một biểu mẫu.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Submit event</title>
  </head>
  <body>
    <form id="myForm">
      <label for="nameInput">Enter your name:</label>
      <input type="text" id="nameInput" />
      <br />
      <button type="submit">Submit</button>
    </form>
    <p id="message"></p>
    
    <script>
      const form = document.getElementById("myForm");
      const message = document.getElementById("message");
      
      form.addEventListener("submit", function(event) {
        event.preventDefault(); // Prevent the default form submission
        
        const name = document.getElementById("nameInput").value;
        message.innerHTML = `Hello, ${name}!`;
      });
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta có một biểu mẫu đơn giản với một ô nhập liệu và một nút Submit. Khi người dùng nhấn nút Submit, chúng ta sẽ lấy giá trị của ô nhập liệu và hiển thị một thông điệp chào mừng trên trang.

Trong JavaScript, chúng ta sử dụng phương thức addEventListener để đăng ký sự kiện Submit trên đối tượng biểu mẫu. Trong hàm xử lý sự kiện, chúng ta sử dụng phương thức preventDefault để ngăn chặn hành động mặc định của biểu mẫu là gửi dữ liệu lên máy chủ. Sau đó, chúng ta lấy giá trị của ô nhập liệu bằng cách sử dụng phương thức getElementById và hiển thị thông điệp chào mừng bằng cách thay đổi nội dung của đối tượng văn bản bằng thuộc tính innerHTML.

Dưới đây là một ví dụ về sự kiện Mouseover trong JavaScript. Trong ví dụ này, chúng ta sẽ thực hiện một hành động khi con trỏ chuột di chuyển qua một phần tử trên trang web.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of Mouseover event</title>
  </head>
  <body>
    <div id="myDiv">Hover over me</div>
    <p id="message"></p>
    
    <script>
      const div = document.getElementById("myDiv");
      const message = document.getElementById("message");
      
      div.addEventListener("mouseover", function() {
        message.innerHTML = "You are hovering over the div.";
      });
      
      div.addEventListener("mouseout", function() {
        message.innerHTML = "";
      });
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta có một phần tử div đơn giản và một đối tượng văn bản để hiển thị thông báo. Khi con trỏ chuột di chuyển qua phần tử div, chúng ta sẽ hiển thị một thông báo trên trang web. Khi con trỏ chuột di chuyển ra khỏi phần tử div, chúng ta sẽ xóa thông báo.

Trong JavaScript, chúng ta sử dụng phương thức addEventListener để đăng ký sự kiện Mouseover trên đối tượng phù hợp. Trong hàm xử lý sự kiện, chúng ta thực hiện các hành động mong muốn, ví dụ như hiển thị thông báo hoặc thay đổi thuộc tính của phần tử. Trong ví dụ này, chúng ta sử dụng sự kiện Mouseout để xóa thông báo khi con trỏ chuột di chuyển ra khỏi phần tử div.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *