事件监听

###为元素添加事件处理程序方式：

1. 元素行间绑定 ： 通过元素的onclick 属性
   • 不适合代码量较大的事件处理程序
   • 如果要赋值函数，必须写函数的调用，导致函数中的this不在指向当前元素，而是window.
2. DOM0级绑定事件处理程序 ：el.onclick = function(){}不管行间绑定还是DOM0级绑定，在各个浏览器上都不存在兼容问题
   • 当我们为同一个元素多次绑定同一类型的事件，那么事件的处理程序会发生覆盖现象，以最后一次为准
   • DOM0级只支持事件冒泡，不支持事件捕获

事件流：页面中事件发生后，元素对事件触发顺序。

事件冒泡： 事件触发的顺序，从最确定的元素，向最不确定的元素传播。
事件捕获: 事件触发的顺序，从最不确定的元素，向最确定的元素传播

    var ds = document.querySelectorAll('div')   
    ds[0].onclick = function(){alert('red')};  
    ds[1].onclick = function(){alert('red')};  
    ds[2].onclick = function(){alert('red')};  

3. DOM2级事件处理程序绑定（事件监听）
   • addEventListener(type,fn,bool)

   参数1：string。表示事件类型，例如点击事件 -> ‘click’,必须参数
   参数2：function.表示事件触发时要执行的操作，必须参数
   参数3：boolean.表示事件被添加到那个事件流中，可选参数，默认值为false事件冒泡，true事件捕获

   • 事件捕获的发生要优先于事件冒泡
   • 当为同一个元素多次绑定同一类型事件，不会发生覆盖，会按照绑定顺序依次执行。
   • 事件的处理程序的移除，removeEventListener():参数和添加时一样:注意：如果绑定的事件将来需要移除，那么绑定时处理程序就不能使用匿名函数。
   • addEventListener存在兼容问题,IE8及以下不支持,IE低版本使用DOMW级为
     :attachEvent(),detachEvent() .不支持事件捕获

   attachEvent(‘onclick’,fn);
   detachEvent(‘onclick’,fn);

---

####鼠标事件

• click点击事件

body.onclick = function(){
    console.log('click');
}

• 双击事件

body.ondblclick = function(){
    console.log('dblclick')
}

• 鼠标按键按下

body.onmousedown = function(){
        console.log('mousedown')
}

• 鼠标按键释放

body.onmouseup = function(){
        console.log('mouseup')
}

• 鼠标移入

body.onmouseover = function(){
        console.log('mouseover')
}
body.onmouseenter = function(){
        console.log('mouseenter')
}
over 要优先于enter 触发
over 事件支持事件冒泡 enter 不支持事件冒泡  

• 鼠标移出事件

mouseout/mouseleave

特点和移入一样

• 鼠标移动事件 :持续触发

body.onmousemove = function(){
    console.log('mousemove')
}

• 鼠标右键事件

body.onmousemove = function(){
    console.log('mousemove')
}

---

事件对象

event对象存储了和当前发生事件相关的信息.事件一旦发生事件对象将自动生成,并作为事件处理程序的实际参数传入事件.

事件对象的兼容问题:凡是支持DOM2级事件绑定的,事件触发都会由浏览器自动创建事件对象并作为参数传入事件,但是IE8及以下不会自动创建事件对象,事件对象:window.event:

1. event.clientX/evvent.clientY:

参考系原点为浏览器视窗坐上角的鼠标坐标

wrap.onclick = function(event){
        //事件对象兼容写法
        var e = window.event || event ;
        // console.log(event);
        //获取鼠标坐标点:
        // 1. event.clientX/evvent.clientY:参考系原点为浏览器视窗坐上角的鼠标坐标
        console.log(e.clientX,e.clientY)
        // 2. eventpageX/event.pageY:参考系原点为文档左上角的鼠标坐标
        console.log(e.pageX,e.pageY)
        // 3. event.screenX/event.screenY:参考系原点为屏幕左上角的鼠标坐标
        console.log(e.screenX,e.screenY)
    }

2. event.pageX/event.pageY:

参考系原点为文档左上角的鼠标坐标

3. event.screenX/event.screenY:

参考系原点为屏幕左上角的鼠标坐标