Breaking

Sunday, April 7, 2013

Home / Bendoi / HTML / p.HTML / thủ thuật website / HTML thuộc tính sự kiện

HTML thuộc tính sự kiện

by on in , , ,

Thuộc tính sự kiện Cửa sổ

Sự kiện được kích hoạt cho các đối tượng cửa sổ (áp dụng cho thẻ body):

Thuộc tính   Mô tả  
onafterprint
?
Ví dụ: <input type="text" name="fname" id="fname" onblur="upperCase()">
 Script được chạy sau khi tài liệu được in onafterprint
onbeforeprint
?
<body onbeforeprint="printmsg()">
 có thể chạy trước khi các tài liệu được in onbeforeprint
onbeforeunload
Script được chạy trước khi tài liệu được dỡ xuống  
onerror
được chạy khi một lỗi xảy ra  
onhaschange
được chạy khi các tài liệu đã thay đổi  
onload
?
<body onresize="showMsg()">
Chạy sau khi trang web được tải xong onload
onmessage
được chạy khi tin nhắn được kích hoạt  
onoffline
được chạy khi tài liệu đi offline  
ononline
được chạy khi các tài liệu đi kèm trực tuyến  
onpagehide
được chạy khi cửa sổ được ẩn  
onpageshow
được chạy khi cửa sổ sẽ được nhìn thấy  
onpopstate
được chạy khi thay đổi lịch sử của cửa sổ  
onredo
được chạy khi các tài liệu thực hiện một làm lại  
onresize
?
Thuộc tính onresize thường được sử dụng khi các cửa sổ trình duyệt được thay đổi kích cỡ.
Chạy khi cửa sổ trình duyệt được thay đổi kích cỡ onresize
onstorage
được chạy khi một khu vực lưu trữ web được cập nhật  
onundo
Script được chạy khi các tài liệu thực hiện một undo  
onunload
?
onunload xảy ra khi người dùng điều hướng khỏi trang (bằng cách bấm vào một liên kết, nộp một mẫu đơn, đóng cửa sổ trình duyệt, vv)
Chạy một lần một trang đã dỡ (hoặc cửa sổ trình duyệt đã bị đóng) onunload

Hình thức Sự kiện

Sự kiện gây ra bởi hành động trong một dạng HTML (áp dụng cho gần như tất cả các phần tử HTML, nhưng được sử dụng trong hầu hết các yếu tố hình thức):

Thuộc tính   Mô tả  
onblur
?
Onblur thường được sử dụng với mã xác nhận dạng (ví dụ như khi người dùng rời khỏi một trường mẫu).
<input type="text" name="fname" id="fname" onblur="upperCase()">
Bắn thời điểm mà các yếu tố mất tập trung onblur
onChange
?
Thuộc tính onchange chạy thời điểm khi giá trị của các yếu tố thay đổi.
Thuộc tính onchange có thể được sử dụng với <input>, <textarea>, và các yếu tố <select>.
Bắn thời điểm khi giá trị của các yếu tố được thay đổi onChange
oncontextmenu
được chạy khi một menu ngữ cảnh được kích hoạt  
onFocus
?
OnFocus thường được sử dụng với <input>, <select>, và <a>
 Bắn thời điểm này khi các yếu tố được tập trung onFocus
onformchange
được chạy khi một hình thức thay đổi  
onforminput
được chạy khi một hình thức được người dùng nhập vào  
oninput
được chạy khi một phần tử được người dùng nhập vào  
oninvalid
được chạy khi một phần tử không hợp lệ  
onreset
Chạy khi nút Reset trong một hình thức được nhấp Không hỗ trợ trong HTML5  
onselect
?
Thuộc tính onselect có thể được sử dụng trong: <input type="file">, <input type="password">, <input type="text">, <keygen>, và <textarea>.
 Chạy sau khi một số văn bản đã được chọn trong một yếu tố onselect
onsubmit
?
Thuộc tính onsubmit chỉ được sử dụng trong: <form>.
Chạy khi một mẫu được gửi onsubmit

Sự kiện bàn phím

Thuộc tính   Mô tả  
onkeydown
?
<input type="text" onkeydown="displayResult()">
 Bắn khi người dùng nhấn một phím onkeydown
OnKeyPress
?
<input type="text" onkeypress="displayResult()">
 Chạy khi người dùng nhấn một phím OnKeyPress
onkeyup
?
<input type="text" onkeyup="displayResult()">
Chạy khi một người dùng nhả một phím onkeyup

Sự kiện chuột

Sự kiện gây ra bởi một con chuột, hoặc hành động người dùng tương tự:

Thuộc tính   Mô tả  
onclick
?
• Thuộc tính sự kiện onclick được hỗ trợ trong tất cả các trình duyệt chính.
• Các vụ chạy thuộc tính onclick trên một con chuột bấm vào phần tử.
• Lưu ý: Các thuộc tính onclick KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onclick="script">
Xem ví dụ
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
<input type="text" id="field1" value="aaa">
<input type="text" id="field2">
<button onclick="copyText()">Copy Text</button>
Xem Kết quả
Chạy trên một con chuột bấm vào phần tử onclick
ondblclick
?
Thuộc tính sự kiện ondblclick được hỗ trợ trong tất cả các trình duyệt chính.
Các vụ chạy thuộc tính ondblclick trên một con chuột nhấp đúp chuột vào phần tử.
Lưu ý: Các thuộc tính ondblclick KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
Cú pháp <element ondblclick="script">
Xem ví dụ
<script>
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
<input type="text" id="field1" value="aaa!"><br>
<input type="text" id="field2">
<br><br>
<button ondblclick="copyText()">nháy đúp vô đây!</button>
Xem Kết quả


Chạy trên một con chuột nhấp đúp chuột vào các phần tử ondblclick
ondrag
được chạy khi một phần tử được kéo  
ondragend
để chạy vào cuối một hoạt động kéo  
ondragenter
được chạy khi một phần tử đã được kéo đến một mục tiêu thả hợp lệ  
ondragleave
được chạy khi một phần tử để lại một mục tiêu thả hợp lệ  
ondragover
được chạy khi một phần tử đang được kéo qua một mục tiêu thả hợp lệ  
ondragstart
được chạy khi bắt đầu một hoạt động kéo  
ondrop
được chạy khi yếu tố kéo được giảm  
onMouseDown
?
• Thuộc tính sự kiện onMouseDown được hỗ trợ trong tất cả các trình duyệt chính.
• Thuộc tính onMouseDown chạy khi một nút chuột được nhấn xuống trên phần tử.
• Mẹo: Thứ tự của các sự kiện liên quan đến các sự kiện onMouseDown (đối với nút chuột trái / giữa):
- onMouseDown
- onmouseup
- onclick
• Thứ tự của các sự kiện liên quan đến các sự kiện onMouseDown (đối với nút chuột phải):
- onMouseDown
- onmouseup
- oncontextmenu
• Lưu ý: Các thuộc tính onMouseDown KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onmousedown="script">
Xem ví dụ
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()"> ...</p>
Xem Kết quả

Chạy khi một nút chuột được nhấn trên một phần tử onMouseDown
onmousemove
?
• Thuộc tính sự kiện onmouseout được hỗ trợ trong tất cả các trình duyệt chính.
• Thuộc tính onmouseout chạy khi con trỏ chuột di chuyển ra khỏi một phần tử.
• Lưu ý: Các thuộc tính onmouseout KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onmouseout="script">
Xem ví dụ
<script>
function bigImg(x)
{
x.style.height="80px";
x.style.width="100px";
}
function normalImg(x)
{
x.style.height="40px";
x.style.width="50px";
}
</script>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://bit.ly/bendoi001" alt="hinh anh" width="32" height="32">
Xem Kết quả hinh anh
Bắn khi con trỏ chuột di chuyển trên một phần tử onmousemove
onmouseout
?
• Thuộc tính sự kiện onmouseout được hỗ trợ trong tất cả các trình duyệt chính.
• Thuộc tính onmouseout chạy khi con trỏ chuột di chuyển ra khỏi một phần tử.
• Lưu ý: Các thuộc tính onmouseout KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onmouseout="script">
Xem ví dụ
<script>
function bigImg(x)
{
x.style.height="80px";
x.style.width="100px";
}
function normalImg(x)
{
x.style.height="40px";
x.style.width="50px";
}
</script>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://bit.ly/bendoi001" alt="hinh anh" width="32" height="32">
Xem Kết quả hinh anh
Chạy khi con trỏ chuột di chuyển ra khỏi một yếu tố onmouseout
onmouseover
?
• Thuộc tính sự kiện onmouseout được hỗ trợ trong tất cả các trình duyệt chính.
• Thuộc tính onmouseout chạy khi con trỏ chuột di chuyển ra khỏi một phần tử.
• Lưu ý: Các thuộc tính onmouseout KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onmouseout="script">
Xem ví dụ
<script>
function bigImg(x)
{
x.style.height="80px";
x.style.width="100px";
}
function normalImg(x)
{
x.style.height="40px";
x.style.width="50px";
}
</script>
<onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://bit.ly/bendoi001" alt="hinh anh" width="32" height="32">
Xem Kết quả hinh anh
Bắn khi con trỏ chuột di chuyển trên một phần tử onmouseover
onmouseup
?
• Thuộc tính sự kiện onmouseup được hỗ trợ trong tất cả các trình duyệt chính.
• Thuộc tính onmouseup chạy khi một nút chuột được phát hành trên phần tử.
• Mẹo: Thứ tự của các sự kiện liên quan đến sự kiện onmouseup (đối với nút chuột trái / giữa):
- onMouseDown
- onmouseup
- onclick
• Thứ tự của các sự kiện liên quan đến sự kiện onmouseup (đối với nút chuột phải):
- onMouseDown
- onmouseup
- oncontextmenu
• Lưu ý: Các thuộc tính onmouseup KHÔNG THỂ được sử dụng với: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, script, <style>, hoặc <title>.
• Cú pháp <element onmouseup="script">
Xem ví dụ
<script>
function mouseDown()
{
document.getElementById("p1").style.color="red";
}
function mouseUp()
{
document.getElementById("p1").style.color="green";
}
</script>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">...</p>
Xem Kết quả

Chạy khi một nút chuột được phát hành trên một phần tử onmouseup
onmousewheel
được chạy khi các bánh xe chuột đang được luân chuyển  
OnScroll
được chạy khi một phần tử của thanh cuộn đã được cuộn  

Phương tiện truyền thông sự kiện

Sự kiện kích hoạt bởi các phương tiện truyền thông như video, hình ảnh và âm thanh (áp dụng cho tất cả các phần tử HTML, nhưng phổ biến nhất trong các yếu tố phương tiện truyền thông, như <audio>, <embed>, <img>, <object>, và <video>):

Thuộc tính   Mô tả  
onabort
được chạy trên hủy bỏ  
oncanplay
được chạy khi một tập tin đã sẵn sàng để bắt đầu chơi (khi nó đã đệm đủ để bắt đầu)  
oncanplaythrough
được chạy khi một tập tin có thể được chơi tất cả các cách để kết thúc mà không dừng lại cho đệm  
ondurationchange
được chạy khi chiều dài của những thay đổi phương tiện truyền thông  
onemptied
được chạy khi một cái gì đó tồi tệ xảy ra và tập tin là đột nhiên không có sẵn (như bất ngờ ngắt kết nối)  
onended
được chạy khi phương tiện truyền thông có đến cuối (một sự kiện hữu ích cho các tin nhắn như "cảm ơn vì đã lắng nghe")  
onerror
được chạy khi một lỗi xảy ra khi tập tin đang được tải  
onloadeddata
được chạy khi phương tiện truyền thông dữ liệu được nạp  
onloadedmetadata
được chạy khi thông tin dữ liệu (như kích thước, thời gian) được nạp  
onloadstart
có thể chạy giống như các tập tin bắt đầu tải trước khi bất cứ điều gì là thực sự nạp  
onPause
được chạy khi phương tiện truyền thông bị tạm dừng hoặc bởi người sử dụng hoặc lập trình  
onplay
được chạy khi phương tiện truyền thông đã sẵn sàng để bắt đầu chơi  
onplaying
được chạy khi phương tiện truyền thông thực sự đã bắt đầu chơi  
onprogress
được chạy khi trình duyệt là trong quá trình nhận dữ liệu phương tiện truyền thông  
onratechange
được chạy mỗi lần thay đổi tỷ lệ phát lại (như khi người dùng chuyển sang một chuyển động chậm hoặc chế độ nhanh chóng chuyển tiếp)  
onreadystatechange
được chạy mỗi lần thay đổi trạng thái sẵn sàng (trạng thái sẵn sàng theo dõi trạng thái của dữ liệu phương tiện truyền thông)  
onseeked
được chạy khi các thuộc tính tìm kiếm được thiết lập để sai chỉ ra rằng tư lợi đã kết thúc  
onseeking
được chạy khi các thuộc tính tìm kiếm được thiết lập để thực sự chỉ đang tìm kiếm sự đang hoạt động  
onstalled
được chạy khi trình duyệt không thể lấy dữ liệu phương tiện truyền thông vì lý do gì  
onsuspend
được chạy khi lấy dữ liệu phương tiện truyền thông được dừng lại trước khi nó được nạp hoàn toàn vì lý do gì  
ontimeupdate
được chạy khi vị trí chơi đã thay đổi (như khi người dùng nhanh chóng chuyển tiếp đến một điểm khác nhau trong các phương tiện truyền thông)  
onvolumechange
được chạy mỗi khi khối lượng được thay đổi mà (bao gồm thiết lập âm lượng để "tắt tiếng")  
onwaiting
được chạy khi phương tiện truyền thông đã dừng lại nhưng dự kiến ​​sẽ tiếp tục (giống như khi các phương tiện thông tạm dừng để đệm dữ liệu hơn)  

Phần mô tả bằng tiếng việt chỉ mang tính tương đối, các bạn thông cảm và vui lòng comment phía dưới. Cám ơn!
Thanks w3schools.com
Author Image

About Nguyen Khoa
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

Related Posts:
By at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)