Hướng dẫn dùng www.eventu.com JavaScript

Cras justo odio

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.

   // 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]. title = function[]{
      alert["Dạng 2 thêm event bằng gán js"]
      return false
   }

+ 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 title 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:

   

      User name
      
   
   

      Password
      
   
   

      Nhập lại password
      
   
   

      Đăng ký
   

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

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
}

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.

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ự"]
    }
}];

+ 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ệ