Sự kiện JavaScript là gì

Bạn đang lái xe ô tô và có tín hiệu đèn đỏ, Bạn dừng lại. Khi tín hiệu chuyển sang màu xanh lục, bạn bắt đầu lái xe trở lại. Hành động của bạn dựa trên một số tín hiệu được cung cấp cho bạn. Các sự kiện cũng vậy. Khi bạn đang lập trình, bạn muốn một số hành động được thực hiện bằng cách nhấp vào nút hoặc nhấn phím. Việc nhấp vào nút hoặc nhấn phím sẽ tạo ra một sự kiện. Dựa trên sự kiện này, một số hành động được thực hiện. Ví dụ: có một bài viết và một nút có nội dung “hiển thị thêm”. Khi bạn nhấp vào nút đó, toàn bộ bài viết sẽ hiển thị

Trong bài đăng này, chúng ta sẽ thảo luận mọi thứ về các sự kiện với các ví dụ

Sự kiện là gì

Nói một cách đơn giản, một sự kiện là một hành động được thực hiện bởi người dùng hoặc do trình duyệt khởi tạo. JavaScript đáp ứng/phản ứng với hành động đó; . Xử lý sự kiện chỉ là một đoạn mã được viết bởi nhà phát triển. Đoạn mã này chạy khi sự kiện được kích hoạt. Trình xử lý sự kiện còn được gọi là trình xử lý sự kiện. Các sự kiện được kích hoạt trong cửa sổ trình duyệt và có liên quan hoặc được đính kèm với một hoặc một tập hợp các phần tử. Sự kiện có nhiều loại khác nhau. một số trong số họ là

• Người dùng nhấn một phím trên bàn phím
• Người dùng di chuột qua một phần tử
• Người dùng nhấp vào một phần tử qua chuột
• Người dùng đóng trình duyệt
• Người dùng thay đổi kích thước trình duyệt
• Trang web đang tải hoặc đã tải xong
• Khi xảy ra lỗi
• Người dùng gửi biểu mẫu

Sự kiện JavaScript

JavaScript cung cấp cho chúng ta một loạt các sự kiện. Liệt kê tất cả chúng và giải thích tất cả chúng dưới một bài báo là điều không thể. Ở đây tôi sẽ chỉ liệt kê những cái phổ biến nhất

Sự kiện đầu vào

• xanh hơn
• biến đổi
• tiêu điểm
• gõ phím/phím tắt
• bấm phím

Sự kiện chuột

• Di chuột lên trên
• Di chuột
• Di chuột/di chuột lên

Nhấp vào Sự kiện

• nhấp chuột
• Dblclick

Tải sự kiện

• trọng tải
• dỡ hàng
• lỗi
• Thay đổi kích thước

Bây giờ chúng ta đã thảo luận về lý thuyết, chúng ta hãy chuyển sang phần thực tiễn và thảo luận về một số ví dụ thực tế về các sự kiện JavaScript. Giả sử tôi có một nút và khi tôi nhấp vào nút đó, tôi muốn hiển thị cảnh báo cho người dùng. Việc nhấp vào nút sẽ kích hoạt sự kiện và sau đó một khối mã sẽ xử lý sự kiện và phản ứng bằng cách hiển thị cảnh báo

< nút lớp="clickme">Click Mebutton>

Đây là một nút đơn giản trong tệp html. Bây giờ chúng ta sẽ lấy nút thông qua tên lớp và sau đó sẽ xử lý sự kiện i-e click

const btn = tài liệu. Bộ chọn truy vấn(". nhấp vào tôi");
btn. addEventListener('click',function(){
   alert("You clicked the button");
});

Đặt mã này vào thẻ script hoặc tạo một tệp khác có phần mở rộng js và đặt nó ở đó

Bây giờ khi chúng tôi nhấp vào nút, một cảnh báo sẽ được hiển thị

Ngoài ra còn có những cách khác chúng ta có thể thực hiện điều này, ví dụ

const btn = tài liệu. Bộ chọn truy vấn(". nhấp vào tôi");
btn. onclick= chức năng(){
   alert("You clicked the button");
};

Hoặc

const btn = tài liệu. Bộ chọn truy vấn(". clickme");
chức năng clickedMe (){
   alert("You clicked the button");
};
btn.onclick= clickedMe ;

Tệp html tức là nút vẫn giữ nguyên

Ghi chú. Bạn có thể đặt mã JavaScript của mình vào thẻ tập lệnh, sau đó chạy tệp html của mình trong trình duyệt bằng máy chủ trực tiếp hoặc tạo một tệp khác có phần mở rộng js và tham chiếu tệp đó bên trong tiêu đề của tệp html

Bây giờ hãy xem một ví dụ khác. Giả sử chúng ta có một mẫu đăng ký. Trong biểu mẫu, chúng tôi có hai trường đầu vào và chúng tôi muốn đặt xác thực. Nếu người dùng gửi biểu mẫu, chúng tôi muốn kiểm tra xem người dùng đã điền cả hai đầu vào hay để trống. Nếu cả hai hoặc một trong số chúng trống, chúng tôi sẽ hiển thị cảnh báo rằng trường trống. Mặt khác, chúng tôi hiển thị cảnh báo cho biết người dùng đã đăng ký

< body >
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <input type="password" id="password" placeholder="Enter your Password">
      <button>Registerbutton>
   form>
body>

<script>

var myform = document.getElementById('myForm');
myform.onsubmit = hàm() . {
   const name=document.getElementById("name").giá trị;
      const mật khẩu< . =document.getElementById("mật khẩu").giá trị;
      nếu(<name && password){
      alert("Registered")
   }
   else{
         alert("Fill the required fields please")
   }
};

script>

Khi chúng tôi để trống trường mật khẩu và nhấp vào đăng ký, một sự kiện đã kích hoạt tức là gửi. Nhưng dựa trên trình xử lý của chúng tôi, trường nhập "Mật khẩu" trống do đó thông báo "Vui lòng điền vào các trường bắt buộc" được hiển thị

Khi chúng tôi điền vào cả hai trường và nhấp vào nút đăng ký, “Đã đăng ký” được hiển thị

Phần kết luận

Sự kiện và xử lý sự kiện là những khái niệm thực sự quan trọng của JavaScript. Khi người dùng tương tác với một trang web, một sự kiện sẽ được kích hoạt. JavaScript cung cấp các trình xử lý sự kiện để phản hồi các sự kiện này và làm cho các trang web có tính tương tác cao hơn đồng thời mang lại trải nghiệm sống động cho người dùng. Trong các trình xử lý sự kiện đó, chúng ta có thể đặt mã và logic của riêng mình và tạo ra thứ gì đó đẹp mắt

Trong bài đăng này, chúng tôi đã thảo luận ngắn gọn về các sự kiện JavaScript là gì và cách chúng tôi có thể xử lý chúng;

Sự kiện trong định nghĩa JavaScript là gì?

Sự kiện được sử dụng trong JavaScript là gì?

Sự kiện và trình xử lý sự kiện trong JavaScript là gì?

Làm cách nào chúng tôi có thể xử lý các sự kiện trong JavaScript?