HƯỚNG DẪN CÁCH ĐỊNH NGHĨA HÀM VÀ GẮN CÁC SỰ KIỆN XỬ LÝ

Hàm (Function) trong JavaScript là một khối mã thực hiện một nhiệm vụ cụ thể. Việc sử dụng hàm giúp mã nguồn trở nên rõ ràng, dễ bảo trì và tái sử dụng. Dưới đây là hướng dẫn chi tiết về cách định nghĩa hàm và gắn các sự kiện xử lý cho hàm trong JavaScript.

1. Định nghĩa hàm trong JavaScript

JavaScript hỗ trợ nhiều cách để định nghĩa hàm, bao gồm:

a) Hàm truyền thống (Function Declaration)


function sayHello() {
    console.log("Xin chào!");
}
sayHello(); // Gọi hàm

b) Hàm biểu thức (Function Expression)


const sayHello = function() {
    console.log("Xin chào!");
};
sayHello();

c) Hàm mũi tên (Arrow Function)


const sayHello = () => {
    console.log("Xin chào!");
};
sayHello();

d) Hàm có tham số và giá trị trả về


function sum(a, b) {
    return a + b;
}
console.log(sum(3, 4)); // 7

2. Gắn sự kiện xử lý cho hàm

JavaScript cho phép gắn hàm vào các sự kiện trên phần tử HTML trên trang web để xử lý tương tác của người dùng. Các thao tác thực hiện như sau:

Một số sự kiện cơ bản 

 

Tên sự kiện

Ý nghĩa

onclick

Khi bấm chuột vào phần tử HTML thì làm gì

ondbclick

Khi bấm đúp chuột vào phần tử HTML thì làm gì

onchange

Khi giá trị trên phần tử HTML được thay đổi thì làm gì

onmouseover

Xảy ra khi con trỏ chuột bắt đầu đi vào đốitượng HTML

onmouseout

Xảy ra khi con trỏ chuột bắt đầu rời khỏi phần tử HTML

onmousemove

Xảy ra khi con chuột di chuyển bên trong phần tử HTML

onkeydown

Xảy ra khi gõ một phím bất kì vào ô input

onkeyup

Xảy ra khi nhảphím đãgõ trong ô Input

onkeypress

Xảy ra khi bạn nhấn môt phím vào ô input

a) Gắn sự kiện bằng thuộc tính HTML

<button onclick="sayHello()">Nhấn vào đây</button>


<script>
    function sayHello() {
        alert("Xin chào!");
    }
</script>

b) Gắn sự kiện bằng JavaScript


<button id="myButton">Nhấn vào đây</button>
<script>
    document.getElementById("myButton").onclick = function() {
        alert("Bạn vừa nhấn nút!");
    };
</script>

c) Gắn sự kiện bằng addEventListener


<button id="myButton">Nhấn vào đây</button>
<script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Bạn vừa nhấn nút!");
    });
</script>

3. Xóa sự kiện khỏi phần tử


function showMessage() {
    alert("Sự kiện đã bị xóa!");
}
let button = document.getElementById("myButton");
button.addEventListener("click", showMessage);
button.removeEventListener("click", showMessage);

4. Kết luận

Hàm trong JavaScript giúp tổ chức mã nguồn hiệu quả và dễ quản lý. Việc gắn sự kiện xử lý cho hàm giúp tạo ra các tính năng tương tác linh hoạt trong ứng dụng web. Nắm vững các khái niệm này giúp bạn viết mã JavaScript hiệu quả hơn.

MỘT VÀI VÍ DỤ MẪU  VỀ ĐỊNH NGHĨA HÀM VÀ GẮN SỰ KIỆN XỬ LÝ

Ví dụ 1: Gắn sự kiện bấm chuột vào đối tượng ảnh, thì ảnh sẽ được phóng to ra

Cách làm:

Bước 1: Tạo thẻ HTML

Ảnh ban đầu có kích thước hiện trên màn hình là 100x75.

Bước 2: Code javascript khai báo hàm xử lý

Khi thực hiện, nếu người sử dụng bấm chuột vào ảnh, thì kích thước ảnh được phóng to lên 200x150

Ví dụ 2: Tạo nút tăng giảm cỡ chữ trên màn hình Web như hình mẫu:

Code chương trình đầy đủ như sau:

<html>

<body>

<p id="chu">

Hôm nay trời nắng chan chang <br>

Mèo con đi học chằng mang thứ gì<br>

Chỉ mang một mẩu bánh mì<br>

Và mang một cái bút chì con con

</p>

</body>

</html>

Ví dụ 3:  Tạo form đặt hàng có dạng theo mẫu, khi người dùng chọn sản phẩm sẽ hiện ra đơn giá, nhập số lượng, chương trình tự động tính ra thành tiền.

Code chương trình:

Xem video bài học trên kênh Youtube "Yêu lập trình"