abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,&
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body onload="myonload()"> <!-- HTML 事件觸發(fā)瀏覽器中的動(dòng)作(action),比如當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng) 一段 JavaScript代碼。下面是一個(gè)屬性列表,這些屬性可插入 HTML 標(biāo)簽來定義事件動(dòng)作 屬性 描述 onfocus 元素獲得焦點(diǎn)。 onblur 元素失去焦點(diǎn)。 onchange 域的內(nèi)容被改變。 onclick 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 ondblclick 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 onkeydown 某個(gè)鍵盤按鍵被按下。 onkeyup 某個(gè)鍵盤按鍵被松開。 onkeypress 某個(gè)鍵盤按鍵被按下并松開。 onload 一張頁(yè)面或一幅圖像完成加載。 onmousedown 鼠標(biāo)按鈕被按下。 onmouseup 鼠標(biāo)按鍵被松開 onmousemove 鼠標(biāo)被移動(dòng)。 onmouseout 鼠標(biāo)從某元素移開。 onmouseover 鼠標(biāo)移到某元素之上。 onsubmit 確認(rèn)按鈕被點(diǎn)擊。 --> <script type="text/javascript"> function myonfocus(x){ x.style.background='pink' } function myonblur(x){ x.style.background='#bd226c' } function myonchange(x){ x.value = "內(nèi)容被改變"; } function myonclick(x){ // x.style.background='red' x.style.borderRadius="50px" } function myondblclick(x){ x.style.borderRadius="0px" } function myonkeydown(){ alert("你在輸入欄內(nèi)按下一個(gè)鍵"); } function myonkeyup(x){ ss=parseFloat(x.value) x.value=ss+ss } function myonkeypress(x){ alert("你在輸入欄內(nèi)按下一個(gè)鍵"); } function myonload(){ alert("歡迎進(jìn)入"); } function myonmousedown(x){ x.style.color='#d93c87' } function myonmouseup(x){ x.style.color='#2dd064' } function myonmousemove(x){ x.style.width='300px' x.style.height='200px' } function myonmouseout(x){ x.style.width='400px' x.style.height='300px' } function myonsubmit(){ confirm("請(qǐng)確認(rèn)輸入的內(nèi)容無誤") } </script> <!-- onfocus 元素獲得焦點(diǎn)。 --> 獲得焦點(diǎn):<input type="text" name="" value="" onmouseover="myonfocus(this)"> <br> <br> <!-- onblur 元素失去焦點(diǎn)。 --> 失去焦點(diǎn):<input type="text" name="" value="" onblur="myonblur(this)"> <br> <br> <!-- onchange 內(nèi)容被改變。 --> 內(nèi)容被改變:<input type="text" name="" value="內(nèi)容被改變" onchange="myonchange(this)"> <br> <br> <!-- onclick 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 --> <div style="width:100px;height:100px;border:5px solid #ccc" onclick="myonclick(this)"></div> <br> <br> <!-- ondblclick 當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。 --> <div style="width:100px;height:100px;border:5px solid #ccc;border-radius:50px;" ondblclick="myondblclick(this)"></div> <br> <br> <!-- onkeydown 某個(gè)鍵盤按鍵被按下。 --> 輸入框內(nèi)摁下一個(gè)鍵:<input type="text" name="" value="" onkeydown="myonkeydown()"> <br> <br> <!-- onkeyup 某個(gè)鍵盤按鍵被松開。 --> 輸入框內(nèi)的數(shù)字相加:<input type="text" name="" value="" onkeyup="myonkeyup(this)"> <br> <br> <!-- onkeypress 某個(gè)鍵盤按鍵被按下并松開。 --> 按下松開按鍵:<input type="text" name="" value="" onkeypress="myonkeypress(this)"> <br> <br> <!-- onmousedown 鼠標(biāo)按鈕被按下。 onmouseup 鼠標(biāo)按鍵被松開 --> <p onmousedown="myonmousedown(this)" onmouseup="myonmouseup(this)"> 鼠標(biāo)點(diǎn)擊文字不動(dòng)變色,松開在變色 </p> <br> <br> <!-- onmousemove 鼠標(biāo)被移動(dòng)。 onmousemove 鼠標(biāo)被移動(dòng)。 --> <img src="http://img.qqzhi.com/upload/img_2_1929899833D298185223_11.jpg" alt="" onmousemove="myonmousemove(this)" onmouseout="myonmouseout(this)"> <br> <br> <!-- onsubmit 確認(rèn)按鈕被點(diǎn)擊。 --> --> <form action="#" onsubmit="myonsubmit()"> 名字:<input type="text" name="lname"><br> <input type="submit" value="提交"> </body> </html>
通過js的事件可以實(shí)現(xiàn)很多網(wǎng)頁(yè)特效,比如進(jìn)入頁(yè)面彈窗,輸入內(nèi)容自動(dòng)計(jì)算字?jǐn)?shù)等等。
Correcting teacher:查無此人Correction time:2019-01-12 09:09:31
Teacher's summary:作業(yè)完成的不錯(cuò),作業(yè)名好像反了。 js還能實(shí)現(xiàn)很多功能,之后你就慢慢懂了。一些常用的方法,可以多練習(xí)幾遍,記下來。加油。