第十六章 事件

一、事件的含义以及组成

1、含义：指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作）；

2、组成：任何一个事件都会有这三要素

        触发谁的事件：事件源

        触发什么事件：事件类型

        触发以后做什么：事件处理函数（事件处理程序）    

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {点击执行的代码} => 这个事件的处理函数

 二、事件绑定和事件解绑

1、事件绑定有DOM 0级和DOM 2级，没有DOM 1级

延伸：1级DOM标准中并没有定义事件相关的内容，且出来了没多久，就下架了，所以没有所谓的1级DOM事件模型；

2、DOM 0级 事件绑定

(1)语法：事件源.on事件类型 = 事件处理函数（事件处理程序）

注意：不能给同一个事件源绑定相同的事件类型，后绑定的会把前面的覆盖掉；

3、DOM 2级 事件绑定

        =>标准浏览器

        ->语法：事件源.addEventListener('事件类型'，事件处理函数)

        注意：可以给同一个事件源绑定多个同类型的事件，会按照你绑定的顺序，顺序执行；

        =>IE低版本（了解）

        ->语法：事件源.attachEvent（on'事件类型',事件处理函数）

         注意：可以给同一个事件源绑定多个同类型的事件，会按照你绑定的顺序，倒序执行；

//标准浏览器
oDiv.addEventListener('click', function () {
  console.log('我是第一个事件')
}, false)

oDiv.addEventListener('click', function () {
  console.log('我是第二个事件')
}, false)



//IE低版本
oDiv.attachEvent('onclick', function () {
  console.log('我是第一个事件')
})

oDiv.attachEvent('onclick', function () {
  console.log('我是第二个事件')
})

4、事件解绑

（1）含义：就是解绑一个已经绑定好的事件

（2）分类:DOM 0级和DOM 2级

        =>DOM 0级

        ->语法：事件源.on事件类型 = null

        ->就是本来是有函数执行，现在变成null，就没有要执行的函数了，相当于解绑了；

        =>DOM 2级

        ->标准浏览器

                +语法：事件源.removeEventListener('事件类型'，事件处理函数)

        注意：如果想要通过DOM2级事件解绑，需要我们把函数单独定义，避免因引用地址不同，无法解绑成功；

        ->IE低版本（了解）

                +语法：事件源.detachEvent('on事件类型', 事件处理函数)

        注意：如果想要通过DOM2级事件解绑，需要我们把函数单独定义，避免因引用地址不同，无法解绑成功；

        //标准浏览器
        // 0. 获取元素
        var div = document.getElementsByTagName('div')[0]
        var btn = document.getElementsByTagName('button')[0]

        //  DOM 2级 事件 标准浏览器
        function a() {
            console.log('我是事件处理函数')
        }
        div.addEventListener('click', a)

        btn.onclick = function() {
            console.log('在这里操作解绑 div 的事件')

            // 2. DOM 2级 事件解绑 - 标准浏览器
            //事件源.removeEventListener('事件类型', 事件处理函数)
            div.removeEventListener('click', a)

            console.log('解绑事件的代码执行完毕了')
        }


        //IE低版本

        function b() {
            console.log('IE 的事件处理函数')
        }
        div.attachEvent('onclick', b)

        btn.onclick = function() {
            console.log('在这里操作解绑 div 的事件')

            //DOM 2级 事件解绑 - IE 低版本
            div.detachEvent('onclick', b)

            console.log('解绑事件的代码执行完毕了')
        }

三、事件类型

1、分类：

• 鼠标事件
• 键盘事件
• 浏览器事件
• 表单事件
• 触摸事件
• 拖拽事件
• 其它事件

注意: 所有的事件类型都是小写没有大写

2、鼠标事件

=>click：鼠标左键单击事件

=>dbclick：鼠标左键双击事件

=>contextmenu：右键单击事件

=>mousedown：鼠标左键按下事件

=>mouseup：鼠标左键抬起事件

=>mousemove：鼠标移动

以下两种区别

=>mouseover：鼠标移入事件

=>mouseout：鼠标移出事件

注意: 就是鼠标进入到后代元素中也能触发事件

=>mouseenter：鼠标移入事件

=>mouseleave：鼠标移出事件

注意: 就是鼠标进入到后代元素中不能触发事件

3、键盘事件：由键盘触发的事件，键盘事件可以给任何元素绑定，但是有的是不能触发的，一般我们把键盘事件绑定给window或者是document或者是可以看到内容的元素 input；

        常见的键盘事件：

        =>keydown ：键盘按下事件

        =>keyup： 键盘抬起事件

        =>keypress ： 键盘按下再抬起事件即输入时间

        注意：这个时间的触发只能是可以输入内容的按键才可以，比如上下左右按键是不能触发的；

4、表单事件

=>focus：聚焦事件，就是光标在输入框中的时候

=>blur：失焦事件，就是失去焦点的事件

=>change：表单内容改变事件，需要内容改变才触发

=>input：表单内容输入/删除时触发该事件

=>reset：表单重置事件。事件需要绑定给 form 标签。由 form 标签内的 reset 按钮触发

=>submit：表单提交事件。事件需要绑定给 form 标签。由 form 标签内的 submit 按钮触发

        // reset
        formBox.onreset = function () {
            console.log(555);
        }

        // submit
        formBox.onsubmit = function () {
            console.log(666);
        }

5、触发事件 

=>touchstart：和屏幕接触的一瞬间触发

=>touchend：离开屏幕的一瞬间触发

=>touchmove：在屏幕上触摸移动事件

6、拖拽事件：有一个拖拽一般会关联两个元素：拖拽元素、拖放元素

要想一个元素被拖拽 需要添加一个属性: draggable='true'

拖拽事件

=>dragstart: 就是元素被拖动的一瞬间触发

=>drag: 就是拖动的时候触发的事件

=>dragend: 就是松开的一瞬间触发

拖放事件

=>dragenter: 就是元素进入到拖放元素中的时候触发(是光标进入)

=>dragleave: 就是元素离开的时候触发(是光标)

=>drop: 就是拖拽元素完全进入到拖放元素中的时候触发

        注意：如果这个事件想要触发 需要一个别的事件，这个事件叫做: dragover，同时需要在这个事件中阻止默认行为

        
div

        // 获取元素
        var box = document.querySelector('div')
        var pBox = document.querySelector('p')

        // 拖放事件
        // dragenter
        pBox.ondragenter = function () {
            console.log('我进入了 = 光标');
        }
        // dragleave
        pBox.ondragleave = function () {
            console.log('我离开了 = 光标');
        }

        pBox.ondragover = function () {
            // 阻止默认行为
            return false
        }

        // drop
        pBox.ondrop = function () {
            console.log('我完全进入了');
        }

7、其他事件 ：就是不在我们分类中的一些事件

=>selectstart：是一个框选事件，比如复制东西的时候框选

注意：这个事件添加给document

=>visibilitychange  ：可视窗口发生改变以后触发

        ->可视窗口由可见变成不可见，由不可见变成可见

        ->这个事件添加给document

        ->有一个属性：docunment.visibilitystate  ===hidden  visible

        // selectstart
        document.onselectstart = function(){
            console.log(111);
            // 不让框选
            // return false
        }

        // visibilitychange
        document.onvisibilitychange =function(){
            console.log(222);
        }

四、事件对象

1、含义：当你触发了一个事件以后，对该事件的一些详细的描述信息。就存储在事件对象中；

                每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象；

2、如何获取事件对象

=>标准浏览器

        +就是在事件处理函数的小括号中书写一个变量

        +这个变量我们一般叫做： e 或者 ev

=>IE低版本

        +在我们IE低版本中是不认识e,有专业的书写方式

        +写法：window.event

=> 兼容性写法：e = e || window.event

        // 标准浏览器
        box.onclick = function(e){
            console.log(e);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
        }


    //低版本
        // 标准浏览器
        box.onclick = function(e){
            e = e || window.event
            console.log(e);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
        }

3、事件对象的信息之鼠标事件

常见的坐标点:分为三组==client、offset、page

       =>client：获取到的值是相对于可视窗口左上角的距离

        ->获取X轴方向的

        +语法：事件对象.clientX

        ->获取Y轴方向的

        +事件对象.clientY

        box.onclick = function(e){
            // 事件对象兼容
            e = e || window.event
            console.log(e.clientX); //200
            console.log(e.clientY); //202
        }

        =>offset：当前元素左上角

         ->获取X轴方向的

        +语法：事件对象.offsetX

        ->获取Y轴方向的

        +事件对象.offsetY

        =>page：相对于文档流的左上角

        ->获取X轴方向的

        +语法：事件对象.pageX

        ->获取Y轴方向的

        +事件对象.pageY

4、事件对象内的信息-键盘事件

第一个：你按下的是那个按键（每一个按键都是有一个编码值的）

        获取值：语法：事件对象.keyCode

        返回值：就是按键对应的值

第二个：你按下的是不是组合键

        =>altKey

       =>shiftKey

        =>ctrKey

        =>win键：如果是windows系统 min键，如果是MAC，则是：command

注意：以上这几个组合键的返回值都是布尔值，按下==true,没有按下==false

        var inp = document.querySelector('input')
        // 按键
        inp.onkeydown = function(e){
            e = e || window.event
            console.log(e.keyCode) //a==65
            console.log(e.shiftKey); //true/false

            if(e.keyCode === 65 && e.shiftKey){
                console.log('你输入正确了');
            }
        }

五、事件传播

1、含义：当事件触发以后或者是发生之后，事件的行为会沿着结构父级向上传播，直到window;

        如果在结构父级上也有同类型时间，就会被触发；

2、 事件执行的三个过程

        =>事件捕获：就是从window到事件目标的这个过程

       =>事件目标：就是准确触发事件的那个目标元素

        =>事件冒泡：就是从事件目标到window的过程

这三个过程，叫做事件流。

3、不同浏览器的执行结果

        =>标准浏览器：默认在冒泡阶段执行，但是保留了在捕获阶段执行的能力；

        +在捕获阶段执行，需要使用：dom 2级事件绑定，传递第三个参数，

        +默认是false，可以不写，表示在冒泡阶段执行，

        +默认选填是true,表示在捕获阶段执行

        =>IE浏览器：只支持在冒泡阶段执行，在捕获阶段不执行；

4、捕获阶段：从 window 的事件处理函数开始，依次向内，直到事件 目标 的事件处理函数执行，从上向下的执行事件处理函数；

5、冒泡阶段：从事件 目标 的事件处理函数开始，依次向外，直到 window 的事件处理函数触发，从下向上的执行事件处理函数；

6、阻止事件传播：不想要点击别的元素的时候触发冒泡

       =>标准浏览器  

        +语法：事件对象.stopPropagtion()

        +作用: 事件不管是 冒泡机制 还是 捕获机制 到自己位置, 不在继续传播了

        =>IE低版本

        +语法：事件对象.cancelBubble = ture

        +作用: 取消事件的冒泡

        =>兼容写法

        +try { } catch ( ) { }语法 ,用||会报错

        +首先会执行try后面的{ }内部代码

        +如果代码没有报错，那么catch就不执行了

        +如果代码报错了, 那么执行 catch 内部的代码

e = e || window.event    
try {
      // 当这里的代码报错的时候, 不会在控制台显示
      // 也不会阻断程序的继续执行
      // 而是把错误信息给到 err 参数
      // 继续去执行 catch 内的代码

      e..stopPropagtion()

     // console.log(abc)
    } catch(err) {

      e.cancelBubble = true
      //console.log('try 里面的代码报错了')
      //console.log(err)
    }

六、阻止默认行为 

1、默认行为的含义：就是不是我们设置的，天生自带的

2、常见的默认行为：

• 点击鼠标右键的时候，会自动弹出一个菜单      
• 点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面   
• form表单就有自动提交功能  

    这个时候我们需要进行阻止默认行为

3、如何阻止默认行为

        =>标准浏览器

        +语法：事件对象.preventDefault()

       =>IE低版本

        +语法：事件对象.returnValue = false

        =>兼容写法

        +try {事件对象.preventDefault()}

                catch(erro) {事件对象.returnValue = false}

        =>通用写法

                + return false

                +这个代码必须写在最后一行，必须保证前面的代码百分之一百没有错误；

        var a = document.getElementsByTagName('a')[0]

        a.onclick = function(e) {

            // 处理事件对象兼容
            e = e || window.event

            // 兼容
            // try {
            //     e.preventDefault()
            // } catch (err) {
            //     e.returnValue = false
            // }

            console.log('hello world')

            // 通用的方式
            return false

        }

七、事件委托

1、含义：就是把本应该添加给自身的事件，添加给结构上级，之后我们找到准确触发事件的目标元素，原理上就是冒泡；

2、解决办法：这种情况我们一般会就近找结构父级，若结构父级不满足，就找结构上级；

之后我们需要找到我们的目标元素==语法：事件对象.target

3、target

        =target 这个属性是事件对象里面的属性，表示你点击的目标

        =当你触发点击事件的时候，你点击在哪个元素上，target 就是哪个元素

        =这个 target 也不兼容，在 IE 下要使用 e.srcElement

  

    
1
    
2
    
3