效果图

代码

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