事件

作者：Jason199

2022 年 6 月 23 日
本文字数：2509 字
阅读完需：约 8 分钟

了解事件

我们提前和浏览器约定好一些行为

当用户在浏览器触发这些行为的时候, 有一个事件处理函数执行

事件三要素

1. 事件源: 在谁的身上绑定事件

2. 事件类型: 什么事件

3. 事件处理函数: 当行为发生的时候, 执行哪一个函数

//举例 div.onclick = function () {}； div: 事件源(绑定在 div 身上的事件)； click: 事件类型；function () {}: 事件处理函数, 当行为发生的时候, 执行这个函数；

复制代码

事件绑定分类

1. dom0 级事件

事件源.onclick = function () {}

2. dom2 级事件

2-1. addEventListener()

标准浏览器使用

使用方法: 事件源.addEventListener('事件类型', 事件处理函数)

可以同时给一个事件类型绑定多个事件处理函数

多个事件处理函数的时候, 顺序绑定顺序执行

至少两个参数

2-2. attachEvent()

IE 低版本使用

使用方法: 事件源.attachEvent('on 事件类型', 事件处理函数)

可以同时给一个事件类型绑定多个事件处理函数

多个事件处理函数的时候, 顺序绑定倒叙执行

只有两个参数

这里大家一定要区别一下参数的个数问题；

 //CSS样式部分 <style>    div {      width: 200px;      height: 200px;      background-color: pink;    }  </style>

复制代码

第一件事就是要先获取元素

var div = document.getElementById('box')；

 //dom0级事件   div.onclick = function ()    { console.log('我被点击了');   }// 2-1. addEventListener()     div.addEventListener('click', function () {       console.log('你好 世界')     })    // 2-2. attachEvent()     div.attachEvent('onclick', function () {       console.log('你好 世界')     })

复制代码

事件的解绑

1. 解绑 dom0 级事件

赋值的行为执行过一次后，再次给他赋值为 null

2. 解绑 dom2 级事件

2-1. removeEventListener('事件类型', 要解绑的事件处理函数)

2-2. detachEvent('on 事件类型', 要解绑的事件处理函数)

注意: 如果你想解绑事件, 那么在你绑定事件的时候, 一定要把函数单独书写

写成一个具名函数的形式, 以函数名的形式绑定事件处理函数

3.绑定事件

向一个事件类型身上绑定多个事件处理函数的时候

click: [ 事件处理函数 1, 事件处理函数 2, 事件处理函数 3, ... ]

当行为触发的时候, 找到对应的这个数组, 循环遍历, 依次执行

当你解绑的时候, 就会循环遍历, 依次去比较, 找到一个一样的, splice()

div.addEventListener('click', function b() { console.log('hello world') })     btn.onclick = function () {      // 给 div 解绑 dom2级 事件      // 在解绑的时候, 你传递进去了一个 叫做 a 的函数      // 就要找到 div 身上有没有绑定一个叫做 a 的函数, 发现没有, 解绑不掉       div.removeEventListener('click', function a() { console.log('hello world') })      console.log('执行完毕解绑代码')     }

复制代码

封装事件绑定和解绑

1. 为什么要封装 ?

一是考虑到兼容问题，还有使用起来更方便

2. 封装需要几个参数 ?

事件源, 事件类型, 事件处理函数

手动抛出异常

使用方法: throw new Error('错误信息')

用代码的方式在控制台报错

一旦代码执行, 会直接中断程序

开始封装 1. 参数验证     1-1. ele 必传, 如果没有传递, 直接报错     1-2. ele 需要是一个 元素节点      节点类型, nodeType: 1     2. 兼容处理     2-1. if () {} else {}

复制代码

  //兼容处理    div.addEventListener()        div.attachEvent() //只要 元素 身上有这个函数, 就可以执行   //   没有这个函数就去换另一个函数试试        if (ele.addEventListener) {           ele.addEventListener(type, handler)         } else if (ele.attachEvent) {         ele.attachEvent('on' + type, handler)        } else {   //对象操作语法 - 点语法        ele.onclick = handler       //对象操作语法 - 数组关联语法        ele['onclick'] = handler             ele['on' + type] = handler         }        }

复制代码

事件对象

当一个事件触发的时候, 对本次事件的描述

例子: 键盘事件

当你在按下键盘的时候触发

需要记录一些信息

按下的是哪一个按键

你按下的是不是组合按键

如何获取事件对象

标准浏览器

在事件处理函数上接收一个形参

事件触发时, 浏览器自动传递实参

IE 低版本浏览器

不需要接收形参

直接使用 window.event

标准浏览器下也可以使用

书写一个兼容方式

=> e = e || window.event

// 0. 获取元素    var div = document.getElementById('box')
    // 1. 绑定事件     div.onclick = function (e) {       console.log(e)       console.log(window.event)       e = e || window.event      console.log(e)     }     div.addEventListener('click', function (e) {       console.log(e)     })    on(div, 'click', function (e) {      // 处理事件对象兼容      e = e || window.event      console.log(e)    })

复制代码

事件是 JavaScript 与网页结合的主要方式。虽然基本的事件都有规范定义，但很多浏览器在规范之外实现了自己专有的事件,大家要自己慢慢理解。好了今天就到这里吧这也是记录我写作的第二十天，慢慢坚持整理自己的思路一边后面更好的帮助大家理解 js。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/d5e0c27b107e25a4eb1a6fad0】。

Jason199

关注

还未添加个人签名 2022.04.29 加入

一条努力上岸的咸鱼

发布

暂无评论

创作场景

事件

事件三要素

事件绑定分类

事件的解绑

1. 解绑 dom0 级 事件

2. 解绑 dom2 级 事件

3.绑定事件

封装事件绑定和解绑

事件对象

如何获取事件对象

Jason199

评论

1. 解绑 dom0 级事件

2. 解绑 dom2 级事件