abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单事件和函数的小案例</title> </head> <script> function style_bg(a){ a.style.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单事件和函数的小案例</title> </head> <script> function style_bg(a){ a.style.background="gray"; } function style_bg2(a){ a.style.background="white"; } function style_bg3(a){ a.style.background="pink"; } function submitFun(){ var a="是否确认提交?"; confirm(a); } function style_border(b){ b.style.borderRadius="50px"; } </script> <body> <form action="" onsubmit="submitFun()"> <p>元素获得焦点和失去焦点<input type="text" onfocus="style_bg(this)" onblur="style_bg2(this)"></p> <p>按下键盘再松开<input type="text" onkeydown="style_bg(this)" onkeyup="style_bg2(this)"></p> <p><input type="text" onchange="style_bg3(this)" value="改变域"></p> <input type="submit"> <div style="clear:both;"></div> <div onclick="style_border(this);style_bg3(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标单击</div> <div ondblclick="style_bg(this)" style="width: 100px;height: 100px;border:1px solid gray;float: left;">鼠标双击</div> <div onmousedown="style_bg(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标按下</div> <div onmousemove="style_bg(this)" onmouseout="style_bg2(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标移到这里再移开 </div> <div onmouseover="style_bg(this)" onmouseout="style_bg2(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标移到元素上</div> <div onmouseup="style_bg3(this)" style="width: 100px;height: 100px;border:1px solid gray; float: left;">鼠标按键松开</div> </form> </body> </html>
Correcting teacher:天蓬老师Correction time:2018-12-23 13:32:59
Teacher's summary:代码的可读性很重要。函数最好加上必要的注释,让人一看就知道这个函数的做什么