Bài 7: Event – Sự kiện trong Javascript

0

Trong bài học này, chúng ta sẽ tìm hiểu về event – sự kiện trong Javascript. Chúng ta sẽ tìm hiểu về các loại sự kiện, một số ví dụ và cách  thêm các sự kiện cho thẻ html.

Video – Event – Sự kiện trong Javascript

Hướng dẫn chi tiết

Event – sự kiện là gì? Các loại sự kiện thường dùng

Event là sự tương tác của JavaScript với HMTL được xử lý thông qua các sự kiện xảy ra khi người sử dụng hoặc trình duyệt thao tác một trang. Ví dụ

Một số sự kiện thường dùng

STT Event Name Description
1 onclick Xảy ra khi click vào thẻ HTML
2 ondbclick Xảy ra khi double click vào thẻ HTML
3 onchange Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường dùng trong các đối thẻ form input
4 onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5 onmouseout Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6 onmouseenter Tương tự như onmouseover
7 onmouseleave Tương tự như onmouseout
8 onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML
9 onkeydown Xảy ra khi gõ một phím bất kì vào ô input
10 onload Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm khởi tạo trong lập trình hướng đối tượng vậy đó.
11 onkeyup Xảy ra khi bạn gõ phím nhưng lúc bạn nhả phím ra sẽ được kích hoạt
12 onkeypress Xảy ra khi bạn nhấn môt phím vào ô input
14 onblur Xảy ra khi con trỏ chuột rời khỏi ô input
15 oncopy Xảy ra khi bạn copy nội dung của thẻ
16 oncut Xảy ra khi bạn cắt nội dung của thẻ
17 onpaste Xảy ra khi bạn dán nội dung vào thẻ

Cách để thêm sự kiện cho các phần tử HTML DOM

Mình sẽ hướng dẫn các bạn lần lượt các cách để tạo các sự kiện cho các phần tử DOM. DOM là gì thì các bạn xem bài 6 nhé. Ngoài ra, mình sẽ dùng Bootstrap để căn chỉnh cho html nhé. Bạn có thể lượt bỏ phần Bootstrap cũng được.

Thêm trực tiếp sự kiện vào html

Ví dụ: mình muốn khi nhập nội dung vào một input thì nội dung mình nhập sẽ được tự động gán cho khối bên dưới

<div class="form-group mt-5">
   <input class="form-control" type="text" id="mes" onkeyup="xemKetQua()">
   <div class="mt-3" id="result"></div>
</div>

+ Sự kiện được thêm vào thẻ input là onkeyup(). Khi gõ phím và bỏ ra, sự kiện này sẽ thực hiện hàm xemKetQua().

+ Đoạn script js cho hàm xemKetQua()

<script type="text/javascript">
function xemKetQua() {
   // Xác định 2 thẻ theo id
   var input_text = document.getElementById("mes")
   var result = document.getElementById("result")
   // lấy giá trị của input_text
   var text = input_text.value
   // gán giá trị cho result
   result.innerHTML = text
}
</script>

Các bạn chạy thử vào xem kết quả nhé.

Thêm sự kiện cho các phần tử HTML DOM bằng JS

Chúng ta có list group sau. Mục tiêu của chúng ta là khi click vào các thẻ a, sẽ hiện thông báo cho người dùng biết

<ul class="list-group">
   <li class="list-group-item"><a href="" class="dang2-js">Cras justo odio</a></li>
   <li class="list-group-item"><a href="" class="dang2-js">sdajusto odio</a></li>
   <li class="list-group-item"><a href="" class="dang2-js">Csdass justo odio</a></li>
</ul>

Chúng ta sử dụng đoạn script sau để xác định các phần tử html và gán sự kiện cho chúng.

<script type="text/javascript">
   // Lấy danh sách các thẻ
   var list = document.getElementsByClassName("dang2-js") // elements
   for (var i = 0; i < list.length; i++) {
      list[i].onclick = function(){
      alert("Dạng 2 thêm event bằng gán js")
      return false
   }
</script>

+ Dùng phương thức getElementsByClassName(“dang2-js”) để lấy một nhóm các phần tử. Kết quả của phương thức này là một mảng dữ liệu.

+ Dùng vòng lặp for để duyệt qua các phần tử của mảng và gán sự kiện onclick cho chúng.

Chạy thử và xem kết quả nhé.

Sự kiện cho phần tử này, nhưng thực thi trên phần tử khác

Về bản chất, cách thứ 3 này cũng giống như cách một, chỉ có điều chúng ta sẽ tương tác với cùng lúc nhiều thẻ html.

Chúng ta có một form đăng ký như sau:

<form class="mt-5">
   <div class="form-group">
      <label>User name</label>
      <input type="text" class="form-control" id="username" required>
   </div>
   <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" id="password" required >
   </div>
   <div class="form-group">
      <label>Nhập lại password</label>
      <input type="password" class="form-control" id="re_password" required>
   </div>
   <div class="form-group">
      <button type="submit" class="btn btn-outline-info" onclick="kiemTraForm()">Đăng ký</button>
   </div>
</form>

Chúng ta sẽ thêm sự kiện onclick cho button.

<script type="text/javascript">
function kiemTraForm() {
   var username = document.getElementById("username").value
   var password = document.getElementById("password").value
   var re_password = document.getElementById("re_password").value
   // if(username==""){
   // alert("Chưa nhập User name")
   // return false
   // }
   // if(password==""){
   // alert('Chưa nhập Password')
   // return false
   // }
   if(password!= re_password){
      alert('Mật khẩu chưa khớp')
      return false
   }
   return true
}
</script>

Chúng ta sẽ kiểm tra các input đã được nhập chưa, password và re-password khớp chưa? Chạy thử nhé.

Lưu ý: Bootstrap có hỗ trợ định dạng tính năng yêu cầu người nhập vào input mới được gửi form bằng cách thêm thuộc tính required. Nên trong thực tế, chúng ta không cần kiểm tra người dùng có nhập đủ không, mà chỉ cần kiểm tra re-password.

Thêm sự kiện bằng phương thức addEventListener()

Chúng ta sẽ thêm sự kiện cho input username, để input này kiểm tra độ dài tên user name mà người dùng nhập.

<script type="text/javascript">
var input_username = document.getElementById("username")
input_username.addEventListener('keyup',function() {
   if(input_username.value.length>15){
       alert("Tên username quá dài, hơn 15 ký tự")
    }
});
</script>

+ Xác định phần tử muốn thêm sự kiện

+ Thêm sự kiện bằng phương thức addEventListener(“tên của event”,hàm xử lý).

Lưu ý: tên của event bỏ chữ “on”, ví dụ, onkeyup thành keyup.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên h

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.