JavaScript: Cài đặt và sử dụng sự kiện
Để cài đặt và sử dụng sự kiện ta thực hiện hai bước như sau:
Bước thứ nhất: là bạn cần xác định xem bạn muốn sử dụng sự kiện gì và sự kiện đó áp dụng cho thẻ HTML nào hay cho đối tượng nào. Sự kiện bản chất là một thuộc tính của thẻ HTML và bắt đầu bằng 'on'. Nếu bạn muốn sự kiện tác động đến trang web thì nó sẽ là thuộc tính của thẻ <form>, nếu bạn muốn sự kiện tác động đến link thì nó là thuộc tính của thẻ <a>. Chẳng hạn như nếu bạn sự kiện được kích hoạt khi trang web được tải xong, nếu người dùng click vào một thẻ <input> nào đó, như nút lệnh chẳng hạn, thì sự kiện sẽ được kích hoạt. Ví dụ dưới đây là sự kiện onLoad, nó được kích hoạt sau khi trang web của ta được tải xong, và sự kiện này chỉ có trong thẻ <body>.
<body onLoad="alert('Welcome to my Web site')"; >
<form>
<input type="button"
value="Tickle me "
onClick="alert('Hee hee ho hee')";
</form> </body>
Bước thứ hai: là gán giá trị cho sự kiện. Giá trị ở đây có thể là một hàm do ta tự xây dựng hoặc một chuỗi lệnh JavaScript. Mặc dù sự kiện là một thuộc tính của thẻ HTML, nhưng những hàm do ta định nghĩa phải được đặt trong thẻ <script> hoặc trực tiếp trong sự kiện.
Bạn cũng lưu ý về các cặp nháy, đó là giá trị phải được đặt trong cặp nháy, nháy đơn hay nháy kép đều được chấp nhận, chỉ có điều nếu bên ngoài là nháy kép thì cặp nháy bên trong nó phái là nháy đơn và ngược lại. Chẳng hạn như:
Phương thức có sẵn --> onClick="window.open('myhome.html', 'newWin')"
Hàm do ta định nghĩa --> onUnLoad="timeOver();"
Chuỗi lệnh --> onChange="if (!checkVal(this.value, 1, 10)) {this.focus(); this.select();}"
Ví dụ:
<html>
<head><title>Tạo và sử dụng sự kiện</title></head>
1 <body bgcolor="magenta" onUnload="alert('So long, stranger!')";>
<center>
2 <form>
3 <input type="button"
4 value="Click here to be alerted"
5 onClick='alert("Watch out! An asteroid is approaching earth!")'>
6 </form>
</center>
</body>
</html>
GIẢI THÍCH
1. Thẻ chứa sự kiện. Khi người dùng chuyển sang một trang web khác hoặc thoát khỏi trang web hiện thời thời thì sự kiện onUnload sẽ được kích hoạt. Thông thường thì ta sẽ sử dụng sự kiện này để dọn dẹp hoặc thoát khỏi hàm một cách nhanh chóng, chẳng hạn như đóng cửa sổ hoặc xóa một trang. Lưu ý là thông thường người dùng sẽ muốn thoát khỏi trang hay chuyển sang trang khác một cách nhanh chóng, nếu ta tận dụng điều này để giữ chân người dùng thì sẽ có thể gây khó chịu cho họ. Mục đích của ví dụ này là để minh họa đối với việc tạo và sử dụng sự kiện.
2. Bắt đầu của một form bằng thẻ <form>.
3. Kiểu của thẻ <input>.
4. Giá trị của thẻ <input>.
5. Sự kiện là thuộc tính của thẻ <input>. Khi người dùng click vào nút lệnh thì phương thức alert() được gọi.
6. Kết thúc của form bằng thẻ </form>.