事件详解

一、事件基础

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

1、事件驱动

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

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

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

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

2、事件集合

（1）鼠标事件

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

（2）键盘事件

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

（3）表单事件

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

（4）其他事件

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

二、事件高级

1、绑定事件的方式

（1）标签绑定事件

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

（2）Document对象来绑定事件

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

注意：后面的事件会覆盖前面的事件，而不会两者前后触发

2、事件监听

为一个事件添加多个事件处理程序，解决了上面两种方法不能添加多个方法 更精细的控制事件监听器的触发阶段

（1）绑定事件

语法：

element.addEventListener(event,callback,bool);

参数	类型	描述
event	string	表示事件类型的字符串 如：“click” “mouseover” 事件名称不添加on前缀
callback	function	表示事件处理程序，函数中的this 指向添加监听的对象
bool	boolean	可选，true表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调用。后面会有事件流的详细解释

标签.addEventListener("事件名称",function(){
   },false);    //兼容到IE9及其以上
标签.attachEvent("事件名称",function(){
   })    //  ie8及以下

（2）移除事件绑定

语法：

element.removeEventListener(event,callback,bool);

<button id="btn"></button>
<script type="text/javascript">
  var btn=document.getElementById('btn');
  function handle(){
    
    console.log(this);
  }
  //兼容到IE9及其以上
  btn.addEventListener('click',handle,false);      //添加事件处理程序
  btn.removeEventListener('click',handle,false);    //移除事件处理程序

  //  ie8及以下
  btn.attachEvent('onclick',handle);       // 添加
  btn.de