Sự kiện là những hành động mà có thể nhận diện bằng JavaScript.
Event ?
Bằng cách sử dụng JS chúng ta có thể tạo ra các trang web động.Và event là các hành động mà ta có thể nhận diện bằng JavaScript.
Chẳng hạn chúng ta dùng sự kiện onClick của một button để cho biết rằng một chức năng sẽ chạy khi người dùng nhấp vào button đó.Chúng ta xác định các event trong các thẻ HTML.
Ví dụ về các sự kiện: Một click chuột
Một trang web hoặc một hình ảnh đang tải Di chuyển trên một điểm đặc biệt của trang web
Lựa chọn một trường đầu vào trong thẻ <form> của HTML Submit một form
Một tổ hợp phím
Chú ý rằng : sự kiện thường đi kèm với hàm,hàm sẽ không được kích hoạt khi sự kiện (event) chưa xảy ra.
onLoad và onUnload ?
Hai sự kiện này sẽ được kích hoạt khi người dùng nhập vào hoặc rời khỏi trang.
Các sự kiện onload thường được sử dụng để kiểm tra loại trình duyệt của người truy cập và phiên bản trình duyệt, và tải phiên bản thích hợp của trang web dựa trên thông tin.
Cả hai sự kiện onload và onUnload cũng thường được sử dụng để tương tác với các tập tin cookie mà nên được thiết lập khi người dùng nhập vào một trang. Ví dụ, bạn có thể có một popup yêu cầu điền tên người dùng khi lần đầu tiên đến trang của bạn. Tên này sau đó được lưu giữ trong một cookie. Tiếp theo thời gian khách truy cập đến tại trang web của bạn, bạn có thể có một popup nói cái gì đó như: "Chào mừng John Doe!".
onFocus, và onChange onBlur ?
Các onFocus, onBlur và onChange thường được sử dụng kết hợp với các trường mẫu.
Bên dưới là một ví dụ về cách sử dụng các sự kiện onChange. Hàm checkEmail () sẽ được gọi bất cứ khi nào người dùng thay đổi nội dung của trường:
<input type="text" size="30" id="email" onchange="checkEmail()">
onSubmit ?
đây là event hay được đặt trong các <form>.Trong các form thường có nút Submit để thực hiện việc chấp nhận dữ liệu đầu vào để gửi lên sever.Thế nhưng đôi khi chúng ta phải kiểm tra các dữ liệu đó trước khi nó được gửi lên sever,sự kiện onSubmit sẽ cho phép ta làm điều đó.
Dưới đây là một ví dụ về cách sử dụng các sự kiện onSubmit. Hàm checkForm () sẽ được gọi khi người dùng nhấn nút gửi biểu mẫu (nhấn Submit). Hàm checkForm trả về hoặc là đúng hoặc sai. Nếu nó trả về đúng thì sẽ được gửi, nếu không sẽ bị hủy bỏ:
action="xxx.htm" method="post" <form onsubmit="return checkForm()">
onMouseOver và onMouseout ?
onMouseOver và onmouseout là hai event liên quan đến chuột.
Dưới đây là một ví dụ về một sự kiện onMouseOver. Một hộp cảnh báo xuất hiện khi một sự kiện onMouseOver được kích hoạt:
href="http://www.w3schools.com" <a onmouseover="alert('An onMouseOver event');return false"> <img src="w3s.gif" alt="W3Schools" /> </ a >
Ta có tham khảo như sau:
Sự kiện Ý nghĩa
onMouseUp nútchuột được nhả
onMouseDown ấnchuột
onMouseOver chuộtdi chuyển qua vùng
onMouseOut chuộtdi chuyển khỏi vùng
onMouseMove chuộtđược di chuyển
onclick clickchuột
ondbclick click đúpchuột
Try – Catch
Đây là câu lệnh để kiểm lỗi của khối lệnh.
JavaScript bắt lỗi ?
Khi duyệt trang web trên internet chúng ta đôi khi bắt gặp một hộp thoại nói rằng có một lỗi runtime khi đang duyệt trang và có hỏi rằng "Do you wish to debug?".Những hộp thoại cảnh báo như thế này rất có ích cho nhà phát triển web,nhưng nó lại làm cho người sử dụng thoát khỏi trang web của bạn ngay lập tức,website của bạn có thể bị mất khách vì lí do này.
Bài học này sẽ giúp các bạn nắm bắt và xử lý các thông báo lỗi của JavaScript,nó sẽ có tác dụng to lớn trong việc tránh mất khách truy cập bởi những lỗi chẳng đâu vào đâu.
Try – Catch giúp chúng ta kiểm tra lỗi của khối lệnh,trong nó chứa phần khối lệnh chạy và phần khối lệnh thực thi trong trường hợp có lỗi xảy ra.
Cú pháp:
try {
//Run some code here }
catch(err) {
//Handle errors here }
chú ý rằng : try – catch phải được viết bằng chữ thường,viết bằng chữ hoa sẽ gặp lỗi cú pháp. Ví dụ sau đây sẽ thực hiện công việc hiện thị thông báo “chào mừng quý khách” khi button được click.Nhưng có điều là trong khối lệnh này có cú pháp alert(“ chào mừng quý khách”); bị đánh sai thành là adddlert(“ chào mừng quý khách”).Một lỗi JS đã xảy ra,và try…catch sẽ bắt lỗi nó và thực thi ma tùy chỉnh để xử lý.Mã này sẽ hiện thị một thông báo lỗi cho người sử dụng biết chuyện gì đang xảy ra.
<html> <head>
<script type="text/javascript">
var txt="";
function message() {
try
{
adddlert("Welcome guest!"); }
catch(err) {
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } } </script> </head> <body>
</body> </html>
Kết quả sau khi bạn nhấn vào button sẽ là thông báo như sau:
Trong ví dụ tiếp sau đây chúng ta sẽ sử dung hộp thoại confirm hiện thị một lời nhắn để cho người dùng tùy chọn như sau:
Họ có thể click vào nút OK để tiếp tục hiện thị trang web hoặc click Cancer để tới trang chủ ( không đả động vào trang web lỗi ấy nữa).Nếu confirm trả về giá trị false ,người dùng nhấn Cancer,và mã chuyển hướng người dùng.Nếu confirm trả về giá trị true thì trang web hiện lên không có gì. <html>
<head>
<script type="text/javascript">
var txt="";
function message() {
try
{
adddlert("Welcome guest!"); }
catch(err) {
txt="There was an error on this page.\n\n";
txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } </script>
</head> <body>
<input type="button" value="View message" onclick="message()" /> </body>
</html>