DOM事件模型（DOM Event Model）

事件是可以被 JavaScript 侦测到的行为，例如鼠标点击、键盘按键等。js与html的交互就是通过事件来进行的。

事件驱动

                        事件驱动
─────────────────────────────────────────────────────────────

   ┌──────────┐       ┌──────────┐       ┌──────────┐
   │          │       │          │       │          │
   │  Source  │ ───── │  Event   │ ───── │  Handle  │
   │          │       │          │       │          │
   └──────────┘       └──────────┘       └──────────┘
      事件源               事件            事件处理程序   

     element      .     onclick      =    function(){}
     window       .     onload       =    function(){}

─────────────────────────────────────────────────────────────

事件集合

鼠标事件

事件	描述
onclick	点击
ondblclick	双击
onmousedown	按下
onmouseup	抬起
onmousemove	移动
onmouseover	移入
onmouseout	移出
onmouseenter	鼠标指针移动到元素上时触发(不支持冒泡)
onmouseleave	鼠标指针移出元素上时触发(不支持冒泡)
oncontextmenu	右键

键盘事件

事件	描述
onkeydown	按下
onkeyup	抬起
onkeypress	按下(只能触发数字字母符号)

表单事件

事件	描述
onfocus	获得焦点
onblur	失去焦点
onchange	失去焦点并内容改变
onsubmit	提交事件（form标签事件）
onreset	重置事件（form标签事件）
oninput	表单输入

其他事件

事件	描述
onscroll	滚动条事件(滚动条位置改变)
onwheel	鼠标滚轮事件
onresize	页面尺寸改变
onload	页面加载完成之后执行该事件
DOMContentLoaded	页面结构加载完成执行该事件

绑定事件的方式

标签绑定事件

<button onclick="click_fn()">click</button>
<script>
  function click_fn(){
    console.log(this);
  }
</script>

Document对象来绑定事件

注意：重复监听某一事件，后者会覆盖前者，而不会两者先后触发

<button>click</button>
<script>
    var button1 = document.querySelector('button')
    button1.onclick=function(){
        console.log("第一个点击事件的方法");
    }
    var button2 = document.querySelector('button')
    button2.onclick=function(){
        console.log("第二个点击事件的方法");
    }      //第二个点击事件的方法会覆盖第一个方法,所以点击只会触发第二次的点击事件方法     
</script>