js中的DOM事件，不能说最全，只能说够用

1. 事件

   • 在js中的事件是基于观察者模式；
   • 事件的几要素：
     • 事件源：被监听的对象；
     • 事件：监听的内容 ；
     • 监听器：监听事件源，当事件触发时，调用回调函数；
     • 回调函数：你定义的，但你没有调用；事件发生后，它执行了。

2. 绑定事件的方法：

   • 两种方法：

     • DOM0:

       • obj.onclick = callback;
       • 这种方法只能为一个元素的一个事件绑定一个处理函数，不能绑定多个，一旦绑定多个则后面的会覆盖前面的事件。

     • DOM2：
       1).标准浏览器(IE9及以上、chrome、firefox)；

       • obj.addEventListener(eventName， callback，是否捕获）;：
         • 有捕获；
         • 事件名称前没有on；
         • 事件执行的顺序是正序；
         • this是触发该事件的对象。
           注：是否捕获，默认是false； false是冒泡，true是捕获。

       2).IE浏览器(IE11不支持此方法)：

       • obj.attachEvent(eventName, callback);
         • 没有捕获(非标准的IE，标准的IE有捕获)；
         • 事件名称有on；
         • 事件执行的顺序，标准IE->正序，非标准IE->倒序；
         • this指向window。
           注意：addEventListener()绑定的回调函数中的this是当前的元素，而attachEvent()绑定的回调函数中的this永远是window。

     • 两种事件的区别：

       • DOM0：
         1).默认冒泡，取消冒泡的方法：event.cancelBubble = true；
         2).一个元素只能绑定一个，同类事件，如果继续绑定，第二个事件函数会覆盖第一个。
       • DOM2：
         1).attachEvent默认冒泡；
         2).addEventListener第三个参数为是否捕获；
         3).一个元素上可以绑定多个同类事件，他们都会执行。

3. 事件解绑：

   • DOM0：
     • 只需要再注册一个事件，把值设置为null；
     • 原理：后面注册的会覆盖前面的事件，设置为null，则解除了事件绑定；
     • 写在html中的事件
   • DOM2：
     • obj.removeEventListener(eventName, callbakc, 捕捉/冒泡);
     • obj.detachEvent->IE浏览器。

4. 事件对象(event):

   • 在事件的响应函数被触发时，浏览器每次都会传递进一个事件对象(event)。在这个事件对象中封装了当前事件相关的一些信息，鼠标的坐标、键盘的哪个按键被按下等
   • 在IE8以下的浏览器中，它不会传递事件对象，而是将事件对象作为window对象的属性保存；
   • 解决IE8以下event兼容问题：
     • obj.事件 = function(event){
       event = event || window.event;
       }

5. 事件的传播

   • 当触发了一个页面中某一个事件时，它实际上经过了三个阶段：
     1).捕获阶段：指从最外层的元素开始向目标元素捕获事件(由内向外)；
     2).目标阶段：事件传播到了触发事件的对象；
     3).冒泡阶段：指从目标元素，向它的祖先元素传递(由外向内)。
     注意：一般来说我们的的事件是在冒泡阶段执行的，在IE8以下的浏览器中没有捕获事件。
   • 全局捕获：
     - 只在IE下有效果，firefox有此属性没有效果，chrome则不支持此属性；
     - 只执行一次，obj.setCapture激活全局捕获；obj.releaseCapture释放全局捕获。
     • 冒泡：
       • 事件的向上传导；
       • 后代元素上的事件被触发也会导致祖先元素上的相同事件被触发；
       • 阻止冒泡事件：event.cancelBubble = true;或者event.stopPropagation();

6. 事件委托：

   • 过程:
     1). 将多个子元素(li)的事件监听委托给父辈元素(ul)处理;
     2). 监听回调是加在了父辈元素上;
     3). 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul);
     4). 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数。
     • 好处:
       1). 减少事件监听的数量: n—>1;
       2). 添加新的子元素, 自动有事件响应处理。

7. 具体事件：
   1). 拖拽

• 拖拽相关的三个事件：
  1).onmousedown：当鼠标按下时触发;
  2).onmousemove: 当鼠标移动时触发;
  3).onmouseup：当鼠标松开时触发。

  • 注意：
    1).onmousedown给被拖拽的对象绑定;
    2).onmousemove和onmouseup需要给document绑定;
    3).onmousemove和onmouseup这两个事件需要在onmousedown响应函数内绑定;
    4).onmouseup时需要清除两个事件：onmousemove和onmousedown = null。

• 区别四种鼠标事件
  1).mouseover mouseout 当xxx = mouseover时：把鼠标放在outer容器里面来回移动，就会发现控制台不断地输出，说明mouseover是可以冒泡的；
  2).mouseenter mouseleave 当xxx = mouseenter时：把鼠标放在outer容器里面来回移动，就会发现控制台没有输出，说明mouseenter是不冒泡的；

  2).on事件(jQuery)

  • 语法：on(events[,selector][,data],handler(eventObject))
  • 描述：在选定的元素上绑定一个或者多个事件处理函数(多个之间用空格隔开即可)
    • events 一个或空格分隔的事件类型，例如: click keydown
    • selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素
      如果为null，那么被选中的元素总是能触发事件
    • data 事件触发时，要传递给处理函数的event.data
    • handler(eventObject)事件触发时执行的函数

  3).鼠标滚轮事件

  • 事件兼容：
    • 火狐：DOMMouseScroll
    • 其他: mouseWheel
      $(document).on(‘mouseWheel DOMMouseScroll’, handler);
  • 鼠标滚轮方向
    • 火狐：detail
    • 其他：wheeldalta
  • 向下滚动时
    • detail 3
    • wheeldalta -120
      注意：火狐浏览器方向判断的数值正负与其他浏览器是相反的

  4). 键盘事件

  • 说明：keydown事件发生在键盘的按键按下的时候
  • 原生js兼容性问题
    • IE 只有keyCode属性
    • FireFox 中有which和charCode属性
    • Opera 中有keyCode和which属性等
      注意：但是jQuery已经解决此问题，jQuery中通过.which属性和.keyCode属性来确定按下了哪个键。

  5). transitionend事件:

  • 事件兼容：
    • chrome: webkitTransitionEnd
    • opera: oTransitionEnd 、 otransitionend
    • 其他：transitionend

• 鼠标滚动事件
  - document.documentElement.scrollTop
  - document.body.scrollTop;
  - window.pageYOffset ； //safari