<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body id="txt16"><input type="text" value="" id="txt1"><input type="button" value="点击" id="btn1"><br><br><input type="text" value="" id="txt2"><input type="button" value="双击" id="btn2"><br><br><input type="text" value="" id="txt3"><input type="button" value="按下" id="btn3"><br><br><input type="text" value="" id="txt4"><input type="button" value="抬起" id="btn4"><br><br><input type="text" value="" id="txt5"><input type="button" value="进入" id="btn5"><br><br><input type="text" value="" id="txt6"><input type="button" value="离开" id="btn6"><br><br><input type="text" value="" id="txt7"><input type="button" value="移动" id="btn7"><br><br><!--<input type="text" value="" id="txt8">--><h2>键盘控制：</h2><input type="text" name="" class="text" id="div7" placeholder="按下" STYLE="background-color: red;width: 100px;height: 50px;"><br><br><input type="text" name="" class="text" id="div8" placeholder="抬起" STYLE="background-color: red;width: 100px;height: 50px;"><br><br><input type="text" name="" class="text" id="div9" placeholder="抬起" STYLE="background-color: red;width: 100px;height: 50px;"><h2>表单控件：</h2><form action=""> <input type="text" placeholder="失去焦点" value="" id="txt10" > <br> <br> <input type="text" placeholder="获取焦点" value="" id="txt11"> <br> <br> <input type="text" placeholder="输入时，看控制台" value="" id="txt12"> <br> <br> <input type="text" value="改变时看控制台" id="txt13"> <br> <br> <input type="reset" value="重置时看控制台" id="txt14"> <br> <br> <input type="submit" value="提交时看控制台" id="txt15"></form></body><script> var oTxt1=document.getElementById("txt1") var oBtn1=document.getElementById("btn1") oBtn1.onclick=function () { oTxt1.value="点击一下" console.log("点击一下") } var oTxt2=document.getElementById("txt2") var oBtn2=document.getElementById("btn2") oBtn2.ondblclick = function (){ oTxt2.value="双击一下" console.log("双击一下") } var oTxt3=document.getElementById("txt3") var oBtn3=document.getElementById("btn3") oBtn3.onmousedown = function (){ oTxt3.value="按下" console.log("按下") } var oTxt4=document.getElementById("txt4") var oBtn4=document.getElementById("btn4") oBtn4.onmouseup = function (){ oTxt4.value="抬起" console.log("抬起") } var oTxt5=document.getElementById("txt5") var oBtn5=document.getElementById("btn5") oBtn5.onmouseover = function (){ oTxt5.value="进入" console.log("进入") } var oTxt6=document.getElementById("txt6") var oBtn6=document.getElementById("btn6") oBtn6.onmouseout = function (){ oTxt6.value="离开" console.log("离开") } var oTxt7=document.getElementById("txt7") var oBtn7=document.getElementById("btn7") oBtn7.onmousemove = function (){ oTxt7.value="移动" console.log("移动") }// var oTxt8=document.getElementById("txt8")// var oBtn8=document.getElementById("btn7")// oBtn8.onkeydown = function(){// console.log("按下后触发效果")// }// div7.onkeydown = function(){// console.log("按下后触发效果")// } var div7 = document.getElementById("div7") div7.onkeydown = function(){ div7.value="按下后触发效果" console.log("按下后触发效果") } var div8=document.getElementById("div8") div8.onkeyup=function () { console.log("抬起后触发效果") div8.value="抬起后触发效果" } var div9 = document.getElementById("div9") div9.onkeypress=function () { console.log("按下并抬起触发效果") div9.value="按下并抬起触发效果" } var oTxt10=document.getElementById("txt10") oTxt10.onblur=function () { console.log("失去焦点") oTxt10.value="失去焦点" } var oTxt11=document.getElementById("txt11") oTxt11.onfocus=function () { console.log("获取焦点") oTxt11.value="获取焦点" } var oTxt12=document.getElementById("txt12") oTxt12.oninput=function () { console.log("正在输入中")// oTxt12.value="获取焦点" } var oTxt13=document.getElementById("txt13") oTxt13.onchange=function () { console.log("正在修改")// oTxt12.value="获取焦点" } var oTxt14=document.getElementById("txt14") oTxt14.onreset=function () { console.log("重置成功") oTxt12.value="获取焦点" } var oTxt15=document.getElementById("txt15") oTxt15.onsubmit=function () { console.log("提交成功") oTxt12.value="获取焦点" } var load=document.getElementById("txt16") load.onload=function () { console.log("页面加载完成") }// var scroll=document.write("txt16")// scroll.onscroll=function () {// console.log("页面正在滚动")// }未做出来// var resize=document.write("txt16")// resize.onresize=function () {// console.log("页面正在缩小")// }未做出来</script></html>
来源：https://www.cnblogs.com/hy96/p/11375250.html