第十六章事件

Girasoless

已于 2022-11-30 14:13:18 修改

阅读量247

点赞数

文章标签： javascript 开发语言 ecmascript

于 2022-11-24 10:56:06 首次发布

本文链接：https://blog.csdn.net/Girasoles/article/details/127993494

版权

一、事件的含义以及组成

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 draggable="true">div</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

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
  	var oUl = docuemnt.querySelector('ul')
    
    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
     
      // 判断你点击的是 li
      if (target.nodeName.toUpperCase === 'LI') {
      	// 确定点击的是 li
        // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL'
        // 去做点击 li 的时候该做的事情了
        console.log('我是 li，我被点击了')
      }
    })
  </script>
</body>