事件

#事件
---------------------------------------------
##事件三要素：
    1.事件源： 绑定事件的元素
    2.事件类型：列入：移入，点击，双击，······
    3.事件处理函数（事件句柄）：事件发生时要执行的操作

##绑定事件的三种方式：

    1.事件绑定在标签上（DOM 0级）
    列：
    <input type="button" onclick="handle()">
    function handle(){
    console.log("hello");        不推荐，只能找到全局的！（讲究CSS HTML JS 分离）
    }
##2.标准 DOM 0 级 
    列：
    <input type="button" id="btn">
    let btn = doucument.getElementById("btn");
    btn.onclick = function(){
    console.log("hello");        同类型事件源只能绑定一个同类型事件  兼容性很好！
    }
##3.DOM 2 级
    列： 第三个参数可选，默认False 第一个参数：事件 onclick 不需要on （"click"）

    let btn = doucument.getElementById("btn");
    btn.addEventListener("click", function(){
                    同类型事件源可以绑定多个 兼容性没有DOM 0级 好！
----------------------------------------------------------
##删除事件的两种绑定方式：
    1.DOM0
    btn.onclick = null;
##2.DOM2级
    let btn = doucument.getElementById("btn");
    btn.addEventListener("click", 函数名);    
    创建函数的时候要单独提出去写，小括号李第二个参数只写函数名不要小括号

    onmouseover  移入 
    onmouseout  移除    这组移入移出，事件源的子元素也会触发

    onmouseenter 移入
    onmousekeave 移出  事件源的子元素不会触发