HTML event

大纲

1. 事件概述
2. 非IE浏览器中的[事件绑定]
3. IE浏览器中的[事件绑定]
4. 解决浏览器中关于[事件绑定]兼容性问题
5. 鼠标事件
6. 文档事件

事件概述

事件

是可以被js检测到的行为，实质上是一种交互操作。
例如：我们可以给某按钮添加一个[onClick点击事件]，当用户对按钮发生点击时来触发某个函数。

事件的作用：

1. 各个元素之间可以借助事件来进行交互
2. 用户和页面之间也可以通过事件来交互
3. 后端和页面之间也可以通过事件来交互（减缓服务器的压力）

事件通常与函数配合使用，当事件发生时函数才会执行。

事件传递

js中规定：事件不仅能够和触发者交互，还会在特定的情况下沿着dom tree逐级传递，和dom tree中的各个节点进行交互。而js中的这种机制被称为事件传递机制。
事件传递方式主要分两种：事件冒泡、事件捕获

事件冒泡：事件从最具体的元素开始，沿着DOM树逐级向上依次触发，直至最不具体的元素停止。
事件捕获：事件从最不具体的元素开始，沿着DOM树逐级向下依次触发，直至达到最具体的元素停止。
w3c规定：事件冒泡+事件捕获+事件真正的触发者等各个分支构成了js的事件机制。

如没有特殊情况，均采用事件冒泡。

非IE浏览器中的[事件绑定]

HTML事件

绑定操作发生在HTML代码中的事件，称为HTML事件。
语法：on+事件=‘函数();函数();函数();…’;
例如：

<div class="div1" onclick="test1();test2()">
    <div class="div2" onclick="test2()"></div>
</div>
<script>
    function test1(){
     
        console.log("test1");
    }
    function test2(){
     
        console.log("test2");
    }
</script>

HTML事件采用冒泡机制来处理事件。即点击d2时会先执行d2的绑定事件(即执行test2函数)。然后采用事件冒泡将事件传递给上一级DOM节点d1，然后d1执行自己的绑定事件。
函数执行的顺序按照绑定事件时函数的顺序为准。

HTML事件的移除方式：
元素.setAttribute(‘on+事件名’,null);
例如：

div1.setAttribute('onclick',null);

HTML事件缺陷：耦合性太强了，修改一处另一处也要修改。当函数没有加载成功时，用户去触发事件，则会报错。

DOM0事件

在js脚本中，直接通过[on+事件名]方式绑定的事件称为是DOM0级事件。
语法：元素.on+事件名=function(){需要执行的语句;}

var div1 = document.querySelector('.div1');
div1.onclick=function (){
   
  console.log('div1被点击了！');
}

以冒泡机制来处理事件，不存在兼容的问题

DOM0级事件的移除方式：
元素.on+事件名=null；

div1.onclick=null;

缺陷
一次只能绑定一个触发函数。如果同时绑定多个触发函数，则以最后一个为准。

div1.onclick=function (){
   
          console.log('div1被点击了！');
          div1.onclick=null;
      }//不生效
      div1.onclick=function (){
   
          console.log('div1被点击了第2次！');
      }

DOM2级事件

在js脚本中，通过addEventListener函数绑定的事件称为是DOM2级事件。
语法：元素.addEventListener(type,listener,useCapture)
type:事件类型。[没有on!]
listener:监听函数，绑定的函数
useCapture:是否使用捕获机制。如果不写，默认值为false
false:冒泡机制
true:捕获机制
注意：DOM2级事件可以绑定多个函数，执行顺序按照函数书写的顺序。

div1.addEventListener('click',function (){
   console.log('div1被点击了')},true);

DOM2级事件的移除方式：
node.removeEventListener(type,外部函数名，useCapture);

var fun = function (){
   
          console.log('div1被点击了')
          div1.removeEventListener('click',fun,true);
      };
      div1.addEventListener('click',fun,true);

DOM2级事件中如果绑定函数为[匿名函数]则无法删除。能够删除的只能是外部函数。
第三个参数默认可不写，默认是false。但是如果删除的是捕获事件，则必须写true才可以。

IE浏览器中的[事件绑定]

1. HTML事件处理程序：等同于非IE
2. DOM0级事件：等同于非IE
3. DOM2级事件：
   在js脚本中，通过attachEvent函数绑定事件
   语法：元素.attachEvent(type,listener)
   type:事件类型。[有on]
   listener:监听函数，绑定的函数

如果绑定多个函数，按照函数书写的倒序执行。

IE下DOM2级事件的移除方式：
元素.detachEvent(type,listener);

匿名函数无法被移除。

解决浏览器中关于[事件绑定]兼容性问题

由于[IE浏览器中的事件绑定]和[非IE浏览器中的事件绑定]方式方法都有所不同。所以单一的某种函数都不能完美解决不同浏览器下的方法绑定问题。

绑定事件时：
如果能用addEventListener方法绑定的，就采用本方法
否则采用attachEvent方法绑定。
解绑事件时：
如果能用addEventListener方法绑定的，就采用removeEventListener方法解绑
否则采用detachEvent方法绑定。

var Event = {
   	
    addEvent: function (ele, type, handler) {
   
		if (ele.addEventListener)