JavaScript中的事件、事件对象(event)、事件的冒泡、事件的委任和事件的传播

一、事件的简介

事件：
    文档或浏览器窗口中发生的一些特定的交互瞬间
    比如：点击按钮 鼠标移动 关闭窗口
可以为按钮的对应事件绑定处理函数的形式来响应事件
    当事件触发时候才会被调用
    像为单击事件绑定的函数我们称为单机响应函数
    例:
    var btn = document.getElementById("btn");
    btn.onclick = function(){
       alert("1");
       }

二、事件的绑定

1.使用对象.事件 = 函数的形式绑定响应函数
        不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

2.对象.addEventListener()
    也可以绑定响应函数
    例：btn01.addEventListener("click",function(){alert(1)},false);
    参数：
        1.事件的字符串 不需要on
        2.回调函数 当事件触发时该函数会被调用
        3.是否捕获阶段时触发事件 需要一个布尔值 一般都传false
    可以为同一个元素的相同事件绑定多个事件响应函数
        这样当该事件被触发时，响应函数会按照函数绑定顺序来执行
    这个方法不支持ie8以下浏览器

在ie8中可以使用
    对象.attachEvent("onclick",function(){alert(1);});
    参数：1.事件字符串 要on
         2.回调函数
    可以绑定多个响应函数，但执行顺序相反

三、事件对象(event)

当事件的响应函数被触发时 浏览器每次都会将一个事件对象作为实参传递进响应函数

在事件对象中封装了当前事件的相关一切信息，比如：鼠标的坐标 键盘哪个按键按下 ....

当你触发了一个事件以后，对该事件的一些描述信息
例如：
你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
你触发一个键盘事件的时候，你按的是哪个按钮
每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象

1、clientX/Y

绝大多数情况下我们希望获取鼠标点击位置相对于浏览器窗口的坐标，event的clientX，clientY属性分
别表示鼠标点击位置相对于文档的左边距，上边距，不随页面滚动而改变。

element.onclick = function (event) {
    var e = event || window.event;
    console.log