事件上

cancer
158 阅读5分钟

事件概述

事件是指对应的某个操作被处罚执行某个内容，这个流程指代事件。

事件的相关名词

  • 触发者（被监听器）
  • 监听者
  • 事件名
  • 处理

案例

我去按摩店去点88技师，服务员告诉我88号上钟去了，告诉我需要等待。我就跟老板说行等他下钟让他过来，等他下钟了我又点了他

  • 触发者（88号是否下钟）
  • 监听者（我）
  • 事件名 （等待执行被按摩的操作）
  • 处理（我点了他）

事件是不能知道他的执行时机的，所以他是异步的.

示例

点击按钮打印按钮被点击了

image.png

  • 触发者（btton）
  • 监听者（js引擎）
  • 事件名（click）
  • 处理（函数打印 被点击了）

对应的处理函数中的this是指向其触发者

事件声明方式

  • 内嵌在标签呢内 （内联模式）
- <button onclick="console.log('内联模式'）">点击 </button>
  • js中书写（脚本模式）
- //获取元素
var btn=document.querySelector（'button'）
btn.onclick=function(){
console.log('脚本模式'）
}
两者相关区别

使用内联模式，属于会显示到页面上，需要主动调用函数，里面的处理相当于是在全局执行的 对应的函数中的this指向window

使用脚本模式 赋值的时间属性 并不会显示到页面上 （而是进行对象属性储存）对应的脚本模式是使用事件驱动处理函数执行不需要主动调用，里面的this会指向对应的触发的元素（添加属性的对象）

不管是内联还是脚本 都会覆盖之前的相关属性内容（只允许一个事件具备一个函数）

事件名及事件分类

事件完整脚本写法
element.on+事件名=handler
事件分类

鼠标事件（大部分以mouse 开头） 键盘事件 （以key开头） HTML

鼠标事件的相关事件名

  • click 点击事件

  • dblcick 双击事件

  • mousedown 鼠标按下事件

  • mouseup 鼠标移进

  • mouseenter 鼠标移除

  • mouseleave 鼠标移进

  • mouseover 鼠标移进

  • mouseout 鼠标移出

  • mousemove 鼠标移动事件

  • contextmenu 右键点击 （菜单栏）

image.png

冒泡机制指的是事件从触发元素开始向父级元素逐级传播的过程。（从触发的元素开始一层一层向上传播）

注意事项

事件执行顺序

鼠标按下---鼠标弹起---鼠标点击---鼠标双击

键盘事件相关事件名
  • keydown 键盘按下
  • keyup 键盘弹起
  • keypress 字符键按下

image.png

HTML相关事件的事件名

window 的事件

  • load 所有内容加载、 DOMContentLoaded （ 等待dom加载）
  • beforeunload 卸载之前 （浏览器关闭之前）
  • close 浏览器关闭
  • scroll 滚动栏滚动
  • afterprint 、 beforeprint 打印之前及之后
  • error 发生错误

表单相关事件

focus 获取焦点事件 blur 失去焦点事件 select 内容选择事件 change value 值修改事件 input 内容输入事件 reset 重载事件 submit 提交事件

image.png

image.png

image.png

事件的处理函数内传递的参数

处理函数也是一个函数所以他也具备arguments这个伪数组，通过arguments这个伪数组我们可以接收到对应的一个event对象。而这个event对象是时间在调用的时候传递给我们的一个对象，我们可以通过arguments[0]来访问这个对象，也可以通过形参接收实参的方法来访问。这个event对象具备兼容问题的 所以我们需要兼容写法。鼠标触发的对象和键盘触发的对象的类型一致，意味着他们里面的内容也不一致，但由于他们都是event类型所以他们具备部分一致的属性。

image.png

event

概述

event是一个事件源对象，它储存了事件执行中的相关内容（如鼠标点击的坐标位，键盘按下的建等等）

event对象的相关内容 （标识※表示共有）

pointerEvent对象的重点属性

  • X坐标 ，y坐标 （兼容问题）
  • pageX 在页面的横坐标、pageY在页面的纵坐标 （包含不可视部分宽度（滚动栏））
  • clientX 在页面上的横坐标、clientY 在页面上的纵坐标（不包含不可视部分的距离）
  • screenX 在屏幕上的横坐标、screenY在屏幕上的纵坐标
  • offsetX 偏移自身的横坐标、offsetY 偏移自身的纵坐标 鼠标基于当前自身这个添加的事件元素偏移位置

image.png

  • button按钮
  • type 类型 *
  • bubbles 是否冒泡 *
  • ctrlKey 是否按下ctrl *
  • shiftKey 是否按下shift *
  • altKey 是否按下alt *
  • target 当前触发的实际元素 *
  • currentTarget 当前添加的事件的元素

image.png

keyboarEvent对象的重点属性

  • key区别大小的键值
  • keyCode 对应的键的ascii码 （只有keypress事件才区分大小写 不然是大写）
  • charCode 对应的字符键的ascii码 （只有keypress事件采用值 不然值为0）
  • code 按下的键的字符串

image.png

事件委托（事件代理）

将事件绑定在其父元素上(将事件委托给父元素)，利用target来找实际的目标元素进行相关的操作

事件委托的步骤

  • 将事件委托给它的父元素 （key是跨级的父元素）
  • 利用event.target 来判断对应的触发元素（对应触发元素进行操作）
  • 利用event.target 对应触发元素进行操作

示例 正常写法

image.png

事件委托写法

image.png

事件委托的优势
  • 减少了内存的占用，提高了效率
  • 动态添加事件 （简化了dom节点更新时，相应事件的更新）
事件委托的缺点
  • 没有冒泡机制的事件无法处理
  • 如果嵌套过深的HTML代码，效率和性能比较低
avatar
文章
阅读
粉丝