一.事件流

事件流:事件的流向，时间的执行顺序。
当子元素和父元素都定义了相同的事件，比如都定义了onclick事件，当点击子元素时，父元素的onclick事件也会被触发，js把这种事件连续发生的机制为事件冒泡或事件捕获
IE:事件从里向外发生，事件从最精确对象(target)开始触发，然后到最不精确(document)的对象触发，即事件冒泡
网景：事件从外向里发生，事件从最不精确的对象（document）开始触发，然后到最精确对象(target)触发，即事件捕获
W3C将两者进行中和，在任何W3C的事件模型中，事件先进入捕获阶段，再进入冒泡阶段

二.事件模型

JavaScript中的两种事件模型：DOM0，DOM2。

DOM0级事件模型

DOM0级事件模型是早期的事件模型，所有的浏览器都支持。
注册事件：在事件类型前面加on，如：onclick、onmouseover ......
解除事件：dom.onclick = null;
每个DOM对象只能注册一个相同类型的事件，注册多个则会发生覆盖，只执行最后一个事件函数。

DOM2级事件模型

DOM2级事件模型是较新的事件模型，IE8及以下是不支持的。注册一个相同类型的事件，注册多个不会发生覆盖。
注册事件：
addEventListener(type,fn,useCapture) 事件监听器
参数：type----事件类型，例：click、mouseover...
fn----事件处理函数
useCapture----布尔值true或 false 默认
( true表示事件捕获，false表示事件冒泡 )
为了兼容浏览器，第三个参数一般设置为false
解除事件：removeEventListener(type, fnName, useCapture)
每个DOM对象可以注册多个相同类型的事件，不会发生覆盖，会依次的执行各个事件函数。

因为IE678只支持事件冒泡，不支持事件捕获，所以它也不支持addEventListener( )方法
IE提供了另一个函数attachEvent( type , fn )
参数：type----事件类型，例：onclick、onmouseover
fn----事件处理函数
没有第三个参数
解除事件：detachEvent( type , fnName )

封装事件监听/移除函数（兼容）

//添加事件监听(兼容低版本浏览器)
        function addEvent(dom,type,cb){
            if(dom.attachEvent){
                dom.attachEvent('on'+type,cb);
            }else{
                dom.addEventListener(type,cb)
            }
        }


 //移除事件监听(兼容低版本浏览器)
        function removeEvent(dom,type,cbName){
            if(dom.detachEvent){
                dom.attachEvent('on'+type,cbName);
            }else{
                dom.removeEventListener(type,cbName);
            }
        }

触发事件

1.
btn.onclick = function(){ // DOM 0
    console.log("btn被点击")
}
btn.onclick();// 触发事件

2.
btn.addEventListener("click", function(){ // DOM 2
    console.log("btn被点击2")
})
// 创建一个事件对象
var e = new Event("click");
// 触发元素的一个事件
btn.dispatchEvent(e);

三.事件对象

1.event概念及作用

事件通常与函数结合使用，函数不会在事件发生前被执行

event事件对象只在事件发生的过程中才有效

event对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)

在需要获取和事件相关的信息时使用，如：

获取键盘按下的按键码

获取鼠标的位置坐标

获取事件名称

获取事件生成的时间

获取事件的类型

等等......

2.获取event对象

所有浏览器都支持event对象，只是支持的方式不一样

FireFox、Chrome等浏览器要获取到event对象，需要从函数中传入，参数名随意

而IE在浏览器中event作为window对象的一个属性存在，可以直接使用 event 或 window.event 获取到

例如：

document.onmousedown=function ( e ){

    var ev = e || window.event ; //兼容各个浏览器

    console.log(ev);

};

注意 var ev = e || event ; 顺序！

3.鼠标/键盘相关属性

组合键：ctrlKey、altKey、shiftKey、metaKey

image.jpeg

image.png

image.png

4.其他属性/方法

在火狐中获得触发事件的元素
使用：event.target

在IE中获得触发事件的元素
使用：event.srcElement

// 兼容写法

var Target = event.target || event.srcElement;

event.relatedTarget 火狐获取触发事件的目标源，与target相反

event.fromElement IE获取触发事件的目标源，与srcElement相反

在mouseover事件中，它指向鼠标来自哪个元素(mouseenter)

var from=event.relatedTarget || event.fromElement;

event.relatedTarget 火狐获取触发事件的目标源，与target相反

event.toElement IE获取触发事件的目标源，与srcElement相反

在mouseout事件中，它指向鼠标去往的那个元素(mouseleave)

var to=event.relatedTarget||event.toElement;

阻止默认行为

event.preventDefault()  //火狐
event.returnValue = false  //IE
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
return false;

阻止事件传播

event.stopPropagation()  //火狐
event.cancelBubble = true  //IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

四.事件委托

什么是事件：通俗讲onclick，onmouseover，onmouseout等就是事件。
什么是委托：就是这个事件本来是加在某些元素上的，而你却加到其他元素上来完成这个事件。

原理：利用事件传播的特征。
具体来说，事件委托就是事件目标自身不处理事件，而是把处理事件委托给其父元素，甚至是document 来完成。

优点：

1. 提高性能和效率
2. 减少事件注册，节省内存占用
3. 未来元素无需再次注册事件
   ......

五.鼠标滚轮事件

在非火狐浏览器中
鼠标滚轮事件：onmousewheel
示例：
box.onmousewheel=function (ev){
var event=ev||window.event;
alert(event.wheelDelta);// 前推：120 后拉：-120
};

在火狐浏览器中
鼠标滚轮事件：DOMMouseScroll
示例：
box.addEventListener('DOMMouseScroll',function (ev){
alert(ev.detail);// 前推：-3 后拉：3
},false)

六.scroll 滚动条

scrollLeft：设置或获取当前左滚的距离，即左卷的距离；
scrollTop：设置或获取当前上滚的距离，即上卷的距离；
scrollHeight：获取对象可滚动的总高度；
scrollWidth：获取对象可滚动的总宽度；

获取页面的滚动条：
var pageScroll = document.body.scrollTop; //谷歌
var pageScroll = document.documentElement.scrollTop; //火狐 IE

onscroll 事件，元素滚动条在滚动时触发。

案例：
... ...