07 Nov

Rate this post

Mỗi trang web bên trong một trình duyệt đều được coi là một đối tượng. Khi một trang web được tải, trình duyệt sẽ tạo ra một mô hình đối tượng về trang web (DOM – Document Object Model). Nói một cách khác, DOM đại diện cho những gì chứa trong trang web và cách mà trang web được truy cập và sửa đổi.

 


HTML DOM Tree

vietobject-javascript-DOM

  • Các đối tượng lớn như cửa sổ(window), khung(frame), tài liệu(document) được tự động đặt tên.
  • Các đối tượng khác cần có tên gọi nếu như chúng được sử dụng bởi mã lệnh.
  • Với DOM, chúng ta có thể thay đổi các phần tử, nội dung, style(css), các thuộc tính và tạo ra các sự kiện bên trong tài liệu HTML.

SỰ KIỆN TRONG JAVASCRIPT

Một trang Web bao gồm các hoạt động và tương tác(tải, di chuyển, nhập, lựa chọn, nhấp,…) gọi chung là các sự kiện xảy ra khi người dùng hoặc trình duyệt sử dụng trang web đó.


Các bộ xử lý sự kiện cơ bản

Sự kiện Mô tả
onAbort cho biết tập tin hình ảnh vừa ngưng tài, chỉ áp dụng cho hình ảnh
onChange thực thi mã khi phần tử thay đổi(nhấn phím hoặc thay đổi trạng thái), áp dụng cho văn bản, vùng văn bản, hộp chọn
onSubmit thực thi mã khi một form submit(bằng việc click vào phần tử chứa sự kiện này), áp dụng cho form
onReset thực thi mã khi một form reset(bằng việc click vào phần tử chứa sự kiện này), áp dụng cho form
onSelect thực thi mã khi phần tử được chọn, áp dụng cho hộp văn bản, vùng văn bản
onBlur thực thi mã khi phần tử bị mất tiêu điểm(người dùng click ra ngoài phần tử), áp dụng cho mọi đối tượng màn hình
onFocus thực thi mã khi phần tử có tiêu điểm(người dùng click vào phần tử), áp dụng cho mọi đối tượng màn hình
onKeydown thực thi mã khi nhấn và giữ một phím
onKeypress thực thi mã khi nhấn và thả một phím
onLoad áp dụng cho cửa sổ(window) và hình ảnh. Với cửa sổ, sự kiện này được kích hoạt khi việc tải trang hoàn tất. Tương tự, sự kiện này sẽ được kích hoạt với hình ảnh khi hình ảnh được tải hoàn toàn.
onClick thực thi mã khi người dùng click chuột, áp dụng cho các phần tử form như nút, hộp kiểm, liên kết
onDblclick thực thi mã khi người dùng click chuột hai lần liên tiếp
onMousedown thực thi mã khi người dùng nhấn và giữ chuột
onMousemove thực thi mã khi người dùng di chuyển chuột
onMouseout thực thi mã khi người dùng di chuyển chuột ra khỏi phần tử
onMouseover thực thi mã khi người dùng di chuyển chuột trên phần tử

Sự kiện onClick

B1: Tạo file bai10.html, nhập đoạn code sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 11 - Sự kiện trong Javascript</title>
</head>
<body>
<script type="text/javascript" language="javascript">
function myClick()
{
    document.write("Hello there!");
}
</script>
<button onClick="myClick()">Click me</button>
</body>
</html>

B2: Mở file với trình duyệt

vietobject-javascript-sukien

Click vào nút, và kết quả

vietobject-javascript-events11vietobject-javascript-events11

Nguồn:vietobject.com

 

791 Comments