如何绑定事件
    1、ele.onxxx = function (event) {}
    1）兼容性很好，但是一个元素只能绑定一个事件处理程序
    image.png
    2）基本等同于写在 HTML 行间上

    2、ele.addEventListener(type, fn, false);里面可以填三个参数，IE9 以下不兼容，可以为一个事件绑定多个处理程序
    image.png
    image.png
    ele.addEventListener 不能给同一个函数绑定多次，重复的绑定一个函数就不能用了

    3、ele.attachEvent(‘on’ + type, fn);
    IE 独有，一个事件同样可以绑定多个处理程序，同一个函数绑定多次都可以


    事件处理程序的运行环境
    1、ele.onxxx = function (event) {}
    程序 this 指向是 dom 元素本身（指向自己）

    2、obj.addEventListener(type, fn, false);
    程序 this 指向是 dom 元素本身（指向自己）

    3、obj.attachEvent(‘on’ + type, fn);
    程序 this 指向 window

    解除事件处理程序
    1、ele.onclick = false/‘’/null; ==> 解除 ele.onxxx = function (event) {}
    2、ele.removeEventListener(type, fn, false);==>解除 addEventListener(type, fn, false)
    3、ele.detachEvent(‘on’ + type, fn); ==> obj.attachEvent(‘on’ + type, fn);
    注:若绑定匿名函数，则无法解除

    事件处理模型 — 事件冒泡、捕获（不能同时存在）
    1、事件冒泡：
    结构上（非视觉上）**嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
    结构上存在父子关系的元素，如果点击到子元素，会一级级向父元素传递这个事件（从代码的角度是自底向上一层层冒泡的）

    2、事件捕获：（只有谷歌有，最新火狐有）
    1）结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）
    2）IE 没有捕获事件
    一个对象的一个事件类型，只能存在一个事件处理模型（冒泡或捕获）obj.addEventListener(type, fn, true);第三个参数为 true 就是事件捕获

    3、触发顺序，先捕获，后冒泡
    同一个对象的一个事件处理类型，上面绑定了两个事件处理，分别执行事件冒泡和事件执行

    4、focus，blur，change，submit，reset，select 等事件不冒泡

    取消冒泡和阻止默认事件
    image.png
    2）IE 独有 event.cancelBubble = true;【实际上谷歌也实现了】

    2、阻止默认事件:
    1）默认事件 — 表单提交，a 标签跳转，右键菜单等
    2）return false; 兼容性非常好，以对象属性的方式注册的事件才生效（这是句柄的方式阻止默认事件，只有句柄的方式绑定事件才好使）
    3）event.preventDefault(); W3C 标注，IE9 以下不兼容
    4）event.returnValue = false; 兼容 IE

    事件对象
    非 ie 浏览器会把事件对象（记载了数据发生时的状态和信息）打包传到参数里面去。ie 浏览器在 window.event 里面储存事件对象。

    1、event || window.event 用于 IE
    window.event 用于 IE，event 只能用于非 ie 浏览器

    2、事件源对象:（找事件源对象的方法）
    image.png
    event.target 火狐独有的
    event.srcElement Ie 独有的
    这俩 chrome 都有

    事件委托
    image.png
    image.png