Hôm nay tôi viết bài này vì gàn đây tôi bắt gặp khá nhiều bạn hỏi hiệu ứng nọ kia bằng jquery. Tôi không có ý nói và cũng không thể nói việc đi từ A đến B phải đi bằng con đường này mà không phải là con đường kia. Và việc dùng thế nào là quyền của người dùng, miễn sao họ tới dích là được. Thậm trí tôi còn ủng hộ xu hướng "đa đảng" vì có như thế mới có sự phát triển nếu không html, css hay jq sẽ độc tôn và dừng một chỗ.
Qua nhiều câu hỏi và các demo dường như nhiều bạn đang lạm dụng jquery nhiều hơn là tham khảo tìm tòi học hỏi. Vì có nhiều hiệu ứng khá đơn giản mà vẫn dùng jquery, có vẻ một số chưa học html css một cách nghiêm túc nhất, thực tế thì cho dù bạn có đến lớp gặp thầy dạy html css thì cũng không ai dạy bạn hết món. Chỉ có tự học trên w3c lần lượt từ đầu và tham khảo các ví dụ ở mấy trang nước ngoài mới vỡ ra nhiều điều.
Thực tế html css ngày nay có thể làm được nhiều việc hơn mọi ngưởi tưởng, các hiệu ứng chuyển động, xử lý thời gian, thuộc tính sự kiện, thậm trí đến cả tính toán mà không cần đụng đến dòng <script> nào
Vậy nên ngoại trừ học hỏi tìm hiểu những thứ lặt vặt trong jquery để góp vốn xây dựng những tiện ích lớn hơn thì những gì html css không thể làm được thì mới phải cầu đến jquery hoặc loại JavaScript Frameworks khác. Mặt khác khi tham khảo các ứng dụng lạ lạ của nước ngoài đôi khi họ cũng tính toán tìm một loại Framework Javascript thích hợp nhất chứ không nhất thiết phải Jquery như thói quen số đông Việt Nam.
Một điểm yếu của html css là sự lỗi thời của một số trình duyệt bảo thủ như IE vì nó là "doanh nghiệp nhà nước". Có nhiều cái không có tác dụng.
Nhưng ưu điểm lớn nhất là nhẹ, ngắn, chạy nhanh hơn.
Còn nhược điểm của jquery là dài dòng, chậm. Nếu áp dụng không đúng chỗ thì nó giống như cảnh bạn dùng ô tô để chở 1 cái bánh mì nhỏ thay vì đi bộ hoặc xe đạp sẽ tiện hơn.

thaotrinh

jquery là gì, lạm dụng jquery, tận dụng html css, lợi thế của html, JavaScript Frameworks css

Hồi mới đầu "vọc" web tôi không biết làm thế nào để hiện dòng chữ chú thích như "Nhập vào đây ..." mà mỗi khi click chuột vào đó thì chữ biến mất dành chỗ cho chúng ta gõ từ mới.
Tôi view source thấy có tý ứng dụng đó mà họ cũng cho nhiều dòng js. Rồi tôi lên các forum hỏi cũng không nhận được sự trả lời ưng ý. Cuối cùng sau thời gian tự học web căn bản đi từ HTML mà lên cuối cùng tôi thấy hóa ra những vấn đề tưởng phức tạp lại giả quyết rất đơn giản nếu chúng ta nắm chắc kiến thức cơ bản.

Hôm nay tôi giới thiệu 2 kiểu code cho chúng ta hiệu ứng này, nhưng tôi vẫn khuyên bạn nếu làm web thì nên học thật chắc kiến thức cơ bản, để đừng phức tạp hóa vấn đề. Tôi biết có nhiều bạn trẻ, làm blog cũng khá đẹp và cũng có thể nói là sớm có sản phẩm & kinh nghiệm. Nhưng các bạn ấy, làm web theo kiểu ngọn, sử dụng khá tốt mã nguồn mở, biết ứng dụng hoặc module cho web và tất nhiên xây nhà cũng rất nhanh. Tuy nhiên lệ thuộc quá nhiều vào mã nguồn, các ứng dụng được viết sẵn, đụng tý là đi tìm ứng dụng thay vì nhận ra rằng vấn đề đó có thể giải quyết theo hướng nào.

Bạn nên biết rằng hầu hết các tiện ích không liên quan đến cơ sở dữ liệu, tức là không cần phải lưu thông tin gì lên database website hoặc không liên quan đến "cân đo đong đếm" bài viết, những tiện ích ấy hầu hết viết bằng HTML + CSS + JAVASCRIPT. Đây là ngôn ngữ cơ bản trong các website, nó hoạt động trên bất kỳ website nào, bạn đừng bận tâm đến các mã nguồn. Mà nên chăng hiểu nó và ứng dụng nó vào các mục đích khác nhau.

Để ứng dụng hiệu ứng này có 2 cách chính:
Cách 1: Thêm thuộc tính sự kiện vào input text

<input type="text" onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' value='Nhập từ cần tìm vào đây'/>

Ví dụ:

Cách 2: Thêm placeholder vào input text với HTML5

<input type="text" value=""  placeholder="Nhập từ cần tìm vào đây"/><br/>

Ví dụ:

Thao trinh

http://web.bendoi.vn/2013/09/html-hien-thi-chu-thich-giu-cho-trong.html

HTML _1-2-3-4-5

---

Mặc dù HTML chính thức ra đời cách đây hơn 20 năm nhưng phần audio/video vẫn là điểm yếu khi phải phụ thuộc hoàn toàn vào hệ điều điều hành và sự hạn chế của trình duyệt. Trong phiên bản mới của HTML đã có nhiều cái mới trong việc nhúng audio/video bằng HTML một cách độc lập mà không phụ thuộc vào các chương trình chạy audio/video đã cótrong máy tính. Xin mời các bạn tham khảo thêm!

Phương pháp		Mô tả
		HTML Audio/Video Methods
addTextTrack ()	. Phương pháp chưa được hỗ trợ trong bất kỳ trình duyệt chính	Thêm một ca khúc văn bản mới cho âm thanh / video
canPlayType ()		Kiểm tra nếu trình duyệt có thể chơi các âm thanh / video loại quy định
load ()		Tải lại các yếu tố âm thanh / video
play ()		Bắt đầu chơi âm thanh / video
pause ()		Tạm dừng các âm thanh / video hiện đang chơi
		HTML Audio/Video Properties
audioTracks		Trả về một đối tượng AudioTrackList đại diện cho âm thanh có sẵn
autoplay		Bộ hoặc trả về nếu âm thanh / video nên bắt đầu chơi ngay sau khi nó được nạp
buffered		Trả về một TimeRanges phản đối đại diện cho phần đệm của âm thanh / video
controller		Trả về đối tượng MediaController đại diện cho bộ điều khiển phương tiện truyền thông hiện tại của âm thanh / video
controls		Bộ hoặc trả về nếu âm thanh / video sẽ hiển thị điều khiển (như chơi / tạm dừng, vv)
crossOrigin		Bộ hoặc trả về các thiết lập cors của âm thanh / video
currentSrc		Trả về URL của âm thanh / video hiện tại
currentTime		Bộ hoặc trả về vị trí phát hiện trong các âm thanh / video (tính bằng giây)
defaultMuted		Bộ hoặc trả về nếu âm thanh / video bị tắt theo mặc định
defaultPlaybackRate		Bộ hoặc trả về tốc độ mặc định của phát lại âm thanh / video
duration		Trả về độ dài của âm thanh / video hiện tại (tính bằng giây)
ended		Lợi nhuận nếu phát lại âm thanh / video đã kết thúc hay không
error		Trả về một đối tượng MediaError đại diện cho nhà nước lỗi của âm thanh / video
loop		Bộ hoặc trả về nếu âm thanh / video nên bắt đầu lại khi đã hoàn thành
mediaGroup		Bộ hoặc trả về một nhóm các âm thanh / video thuộc (được sử dụng để liên kết nhiều yếu tố âm thanh / video)
muted		Bộ hoặc trả về nếu âm thanh / video bị tắt hoặc không
networkState		Trả về trạng thái mạng hiện tại của âm thanh / video
paused		Bộ hoặc trả về nếu âm thanh / video được tạm dừng hoặc không
playbackRate		Bộ hoặc trả về tốc độ phát lại âm thanh / video
played		Trả về một TimeRanges phản đối đại diện cho phần chơi của âm thanh / video
preload		Bộ hoặc trả về nếu âm thanh / video sẽ được nạp khi tải trang
readyState		Trả về trạng thái sẵn sàng hiện tại của âm thanh / video
seekable		Trả về một TimeRanges phản đối đại diện cho phần seekable của âm thanh / video
seeking		Lợi nhuận nếu người dùng hiện đang tìm kiếm trong các âm thanh / video
src		Bộ hoặc trả về mã nguồn hiện tại của các yếu tố âm thanh / video
startdate		Trả về một đối tượng ngày đại diện cho thời gian hiện tại bù đắp
textTracks		Trả về một đối tượng TextTrackList đại diện cho các bài hát văn có thể có
videoTracks		Trả về một đối tượng VideoTrackList đại diện cho các bài hát video có sẵn
volume		Bộ hoặc trả về khối lượng của âm thanh / video
		HTML Audio/Video Events
abort		Chạy khi tải của âm thanh / video được hủy bỏ
canplay		Chạy khi trình duyệt có thể bắt đầu chơi âm thanh / video
canplaythrough		Chạy khi trình duyệt có thể chơi thông qua các âm thanh / video mà không dừng lại cho đệm
durationchange		Chạy khi thời gian của âm thanh / video được thay đổi
emptied		Chạy khi danh sách hiện thời trống rỗng
ended		Chạy khi danh sách hiện tại kết thúc
error		Chạy khi một lỗi xảy ra trong quá trình tải của một âm thanh / video
loadeddata		Chạy khi trình duyệt đã được nạp vào khung hiện tại của âm thanh / video
loadedmetadata		Chạy khi trình duyệt đã được nạp dữ liệu meta cho âm thanh / video
loadstart		Chạy khi trình duyệt bắt đầu tìm kiếm những âm thanh / video
pause		Chạy khi âm thanh / video đã được dừng lại
play		Chạy khi âm thanh / video đã được bắt đầu hoặc không còn dừng lại
playing		Chạy khi âm thanh / video đã sẵn sàng để chơi sau khi bị tạm dừng hoặc dừng lại đệm
progress		Chạy khi trình duyệt được tải về âm thanh / video
ratechange		Chạy khi tốc độ chơi của âm thanh / video được thay đổi
seeked		Chạy khi người dùng kết thúc di chuyển / nhảy đến một vị trí mới trong các video âm thanh /
seeking		Chạy khi người dùng bắt đầu di chuyển / nhảy đến một vị trí mới trong các video âm thanh /
stalled		Chạy khi trình duyệt đang cố gắng để có được dữ liệu phương tiện truyền thông, nhưng không có số liệu
suspend		Chạy khi trình duyệt được cố ý không nhận được dữ liệu phương tiện truyền thông
timeupdate		Chạy khi vị trí phát hiện tại đã thay đổi
volumechange		Chạy khi khối lượng đã được thay đổi
waiting		Chạy khi video dừng lại bởi vì nó cần để đệm khung hình tiếp theo

Giải thích bằng tiếng việt không chính xác và chỉ mang tính tương đối, mong các bạn thông cảm và vui lòng comment để kiến thức được hoàn thiện hơn. Chân thành cám ơn.

---

Xem tất cả thuộc tính của CSS
Thư góp ý

Thanks: ... | w3.org | w3schools .com
( 2013-04-10 14:25)

<canvas> HTML ₅₊

---

<canvas> trong HTML là một thẻ đặc biệt, mới được phát triển từ phiên bản HTML5. <canvas> kết hợp với javaScript tạo nên ứng dụng tuyệt vời để hiển thị các hình họa cơ sở. Nếu như trước kia ta phải dùng đến link ảnh, thì ngày nay chúng ta có thể tạo những biểu đồ, hình vẽ cơ sở như hình hộp, hình tròn, hình cầu,... chỉ bằng những dòng code.

Tag		Mô tả
		Màu sắc, phong cách, và bóng đổ
fillStyle	? Xem ví dụ <canvas id="fillStyle0" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var c=document.getElementById("fillStyle0"); var ctx=c.getContext("2d"); ctx.fillStyle="#00ff77"; ctx.fillRect(20,20,150,100); </script> Xem Kết quả	Bộ hoặc trả về màu sắc, độ dốc, hoặc mô hình được sử dụng để điền vào các bản vẽ
strokeStyle	? Xem ví dụ <canvas id="myCanvas" width="500" height="150" style="border:1px solid #d3d3d3;"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="90px time news roman"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.strokeText("Bendoi.vn",10,90); </script> Xem Kết quả	Bộ hoặc trả về màu sắc, độ dốc, hoặc mô hình được sử dụng ở đường viền
shadowColor	? Xem ví dụ <canvas id="myCanvas" width="300" height="150"></canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.shadowBlur=20; ctx.fillStyle="#E7AAAA"; ctx.shadowColor="black"; ctx.fillRect(20,20,100,80); ctx.shadowColor="blue"; ctx.fillRect(140,20,100,80); </script> Xem Kết quả	Bộ hoặc trả về màu sắc sử dụng cho bóng tối
shadowblur	? Xem ví dụ <canvas id="shadowblur00" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("shadowblur00"); var ctx=c.getContext("2d"); ctx.shadowBlur=20; ctx.shadowColor="black"; ctx.fillStyle="#D9D9D9"; ctx.fillRect(20,20,100,80); </script> Xem Kết quả	Bộ hoặc trả về màu sắc sử dụng cho bóng tối
shadowOffsetX	? Xem ví dụ <canvas id="shadowOffsetX00" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("shadowOffsetX00"); var ctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetX=20; ctx.shadowColor="black"; ctx.fillStyle="#FAC8C8"; ctx.fillRect(20,20,100,80); </script> Xem Kết quả	Thiết lập bóng tối đổ theo chiều X (ngang)
shadowOffsetY	? Xem ví dụ <canvas id="shadowOffsetY00" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("shadowOffsetY00"); var ctx=c.getContext("2d"); ctx.shadowBlur=10; ctx.shadowOffsetY=20; ctx.shadowColor="black"; ctx.fillStyle="#FAC8C8"; ctx.fillRect(20,20,100,80); </script> Xem Kết quả	Thiết lập bóng tối đổ theo chiều Y (dọc)
createLinearGradient ()	? Xem ví dụ <canvas id="createLinearGradient0" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("createLinearGradient0"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,170,0); my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(0.5,"#0C7D0C"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); </script> <canvas id="createLinearGradient01" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("createLinearGradient01"); var ctx=c.getContext("2d"); var my_gradient=ctx.createLinearGradient(0,0,0,170); my_gradient.addColorStop(0,"#017EAF"); my_gradient.addColorStop(1,"white"); ctx.fillStyle=my_gradient; ctx.fillRect(20,20,150,100); </script> Xem Kết quả	Tạo ra một sự chuyển sắc thái màu như: từ đậm đậm nhạt, từ tối đến sáng.
createPattern ()	? Xem ví dụ <img src="http://png-4.findicons.com/files/icons/1018/pixelicious/32/star.png" id="lamp00" width="32" height="32"><br/> Canvas:<br/> <button onclick="draw('repeat')">Repeat</button> <button onclick="draw('repeat-x')">Repeat-x</button> <button onclick="draw('repeat-y')">Repeat-y</button> <button onclick="draw('no-repeat')">No-repeat</button> <canvas id="createPattern00" width="300" height="150" style="border:1px solid #d3d3d3;"> <script> function draw(direction) { var c=document.getElementById("createPattern00"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,c.width,c.height); var img=document.getElementById("lamp00") var pat=ctx.createPattern(img,direction); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill(); } </script> Xem Kết quả Canvas:	Lặp đi lặp lại một yếu tố quy định theo hướng quy định
createRadialGradient ()	? Xem ví dụ <canvas id="createRadialGradient00" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("createRadialGradient00"); var ctx=c.getContext("2d"); var grd=ctx.createRadialGradient(75,50,1,90,60,70); grd.addColorStop(0,"#D78432"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,100) /* createRadialGradient (. x0, y0, r0, x1, y1, r1 ); x0 X-phối hợp của các vòng tròn bắt đầu của gradient y0 Toạ độ y của vòng tròn bắt đầu của gradient r0 Bán kính của vòng tròn bắt đầu x1 X-phối hợp của các vòng tròn kết thúc của gradient y1 Toạ độ y của vòng tròn kết thúc của gradient r1 Bán kính của vòng tròn kết thúc */ </script> Xem Kết quả	Sự chuyển màu từ tâm hình tròn
addColorStop ()	? Xem ví dụ <canvas id="addColorStop00" width="500" height="150" style="border:0px solid #ccc"></canvas> <script> var c=document.getElementById("addColorStop00"); var ctx=c.getContext("2d"); var grd=ctx.createLinearGradient(0,0,170,0); grd.addColorStop(0,"black"); grd.addColorStop("0.3","magenta"); grd.addColorStop("0.5","blue"); grd.addColorStop("0.6","green"); grd.addColorStop("0.8","yellow"); grd.addColorStop(1,"red"); ctx.fillStyle=grd; ctx.fillRect(20,20,150,100); </script> Xem Kết quả	Sự chuyển sắc thái màu tại nhiều vị trí
		Kiểu đường thẳng
lineCap	? Xem ví dụ <canvas id="lineCap00" width="500" height="150"></canvas> <script> var c=document.getElementById('lineCap00'); var ctx=c.getContext('2d'); ctx.lineWidth=10; ctx.lineCap='square'; ctx.moveTo(20,20); ctx.lineTo(100,100); ctx.stroke(); /*context.lineCap="butt|round|square"; (cạnh phẳng|nắp tròn| đầu vuông)*/ </script> Xem Kết quả	Phong cách của 2 đầu đoạn thẳng
lineJoin	? Xem ví dụ <canvas id="linejoin00" width="500" height="150"></canvas> <script> var c=document.getElementById("linejoin00"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.lineJoin="round"; ctx.moveTo(20,20); ctx.lineTo(100,50); ctx.lineTo(20,100); ctx.stroke(); /* context.lineJoin="bevel|round|miter"; (đầu vát|đầu tròn|đầu nhọn) */ </script> Xem Kết quả	Phong cách của đầu góc nhọn khi đoạn thẳng bị bẻ
linewidth	? Xem ví dụ <canvas id="linewidth00" width="500" height="150"></canvas> <script> var c=document.getElementById("linewidth00"); var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeRect(20,20,80,100); </script> Xem Kết quả	Thiết lập chiều rộng đường hiện tại
miterLimit	? Xem ví dụ <canvas id="miterLimit0" width="500" height="150"></canvas> <script> var c=document.getElementById("miterLimit0"); var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.lineJoin="miter"; ctx.miterLimit=5; ctx.moveTo(20,20); ctx.lineTo(50,27); ctx.lineTo(20,34); ctx.stroke(); </script> Xem Kết quả	Bộ hoặc trả về chiều dài mũ tối đa
		Hình chữ nhật
rect ()	? Xem ví dụ <canvas id="rect 0" width="500" height="150"></canvas> <script> var c=document.getElementById("rect 0"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); /* ( x, y, chiều rộng, chiều cao );*/ ctx.stroke(); </script> Xem Kết quả	Tạo ra một đường hình chữ nhật
fillRect ()	? Xem ví dụ <canvas id="fillRect0" width="500" height="150"></canvas> <script> var c=document.getElementById("fillRect0"); var ctx=c.getContext("2d"); ctx.fillRect(20,20,150,100); /* ( x, y, chiều rộng, chiều cao );*/ </script> Xem Kết quả	Tạo hình chữ nhật
strokeRect ()	? Xem ví dụ <canvas id="strokeRect0" width="500" height="150"></canvas> <script> var c=document.getElementById("strokeRect0"); var ctx=c.getContext("2d"); ctx.strokeRect(20,20,150,100);/* ( x, y, chiều rộng, chiều cao );*/ </script> Xem Kết quả	Vẽ một hình chữ nhật (không điền)
clearRect ()	? Xem ví dụ <canvas id="clearRect0" width="500" height="150"></canvas> <script> var c=document.getElementById("clearRect0"); var ctx=c.getContext("2d"); ctx.fillStyle="#75879F"; ctx.fillRect(0,0,300,150); ctx.clearRect(20,20,100,50); /* ( x, y, chiều rộng, chiều cao );*/ </script> Xem Kết quả	Một hình chữ nhật trống rỗng
		Đường dẫn
fill()	? Xem ví dụ <canvas id="fill" width="500" height="150"></canvas> <script> var c=document.getElementById("fill"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); ctx.fillStyle="#75879F"; ctx.fill(); </script> Xem Kết quả	phương pháp lấp đầy bản vẽ hiện hành. Màu mặc định là màu đen.
stroke()	? Xem ví dụ <canvas id="demo-stroke" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-stroke"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(20,100); ctx.lineTo(70,100); ctx.strokeStyle="red"; ctx.stroke(); </script> Xem Kết quả	Vẽ một con đường, có hình dạng nhất định theo tọa độ điểm
beginPath()	? Xem ví dụ <canvas id="demo-beginPath " width="500" height="150"></canvas> <script> var c=document.getElementById("demo-beginPath "); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineWidth="5"; ctx.strokeStyle="green"; // Green path ctx.moveTo(0,75); ctx.lineTo(250,75); ctx.stroke(); // Draw it ctx.beginPath(); ctx.strokeStyle="purple"; // Purple path ctx.moveTo(150,0); ctx.lineTo(10,130); ctx.stroke(); // Draw it </script> Xem Kết quả	Bắt đầu một con đường, hoặc thiết lập lại đường dẫn hiện tại
moveTo()	? Xem ví dụ <canvas id="demo-moveTo" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-moveTo"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); </script> Xem Kết quả	Di chuyển đường dẫn đến điểm quy định trong khung hình, mà không tạo ra một dòng
closePath ()	? Xem ví dụ <canvas id="demo-closePath" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-closePath"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(225,20); ctx.lineTo(20,100); ctx.lineTo(450,100); ctx.closePath(); ctx.stroke(); </script> Xem Kết quả	Tạo ra một con đường từ điểm hiện tại để trở lại điểm khởi đầu
lineTo ()	? Xem ví dụ <canvas id="demo-lineTo" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-lineTo"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(300,150); ctx.stroke(); </script> Xem Kết quả	Thêm một điểm mới và tạo ra một dòng từ thời điểm đó đến điểm chỉ định cuối cùng trong khung hình
clip()	? Xem ví dụ <canvas id="demo-clip" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-clip"); var ctx=c.getContext("2d"); // Clip a rectangular area ctx.rect(50,20,200,120); ctx.stroke(); ctx.clip(); // Draw red rectangle after clip() ctx.fillStyle="#75879F"; ctx.fillRect(0,0,150,100); </script> Xem Kết quả	Chọn một vùng bất kỳ hình dạng và kích thước từ hình ban đầu
quadraticCurveTo ()	? Xem ví dụ <canvas id="demo-quadraticCurveTo" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-quadraticCurveTo"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,120); ctx.quadraticCurveTo(100,-20,200,20); ctx.stroke(); </script> /* quadraticCurveTo (a, b, x, y ); a,b là tọa độ điểm kéo, x,y là tọa độ điểm kết thúc*/ Xem Kết quả	Tạo ra một đường cong Bézier bậc hai
bezierCurveTo ()	? Xem ví dụ <canvas id="demo-bezierCurveTo" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-bezierCurveTo"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,120); ctx.bezierCurveTo(20,10,200,100,200,20); ctx.stroke(); </script> Xem Kết quả	Tạo ra một đường cong Bézier khối
arc()	? Xem ví dụ <canvas id="demo-arc1" width="500" height="150"></canvas> <canvas id="demo-arc2" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-arc1"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); var c=document.getElementById('demo-arc2'); var ctx=c.getContext('2d'); ctx.beginPath(); ctx.arc(100,75,50,0*Math.PI,1.5*Math.PI,false); ctx.stroke(); /* arc(x,y,r,sAngle,eAngle,true|false) x,y Toạ độ của trung tâm của vòng tròn r Bán kính của vòng tròn sAngle Góc bắt đầu, trong radian (0 là ở vị trí 3 giờ của vòng tròn) eAngle Góc kết thúc, trong radian true: ngược chiều kim đồng Tùy chọn. false: chiều kim đồng hồ */ </script> Xem Kết quả	Tạo ra một vòng cung / đường cong (được sử dụng để tạo ra hình tròn, hoặc các bộ phận của vòng tròn)
arcTo ()	? Xem ví dụ <canvas id="demo-arcTo" width="200" height="150"></canvas> <script> var c=document.getElementById("demo-arcTo"); var ctx=c.getContext("2d"); ctx.moveTo (20,20); // Tạo một điểm khởi đầu ctx.lineTo (100,20); // Tạo một đường ngang ctx.arcTo (150,20,150,70,50); // Tạo một vòng cung ctx.lineTo (150,120); // Tiếp tục với đường thẳng đứng ctx.stroke (); // Vẽ nó /* arcTo ( x1, y1, x2, y2, r ); x1,y1 tọa độ của đầu của vòng cung x2,y2 tọa độ cuối của vòng cung r Bán kính của vòng cung */ </script> Xem Kết quả	Tạo ra một vòng cung / đường cong giữa hai tiếp tuyến
isPointInPath ()	? Xem ví dụ <canvas id="demo-isPointInPath" width="200" height="150"></canvas> <script> var c=document.getElementById("demo-isPointInPath"); var ctx=c.getContext("2d"); ctx.rect(20,20,150,100); if (ctx.isPointInPath(20,50)) { ctx.stroke(); }; /* isPointInPath (x, y ); x,y Toạ độ y để kiểm tra */ </script> Xem Kết quả	Trả về true nếu ttoaj độ điểm kiểm tra có trong con đường hiện tại
		Biến đổi
font	? Xem ví dụ <canvas id="demo-font" width="200" height="150"></canvas> <script> var c=document.getElementById("demo-font"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; ctx.fillText("chào bạn",10,50); /* font="italic small-caps bold 12px arial"; ~> "font-style font-variant font-weight font-size font-family" */ </script> Xem Kết quả	Thiết lập các thuộc tính font hiện tại cho nội dung văn bản
textAlign	? Xem ví dụ <canvas id="demo-textAlign" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-textAlign"); var ctx=c.getContext("2d"); ctx.strokeStyle="#013874"; ctx.moveTo(150,20); ctx.lineTo(150,170); ctx.stroke(); ctx.font="20px Arial"; // Show the different textAlign values ctx.textAlign="start"; ctx.fillText("textAlign=start",150,60); ctx.textAlign="end"; ctx.fillText("textAlign=end",150,80); ctx.textAlign="left"; ctx.fillText("textAlign=left",150,100); ctx.textAlign="center"; ctx.fillText("textAlign=center",150,120); ctx.textAlign="right"; ctx.fillText("textAlign=right",150,140); /* textAlign="center|end|left|right|start"; */ </script> Xem Kết quả	Thiết lập chiều văng bản theo phương dọc
textBaseline	? Xem ví dụ <canvas id="demo-textBaseline" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-textBaseline"); var ctx=c.getContext("2d"); //Draw a #013874 line at y=100 ctx.strokeStyle="#013874"; ctx.moveTo(5,100); ctx.lineTo(395,100); ctx.stroke(); ctx.font="20px Arial" //Place each word at y=100 with different textBaseline values ctx.textBaseline="top"; ctx.fillText("Top",5,100); ctx.textBaseline="bottom"; ctx.fillText("Bottom",50,100); ctx.textBaseline="middle"; ctx.fillText("Middle",120,100); ctx.textBaseline="alphabetic"; ctx.fillText("Alphabetic",190,100); ctx.textBaseline="hanging"; ctx.fillText("Hanging",290,100); /* textBaseline="alphabetic|top|hanging|middle|ideographic|bottom" */ </script> Xem Kết quả	Thiết lập chiều văng bản theo phương ngang
fillText ()	? Xem ví dụ <canvas id="demo-fillText" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-fillText"); var ctx=c.getContext("2d"); ctx.font="20px Georgia"; ctx.fillText("Chào bạn!",10,50); ctx.font="30px Verdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.fillStyle=gradient; ctx.fillText("Bạn thấy tôi thế nào ?",10,90); /* fillText(text,x,y,maxWidth); ~>( "văn bản", tọa độ x, tọa độ y, chiều rộng tối đa) */ </script> Xem Kết quả	Thiết lập phần thân chữ
strokeText ()	? Xem ví dụ <canvas id="demo-strokeText" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-strokeText"); var ctx=c.getContext("2d"); ctx.font="30px Georgia"; ctx.strokeText("w3schools!",10,50); ctx.font="40px Verdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.strokeText("Là thầy vĩ đại của tôi!",10,90); /* strokeText(text,x,y,maxWidth); ~>( "văn bản", tọa độ x, tọa độ y, chiều rộng tối đa) */ </script> Xem Kết quả	Thiết lập phần đường viền chữ
measureText ()	? Xem ví dụ <canvas id="demo-measureText" width="550" height="150"></canvas> <script> var c=document.getElementById("demo-measureText"); var ctx=c.getContext("2d"); ctx.font="30px Arial"; var txt="web.bendoi.vn: Tổng hợp và chia sẽ!" ctx.fillText("Dòng chữ dưới có chiều rộng là: "+ ctx.measureText(txt).width+" px ",10,50) ctx.fillText(txt,10,100); /* measureText(text).width; */ </script> Xem Kết quả	Đếm chiều rộng của các văn bản
		Vẽ hình ảnh
drawImage ()	? Xem ví dụ <img id="screamx" src="http://bit.ly/bendoi001" width="200"/> <canvas id="demo-drawImage " width="550" height="150"></canvas> <script> var c=document.getElementById("demo-drawImage "); var ctx=c.getContext("2d"); var img=document.getElementById("screamx"); ctx.drawImage(img,10,10); /* - Định vị hình ảnh: drawImage (. img, x, y ); - Định vị hình ảnh, và xác định chiều rộng và chiều cao của hình ảnh: drawImage (. img, x, y, width, height ); - Cắt hình ảnh và vị trí của các phần cắt: drawImage (. img, sx, sy, swidth, sheight, x, y, width, height ); + img: Quy định cụ thể các hình ảnh, bản vẽ, hoặc thành phần video để sử dụng + sx,sy: Tọa độ bắt đầu cắt + swidth,sheight: Chiều rộng,cao hình ảnh cắt bớt + x,y: Tọa độ nơi để đặt các hình ảnh trên bản vẽ + width,height: Chiều rộng,Chiều cao của hình ảnh để sử dụng (kéo dài hoặc làm giảm hình ảnh) */ </script> Xem Kết quả	Rút ra một hình ảnh, bản vẽ, hoặc video lên tấm bạt
Pixel Manipulation		thao tác với Điểm ảnh
width	? Xem ví dụ <canvas id="demo-width" width="550" height="150"></canvas><br/> <script> var c=document.getElementById("demo-width"); var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,100); document.write("Chiều rộng của hình này là: " + imgData.width+"px"); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=200; imgData.data[i+2]=120; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); </script> Xem Kết quả	Trả về chiều rộng của một đối tượng imageData
height	? Xem ví dụ <canvas id="demo-height" width="550" height="150"></canvas><br/> <script> var c=document.getElementById("demo-height"); var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,70); document.write("Chiều cao của hình này là: " + imgData.height+"px"); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=255; imgData.data[i+1]=200; imgData.data[i+2]=120; imgData.data[i+3]=255; } ctx.putImageData(imgData,10,10); </script> Xem Kết quả	Chiều cao đối tượng
data	? Xem ví dụ <canvas id="demo-data" width="550" height="150"></canvas> <script> var c=document.getElementById("demo-data"); var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,100); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=215; imgData.data[i+1]=212; imgData.data[i+2]=240; imgData.data[i+3]=200; } ctx.putImageData(imgData,10,10); /* Đây là các thông số định dạng màu dạng RGBA: R - Màu đỏ (0-255) G - Các màu xanh lá cây (0-255) B - Màu xanh (0-255) A - kênh alpha (0-255; 0 là trong suốt và 255 là hoàn toàn có thể nhìn thấy) Bạn có thể tham khảo các màu này tại hầu hết phần mềm xử lý đồ họa, đọc mầu, chọn màu online */ </script> Xem Kết quả	Trả về một đối tượng có chứa dữ liệu hình ảnh của một đối tượng imageData quy định
createImageData ()	? Xem ví dụ <canvas id="demo-createImageData" width="550" height="150"></canvas> <script> var c=document.getElementById("demo-createImageData"); var ctx=c.getContext("2d"); var imgData=ctx.createImageData(100,100); for (var i=0;i<imgData.data.length;i+=4) { imgData.data[i+0]=215; imgData.data[i+1]=212; imgData.data[i+2]=240; imgData.data[i+3]=200; } ctx.putImageData(imgData,10,10); /* Có hai phiên bản của phương pháp createImageData (): 1. tạo ra một đối tượng imageData mới với kích thước quy định (tính bằng điểm): Cú pháp JavaScript: createImageData (chiều rộng, chiều cao ); 2. tạo ra một đối tượng imageData mới với kích thước tương tự như các đối tượng theo quy định của anotherImageData (điều này không sao chép các dữ liệu hình ảnh): Cú pháp JavaScript: createImageData (đối tượng imageData) */ </script> Xem Kết quả	Tạo ra một hình mới, trống đối tượng imageData
getImageData ()	? Xem ví dụ <canvas id="demo-getImageData" width="150" height="150"></canvas> <script> var c=document.getElementById("demo-getImageData"); var ctx=c.getContext("2d"); ctx.fillStyle="#D7D4F0"; ctx.fillRect(10,10,50,50); function copygetImageData() { var imgData=ctx.getImageData(10,10,50,50); ctx.putImageData(imgData,10,70); } /* getImageData (x, y, chiều rộng, chiều cao ); */ </script> <button onclick="copygetImageData()">Copy</button> Xem Kết quả	Tạo bản sao dữ liệu pixel cho hình hoặc có thể đổi màu
putImageData ()	? Xem ví dụ <canvas id="demo-putImageData" width="150" height="150"></canvas> <script> var c=document.getElementById("demo-putImageData"); var ctx=c.getContext("2d"); ctx.fillStyle="#A2BF14"; ctx.fillRect(10,10,50,50); function copy() { var imgData=ctx.getImageData(10,10,50,50); ctx.putImageData(imgData,10,70); } /* putImageData (imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight ); - imgData: Quy định cụ thể đối tượng imageData để đưa trở vào - x,y: Toạ độ trong điểm ảnh, góc trên bên trái của đối tượng imageData - dirtyX, dirtyY: giá trị chiều ngang, dọc, trong pixel, nơi để đặt các hình - dirtyWidth, dirtyHeight: Chiều rộng, Chiều cao để sử dụng vẽ các hình ảnh */ </script> <button onclick="copy()">Copy</button> Xem Kết quả	Phương pháp putImageData () đặt các dữ liệu hình ảnh (từ một đối tượng imageData nào đó) trở lại vào vùng bản vẽ.
Compositing
globalAlpha	? Xem ví dụ <canvas id="demo-globalAlpha" width="150" height="150"></canvas> <script> var c=document.getElementById("demo-globalAlpha"); var ctx=c.getContext("2d"); ctx.fillStyle="#5D8EDA"; ctx.fillRect(20,20,75,50); // Turn transparency on ctx.globalAlpha=0.2; ctx.fillStyle="blue"; ctx.fillRect(50,50,75,50); ctx.fillStyle="green"; ctx.fillRect(80,80,75,50); /* globalAlpha = number ; (từ 0.0 đến 1.0) */ </script> Xem Kết quả	Thiết lập độ trong suốt cho bản vẽ
globalCompositeOperation	? Xem ví dụ <canvas id="demo-globalCompositeOperation" width="500" height="150"></canvas> <script> var c=document.getElementById("demo-globalCompositeOperation"); var ctx=c.getContext("2d"); ctx.fillStyle="red"; ctx.fillRect(20,20,75,50); ctx.fillStyle="blue"; ctx.globalCompositeOperation="source-over"; ctx.fillRect(50,50,75,50); ctx.fillStyle="red"; ctx.fillRect(150,20,75,50); ctx.fillStyle="blue"; ctx.globalCompositeOperation="destination-over"; ctx.fillRect(180,50,75,50); </script> Xem Kết quả Tham khảo thêm các kiểu globalCompositeOperation khác:	Các kiểu cắt ghép hình
Other
save()	? Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
restore()	? Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
createEvent()	? Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
getContext()	? Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi
toDataURL()	? Đang trong giai đoạn nghiên cứu, chưa được ứng dụng rộng rãi

Phần dịch tiếng Việt chỉ mang tính chất tương đối và chưa chính xác, mong các bạn thông cảm và vui long comment để kiến thức hoàn thiện hơn. Cám ơn!

---

Xem tất cả thuộc tính của CSS
Thư góp ý

Thanks: ... | w3.org | w3schools .com
( 2013-04-08 14:44)

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ả	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ả	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ả	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