Các sự kiện (Events) trong Javascript

Khi học JavaScript bạn sẽ được làm quen với các sự kiện (Events). Chẳng hạn như các hành động nhấp chuột, load trang, nhập thông tin, thao tác con trỏ chuột đều là sư kiện. Để hiểu hơn về sự kiện trong JavaScript bài viết dưới đây sẽ cung cấp đầy đủ thông tin để bạn có thể nắm bắt dễ dàng.

Sự kiện trong JavaScript

Sự kiện trong JavaScript là gì?

Khi chúng ta mở trình duyệt chắc chắn sẽ có các hành động như nhấp chuột, tải trang web hay rê chuột tới vị trí bất kỳ hoặc gõ bàn phím để nhập thông tin. Lúc này ngôn ngữ JavaScript sẽ lắng nghe và thực thi các hành động đó.

Các sự kiện (Events) phổ biến khác trong JavaScript

onclick: Khi người dùng nhấp chuột vào phần tử HTML

onmouseover: Người dùng rê chuột vào phần tử HTML

onchange: Một phần tử HTML thay đổi

onmouseout: Người dùng di chuột ra khỏi phần tử HTML

onkeydown: Một phím được ấn bởi người dùng

onload: trình duyệt vừa tải xong trang

dblclick: Sự kiện khi người dùng ấn đúp chuột

Để hiểu rõ hơn bạn sẽ làm một ví dụ dưới đây:

1. Sự kiện Onclick trong JavaScript

Hãy chạy đoạn mã dưới

<!DOCTYPE HTML>
<html>
<head>
<script>
function Hello(){
alert("Chào mừng bạn ghé thăm Quách Quỳnh blog!");
}
</script>
</head>
<body>
<p onclick="Hello();">Nhấp chuột để in câu chào.</p>
</body>
</html>

Khi nhấp chuột lên đoạn văn bản trong cặp thẻ <p>…</p> bạn sẽ thấy một popup cảnh báo hiện lên trình duyệt.

Tại sao lại thế nhỉ?

Đơn giản thôi khi bạn có hành động nhấp chuột thì function của JavaScript sẽ thực thi cảnh báo để bạn biết mình vừa làm gì xong.

2. Sự kiện onload trong JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
function load_trang() {
alert("Trang đã load xong");
}
</script>
</head>

<body onload="load_trang()">
<h1>Xin chào mọi người!</h1>
</body>

</html>

3. Sự kiện onmouseover và onmouseout

<!DOCTYPE html>
<html>
<body>

<script>
function mouseOver() {
document.getElementById("demo").style.color = "blue";
}

function mouseOut() {
document.getElementById("demo").style.color = "black";
}
</script>

<h2 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Thử rê chuột vào đây xem!</h2>
</body>
</html>

Kết luận: Trên đây là tổng hợp các sự kiện thông dụng trong JavaScript giúp bạn hiểu cách thức hoạt động của Events như thế nào. Khá đơn giản phải không? Đọc thêm nhiều hơn về các bài viết hướng dẫn học JavaScript từ cơ bản đến nâng cao tại đây.

Related Posts

Tạo Form đăng ký bằng Javascript

Ghi đè trong java, cách thực hiện chi tiết

Trong lập trình hướng đối tượng, ghi đè là một kỹ thuật cho phép các đối tượng con ghi đè lại phương thức của đối tượng cha…

noi-chuoi-java

Nối chuỗi trong Java

Nối chuỗi trong Java là phương pháp nối hai chuỗi riêng biệt lại với nhau. Bạn có thể sử dụng toán tử (+) hoặc phương thức concat()….

vuejs-la-gi

Vuejs là gì? Tìm hiểu tổng quan về Vue.js

JavaScript là ngôn ngữ lập trình phía Front end có độ phổ biến rất lớn. Hàng loạt Framework Js được ra đời được viết từ nó. Và…

Overriding-java-1

Overriding trong Java

Bài viết này sẽ giúp bạn hiểu về tính đa hình trong Java thông qua Overriding. Nếu bạn đã tìm hiểu về kế thừa lớp sẽ thấy…

javascript

Cách gọi hàm JavaScript trong HTML

Hàm (Functions) trong JavaScript nếu không gọi đến nó sẽ không thực thi chức năng. Vì thế để thực hiện một nhiệm vụ nào đó ở trong…

jsx-trong-reactjs-1

JSX là gì? Tìm hiểu về JSX trong Reactjs

Trong Reactjs ngay những bài đầu tiên bạn sẽ được tìm hiểu về JSX. Vậy JSX là gì và cách sử dụng như thế nào? Ngay sau…