效果图
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>信息填写页面</title><link rel="stylesheet" type="text/css" href="css\styles.css"><style></style>
</head><!--当 body 部分加载完毕 会自动触发 onload 事件 onload 事件绑定了 load 函数-->
<body onload="load()"><!--创建两个按钮标签 为两个按钮绑定事件--><!--用事件绑定函数--><input type="button" id="button1" value="事件绑定1" onclick="on()"><!--直接获取按钮对象 通过属性为其绑定函数--><input type="button" id="button2" value="事件绑定2"><!--创建输入框对象--><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><!--创建表格--><table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr align="center"><td>003</td><td>王五</td><td>93</td><td>优秀</td></tr><tr align="center"><td>004</td><td>朱六</td><td>82</td><td>良好</td></tr><tr align="center"><td>005</td><td>刘七</td><td>48</td><td>合格</td></tr></table><!--创建表单对象--><form action="" style="text-align: center;" onsubmit="subfn()"><input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()"><input id="button1" type="submit" value="提交"><input id="button2" type="button" value="单击事件" onclick="fn1()"></form><input type="button" id="button3" value="事件绑定2">
</body>
<script>
var over_count=0;
var out_count=0;
function on(){alert("不要点按钮 1");
}
document.getElementById('button2').onclick=function(){alert("不要点按钮 2");
}//页面加载完毕触发 onload
function load(){console.log("页面加载完成");
}//点击事件 onclick
function fn1(){console.log("我被点击了");
}//失去焦点事件 onblur
function bfn(){console.log("失去焦点事件")
}//获取焦点事件 onfocus
function ffn(){console.log("获得焦点事件")
}//键盘某个键被按下 onkeydown
function kfn(){console.log("键盘被按下了");
}//鼠标悬停在元素上 onmouseover
function over(){over_count++;console.log("第"+over_count+"次,鼠标移入了");
}//鼠标离开元素 onmouseout
function out(){out_count++;console.log("第"+out_count+"次,鼠标移出了");
}//提交表单
function subfn(){//表单一提交是提交到当前界面 提交完毕这个后页面会重新加载 所以不建议提交日志alert("表单被提交了");
}//创建了一个不能关掉弹窗的按钮 用死循环实现
document.getElementById("button3").addEventListener("click", function() {while(true){alert("这个弹窗是关不掉的");}});
</script>
</html>
