4.认识事件

事件三要素

事件源：给谁添加谁就是事件源
事件类型：就是你要执行什么样的操作
事件处理函数（事件处理程序）：就是后面的程序

事件绑定

DOM 0级事件绑定
    事件源.on事件类型=事件处理函数
        btn.onclick = function(){
            函数体
        }
DOM 2级事件绑定
    事件源.addEventListener（"事件类型[不需要加on]"，事件处理函数）
        btn.addEventListener('click',function(){
            函数体
        }) 

事件解绑

DOM 0级事件解绑
    事件源.on事件类型=null
    btn.onclick = null
    //如果给同一个事件源绑定相同类型的事件，后面绑定的会把前面的覆盖掉
DOM 2级事件解绑
    事件源.removeEventListener（"事件类型[不需要加on]"，事件处理函数）
    //如果DOM 2级事件需要解绑的时候，，函数需要单独定义
    btn.removeEventListener('click',A) 
    //可以给同一个事件源绑定多个同类型事件，顺序绑定顺序执行

事件类型

鼠标事件：
            click，鼠标左键单击事件
            dblclick，鼠标左键双击事件
            contextmenu，鼠标右键单击事件
            mousedown,鼠标按下事件
            mouseup，鼠标抬起事件
            mousemove，鼠标移动事件
            mouseover，鼠标移入事件     进入和离开其后代也会触发
            mouseout，鼠标移出事件      进入和离开其后代也会触发
            mouseenter，鼠标进入事件
            mouseleave，鼠标离开事件
键盘事件：
            keydown，键盘按下事件
            keyup，键盘抬起事件
            keypress，键盘键入事件
表单事件：一般绑定给form/input
            focus：聚焦事件
            bulr：失焦事件
            change：内容改变事件    在失去焦点的时候触发
            input：input事件    实时输入和实时删除都会触发
            reset：重置事件     这个事件要绑定form标签
            submit：提交事件    这个事件要绑定form标签
触摸事件：一般使用在移动端，能触摸的设备上
            touchstart：和屏幕接触的一瞬间触发
            touchmove：在屏幕上移动的时候触发
            touchend：离开屏幕的一瞬间触发
拖拽事件：
       拖拽元素：元素要在标签里加draggable='true'
            dragstart:就是拖拽开始的一瞬间触发
            drag：就是拖拽移动的时候触发
            dragend:就是拖拽结束的一瞬间触发
       拖放元素：
            dragenter:鼠标进入拖放元素的一瞬间触发
            dragleave：鼠标离开拖放元素的一瞬间触发
            dragover：拖拽元素的鼠标完全进入拖放元素的时候触发
            drop：拖拽元素在拖放元素内部松开的瞬间会触发，触发条件是
                    divbox.addEventListener('dragover',function(e){
                          console.log(999);
                          e.preventDefault();
                       })
                        或者
                    div.ondragover = function(){
                          console.log(999)
                          return false;
                       }
其他事件：
         selectstart事件：进制框选
         document.addEventListener('selectstart',function(e){
                e.preventDefault();
             })
         visibilitychange事件：页面的可视状态发生变化以后触发，当用户导航到一个新的页面，改变标签页，关闭标签页，最小化或者关闭浏览器；或者移动端从浏览器换到其他的app。
         document.addEventListener("visibilitychange", function(){}, false);

事件对象

就是对本次事件的详细记录，在事件处理函数里传入形参，e就是事件对象，里面记录本次事件相关的信息。
btn.addEventListener('click',function(e){
            函数体
        }) 
//在ie低版本中有独立的事件对象的语法   window.event
为了在标准浏览器和IE低版本中都能使用，有一个兼容写法var e = e || window.event

事件对象内的信息

就是每次触发事件后，事件对象内记录一些和事件操作相关的信息。

鼠标事件

相关的坐标值的获取：
    client一组  获取到的是相对于浏览器可视窗口左上角的距离
        横坐标（x）：   事件对象.clientX
        纵坐标（y）：   事件对象.clientY
    offset一组  获取到的是相对于事件源左上角的距离
        横坐标（x）：   事件对象.offsetX
        纵坐标（y）：   事件对象.offsetY
    page一组  获取到的是相对于文档流左上角的距离
        横坐标（x）：   事件对象.pageX
        纵坐标（y）：   事件对象.pageY
        //*例子：鼠标在页面上移动的时候把坐标点实时显示到页面上。
        //pointer-event：none
        //除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

键盘事件

键盘事件：就是看你按下的是哪个键，是不是组合键。

事件对象.keyCode    //获取按键的编码值
事件对象.xxxKey     
    返回值是布尔值  true表示按下的是对应的按键，false表示按下的不是对应的按键。
    //altKey、shiftKey、ctrlKey、metaKey

事件执行机制（事件流）【重点！！！】

当我们事件触发的时候，这个事件行为会沿着结构父级向上传播，如果在结构父级（上级）有同类型的事件也会被触发

事件流：

    捕获阶段：就是从window到元素的过程
    目标阶段：准确触发事件的目标元素
    冒泡阶段：从目标元素到window的过程（默认在这个阶段执行）
   **如何在捕获阶段执行？**
        需要用DOM 2级事件绑定
        需要传递3个参数，值是true
        事件源.addEventListener('click',function(){},true)

阻止事件冒泡

事件默认在冒泡阶段触发,不需要触发的情况下，就需要阻止事件冒泡
标准浏览器
    事件对象.stopPropagation()
IE低版本
    事件对象.cancelBubble = true
兼容写法：
**如果为真就执行try,如果为假就执行catch**
    try{
        事件对象.stopPropagation()
    }
    catch(err){
        事件对象.cancelBubble = true
    }
    

阻止默认行为

有些操作自带一些默认事件，a标签的自动跳转能力、右键的菜单栏、form标签的自动提交等。

标准浏览器
    事件对象.preventDefault()
IE低版本
    事件对象.returnValue = false
兼容写法：
    try{
        事件对象.preventDefault()
    }
    catch(err){
        事件对象.returnValue = false    
    }
通用语法：return false；这个可以阻止默认行为，但是需要放在代码的末尾。

事件委托

就是把本应该添加到本身的事件添加到父元素/结构上级，我们只需要找到准确触发事件的目标元素就可以了。

原理：利用冒泡原理，利用e.target找到准确触发事件的目标元素。