Sự kiện là các hành động hoặc sự kiện xảy ra trong hệ thống. Trong thế giới lập trình, sự kiện là điều gì đó xảy ra với các phần tử HTML. Nhưng khi được sử dụng trong các trang HTML, nó có thể phản ứng với các sự kiện này. Trong bài viết này, chúng ta sẽ xem các loại sự kiện khác nhau trong JavaScript là gì và chúng hoạt động như thế nào, theo trình tự sau:
Sự kiện trong JavaScript là gì?
Javascript có các sự kiện cung cấp giao diện động cho trang web. Các sự kiện này được kết nối với các phần tử trong Mô hình Đối tượng Tài liệu (THẨM QUYỀN).
Ngoài ra, các sự kiện này theo mặc định sử dụng sự lan truyền sôi nổi, tức là trở lên trong DOM từ con đến cha. Chúng tôi có thể ràng buộc các sự kiện dưới dạng nội tuyến hoặc trong một tập lệnh bên ngoài. Với sự trợ giúp của JavaScript, bạn có thể phát hiện khi nào các sự kiện nhất định xảy ra và khiến mọi thứ xảy ra theo phản ứng của các sự kiện đó.
Các loại sự kiện trong JavaScript
Có nhiều loại sự kiện khác nhau trong được sử dụng để phản ứng với các sự kiện. Sau đây, chúng ta sẽ thảo luận về một số sự kiện nổi tiếng hoặc được sử dụng phổ biến nhất như:
- Trong một cái nhấp chuột
- Onkeyup
- Onmouseover
- Đang tải
- Vào trọng tâm
Vì vậy, hãy tiếp tục và xem xét những sự kiện này trong JavaScript.
Sự kiện Onclick
Sự kiện Onclick là một sự kiện chuột và kích hoạt bất kỳ logic nào được xác định nếu người dùng nhấp vào phần tử mà nó được liên kết. Hãy lấy một ví dụ và xem nó hoạt động như thế nào:
function edu () {alert ('Chào mừng đến với Edureka!')} Nhấp vào NútĐầu ra:
Sau khi nhấp vào nút, bạn nhận được thông báo cảnh báo sau:
Sự kiện Onekeyup
Sự kiện này là một sự kiện bàn phím và nó được sử dụng để thực hiện các lệnh bất cứ khi nào một phím được nhả ra sau khi nhấn. Ví dụ sau cho thấy hoạt động của sự kiện:
cách cảnh báo trong javascript
var a = 0 var b = 0 var c = 0 function changeBackground () {var x = document.getElementById ('bg') bg.style.backgroundColor = 'rgb (' + a + ',' + b + ',' + c + ')' a + = 1 b + = a + 1 c + = b + 1 nếu (a> 255) a = a - b nếu (b> 255) b = a nếu (c> 255) c = b}Đầu ra:
Sau khi bạn viết một cái gì đó, nó trông như thế này:
Sự kiện onmouseover
Sự kiện onmouseover trong JavaScript tương ứng với việc di con trỏ chuột lên phần tử và các phần tử con của nó, mà nó được liên kết với nó. Ví dụ được hiển thị bên dưới:
function hov () {var e = document.getElementById ('hover') e.style.display = 'none'}Đầu ra:
Hộp màu xuất hiện trước khi di chuột. Ngay sau khi bạn di chuột qua hộp, nó sẽ biến mất.
Sự kiện onload
Sự kiện onload được kích hoạt khi một phần tử được tải hoàn toàn. Hãy lấy một ví dụ và xem nó hoạt động như thế nào:
Đầu ra:
Sự kiện onfocus
Sự kiện Onfocus có một danh sách phần tử thực thi các hướng dẫn bất cứ khi nào nó nhận được tiêu điểm. Ví dụ sau cho thấy cách hoạt động của sự kiện onfocus:
function focus () {var e = document.getElementById ('input') if (verify ('Focus Event')) {e.blur ()}}Tiêu điểm trong Hộp nhập liệu:
Đầu ra:
Đây là một số sự kiện được sử dụng thường xuyên nhất trong JavaScript. Với điều này, chúng ta đã kết thúc bài viết của mình. Tôi hy vọng bạn đã hiểu sự kiện là gì và chúng được sử dụng như thế nào.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog này và chúng tôi sẽ liên hệ lại với bạn.