Bài 11 – Sự kiện trong Javascript

JavaScript-Logo
Đăng bởi vietobject vào ngày 16/09/2013
  •  12598

Series: Giới thiệu về Javascript

Độ khó: Người mới bắt đầu

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

 
	<!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-events

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

vietobject-javascript-events

Toàn bộ series