事件监听

• 事件：HTML事件是发生在HTML元素上的“事情”。比如：
  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键
• 事件监听：JavaScript可以在事件被侦测到时执行代码

事件绑定

• 方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick='on()'>
<script>
function on(){
  alert("我被点击了");
}
</script>

• 方式二：通过DOM元素属性绑定

<input type="button" id="btn">
<script>
  document.getElementById("btn").onclick = function(){
    alert("我被点击了");
  }
</script>

常见事件

案例：表单验证

1. 当输入框失去焦点时，验证输入内容是否符合要求
   1. 获取表单输入框
   2. 绑定onblur事件
   3. 获取输入内容
   4. 判断是否符合规则
   5. 如果不符合规则，则显示错误信息
2. 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合则阻止表单提交。
   1. 获取表单对象
   2. 为表单对象绑定onsubmit事件
   3. 判断所有输入框是否都符合要求，如果符合，则返回true，如果有一项不符合，则返回false