Mục tiêu bài viết
- Sự kiện trong JavaScript là gì
- Hiểu và có thể sử dụng Sự kiện trong JavaScript
Nội dung bài viết
Sự kiện là những gì xảy ra với các phần tử HTML.
Sự kiện HTML
Dưới đây là một số ví dụ về các sự kiện:
- Một trang web được tải xong
form,inputthay đổibuttonđượcclick
Ví dụ 1 sự kiện onClick được gắn vào button
|
1 2 3 4 |
<span class="token operator"><</span>button onclick<span class="token operator">=</span><span class="token string">"document.getElementById('demo').innerHTML = Date()"</span><span class="token operator">></span> The time is<span class="token operator">?</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> |
Click để xem kết quả
Trong ví dụ trên, code JavaScript thay đổi nội dung của phần tử với id = “demo”.
Trong ví dụ tiếp theo, chúng ta muôn thay đổi nội dung của phần tử của chính nút button.
|
1 2 |
<span class="token operator"><</span>button onclick<span class="token operator">=</span><span class="token string">"this.innerHTML = Date()"</span><span class="token operator">></span>The time is<span class="token operator">?</span><span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> |
Click để xem kết quả
Viết mã riêng trong phần script và gọi hàm
|
1 2 3 4 5 6 7 |
<span class="token tag"><span class="token punctuation"><</span>button <span class="token special-attr"><span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">displayDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>The time is?<span class="token tag"><span class="token punctuation"></</span>button<span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">displayDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"demo"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span> |
Các sự kiện HTML phổ biến
| Sự kiện | Mô tả |
|---|---|
onchange |
Một phần tử HTML đã được thay đổi |
onclick |
Người dùng nhấp vào một phần tử HTML |
onmouseover |
The user moves the mouse over an HTML element |
onmouseout |
Người dùng di chuyển chuột khỏi phần tử HTML |
onkeydown |
Người dùng nhấn một phím bàn phím |
onload |
Trình duyệt đã tải xong trang |
Sự kiện JavaScript có thể làm được những gì.
Ví dụ
- Những việc nên làm mỗi khi tải trang
- Những việc nên làm khi đóng trang
- Hành động sẽ được thực hiện khi người dùng nhấp vào nút
- Nội dung cần được xác minh khi người dùng nhập dữ liệu