DOM event types

 Summary: DOM events

Sự kiện và các hàm xử lý sự kiện DOM là một phần quan trọng của Javascript. Sự kiện sẽ xảy ra khi có sự tương tác từ người dùng (như sự kiện onclick khi người dùng nhấn chuột , onmousemove khi chuột di chuyển..) hoặc từ chính trang web (sự kiện onload khi một phần tử DOM nào đó đã được tải xong hay khi cửa sổ bị thay đổi kích thước). Bạn có thể tham khảo thêm danh sách sự kiện rút gọn ở W3Schools hoặc danh sách đầy đủ của Mozilla.

Sử dụng sự kiện và hàm xử lý sự kiện

Cách 1: Chèn trực tiếp vào thẻ HTML

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function buttonClick(url){
    window.location = url;
}
</script>
</head>
<body>
  <!--
    Gán hàm buttonClick() để theo dõi sự kiện onclick.
    Khi người dùng nhấn vào 1 trong 2 nút bên dưới, sự kiện onclick
    sẽ xảy ra. Hàm buttonClick() được gọi và nhận tham số là 1 đường dẫn.
   -->
  <button onclick="buttonClick('https://thachpham.com')">Visit Thachpham.com</button>
  <button onclick="buttonClick('http://www.fb.com')">Visit Facebook</button>
</body>
</html>
Cách này nhanh chóng và dễ sử dụng với hầu hết lập trình viên, nhưng sẽ phức tạp hóa code, không tiện khi xây dựng các ứng dụng lớn. Do đó, mình khuyến khích bạn nên sử dụng 2 cách bên dưới hơn.

Cách 2: Chèn vào thuộc tính sự kiện của DOM

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function xulySuKien(){
    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');
    button1.url = "https://thachpham.com";
    button2.url = "http://www.fb.com";
    /*
      Tương tự cách 1 gán hàm buttonClick() cho sự kiện onclick,
      nhưng sử dụng thuộc tính .onclick
    */
    button1.onclick = buttonClick;
    button2.onclick = buttonClick;
    function buttonClick(){
        window.location = this.url;
    }
}
window.onload = xulySuKien;
</script>
</head>
<body>
  <button id="button1">Visit Thachpham.com</button>
  <button id="button2">Visit Facebook</button>
</body>
</html>
Lưu ý là, sau khi toàn bộ các phần tử DOM đã được xử lý thì sự kiện onload sẽ xảy ra, dẫn đến việc gọi hàm xulySuKien().

Cách 3: Dùng phương thức addEventListener()

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function xulySuKien(){
    var button1 = document.getElementById('button1');
    var button2 = document.getElementById('button2');
    button1.url = "https://thachpham.com";
    button2.url = "http://www.fb.com";
    /*
      Gán hàm buttonClick() cho sự kiện click bằng phương
      thức addEventListener()
    */
    button1.addEventListener('click', buttonClick, false);
    button2.addEventListener('click', buttonClick, false);
    function buttonClick(){
        window.location = this.url;
    }
}
window.onload = xulySuKien;
</script>
</head>
<body>
  <button id="button1">Visit Thachpham.com</button>
  <button id="button2">Visit Facebook</button>
</body>
</html>
Phương thức addEventListener() đang được sử dụng rộng rãi cho các trình duyệt hiện đại từ sau 2012 (IE9+, từ IE8 trở về trước sử dụng phương thức attachEvent()). Nếu bạn quan tâm đến chất lượng code, hoặc muốn xây dựng theo mô hình hướng đối tượng (OOP) thì nên sử dụng cách này.

CÔNG CỤ HỖ TRỢ

Nhận xét

Đăng nhận xét