1.事件对象

事件对象：
触发DOM上某个事件的时候 都会有一个 event 事件对象
event在事件处理程序执行的时候被创建 执行完毕即销毁

所有的时间 都需要一个对象 来绑定
element.onclick
点击事件的绑定对象是 element
是鼠标事件 事件对象是 MouseEvent

window.onscroll
滚动条事件的执行对象是 window
是 窗口事件 事件对象是 event

所有的事件对象 都叫 event

2.事件的绑定

1.HTML标签
行间属性 onclick = "事件 处理函数"
特点： 简单方便
缺点： 不方便维护 不方便封装 作用域污染

2.DOM对象属性绑定
特点： js跟html 完全分离 便于封装 实现解耦
缺点： 一次只能绑定一个处理函数 不灵活 不方便

ele.onclick = function(){} 
ele.src =
ele.href = 
ele.timer = setintivel             timer自定义属性

3.事件监听器绑定 ele标签

ele.addeEventListener("事件类型"，事件处理函数，bool)

参数1  事件类型   没有"on"   有 on 的是 属性      直接写"click"
参数2  事件处理函数    可以是匿名的/命名/事件监听对象
参数3  布尔值  用来控制事件传播方向
 true         事件捕获
 false        事件冒泡

特点:
可以动态绑定 动态删除
注册多个事件 给同一个 ele
便于封装维护

缺点:
IE8以下不执行 需要写跨浏览器的兼容

dom 0级 跟 dom 2级 可以同时存在 没有1级
dom 0级 同一元素 同一事件 就算方法不同 也只能同时存在一个 后面的会覆盖前面
dom 0级 跟 dom 2级 可以同时存在 可以叠加

event 缩写 e
在函数里面 代表 事件对象 可以打印

var box =document.querySelector('.box');
box.addEventListener('click',function(e){
console.log(e);

e  打出来 事件对象  里面包含着所以的时间属性
     }) 

常用事件属性:

inTrusted 是否被信任
screenX/Y 鼠标在浏览器上面的坐标
clientX/Y 鼠标在窗口上的坐标
pageX/Y 鼠标在文档上的坐标
offsetX/Y 鼠标在目标元素上的坐标

3.事件的移除

  // 行间事件
 function fun1() {
 // 行间事件移除
 this.setAttribute('onclick', '');
}
  // dom 0级
 box.onclick = function () {
  // dom 0级 移除
 this.onclick = null;
    }

  // dom  2级
 box.addEventListener('click', fun2,false);

box1.addEventListener('click', function () {
box.removeEventListener('click', fun2, false)
    })

removeEventListener:
清除指定的方法 不会将所有方法都清除
事件监听 无法直接移出匿名方式注册的事件处理函数
因此在使用时 推荐使用命名方式注册的事件处理函数 方便后期动态修改

4.事件流：

用户在浏览器上 任何一个 事件 触发 都会引起事件流的执行

例如  用户在浏览器中任何一个位置做了鼠标点击动作

事件流   会立刻  从  document  顶节点开始  向下一层一层的遍历，直到找到   鼠标点击的节点对象
然后查看   该节点是否有点击事件    如果有就调用事件处理函数， 如果没有   或者 事件已经调用完，
就向上一层   一层一层的传播   该类型事件，每到一层     就检查该层是否有相同类型的事件，
如果有  调用，如果没有   继续向上传播    直到  document 节点结束.

事件流 一共有三个阶段:

第一个阶段： 事件捕获阶段 从DOM数的顶级节点 开始向下 层层查找 事件激活的目标节点 执行事件监听出路函数
第二个阶段： 事件目标阶段 找到目标节点后 查看是否有时间处理函数的绑定 如果有就调用
第三个阶段： 事件冒泡阶段 从目标节点 一层一层的向上传播事件 并调用各层的事件处理函数 直到DOM数的顶级节点结束

阻止事件冒泡/阻止事件捕获：

1.e.stopPropagation();
       非IE
 e.stopPropagation();
        
2.window.event,cancelBubble = true;
        IE
  window.event.cancelBubble = true;

5.鼠标事件的类型

前面都要加 on

6.鼠标事件对象

 window.addEventListener('mousemove', function (e) {
        // event   兼容性处理  
        e = event || e || window.event;
    })

获取鼠标坐标:
**1.获取鼠标在浏览器视窗中的坐标 **

 show(e.clientX, e.clientY,box1);

2.获取鼠标在文档中的坐标

show(e.pageX,e.pageY,box2);

3.获取鼠标在屏幕中的坐标

show(e.screenX,e.screenY,box3);

7.UI 事件

带on都是 属性或对象 不是事件
不带on 是事件