事件、事件绑定、事件对象、默认行为

最新推荐文章于 2022-10-01 15:33:48 发布

Lele___

最新推荐文章于 2022-10-01 15:33:48 发布

阅读量307

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Lele___/article/details/111867642

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件

事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的时间都会被触发执行。

浏览器赋予元素的事件行为：
鼠标事件：
- click 点击事件（PC端：频繁点击N次，触发N次点击事件）单击事件（移动端：300ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端会有300ms延迟）。click在移动端第一次点完，会等300ms如果这段时间内发生了第二次点击，算作双击事件。
- dbclick 双击事件
- contextmenu 鼠标右键点击触发
- mousedown 鼠标按下
- mouseup 鼠标抬起
- mousemove 鼠标移动
- mouseover 鼠标滑入
- mouseout 鼠标滑出
- mouseenter 鼠标进入
- mouseleave 鼠标离开
- mousewheel 鼠标滑轮滚动
- …
键盘事件
- keydown 键盘按下
- keyup 键盘抬起
- keypress 长按（除了shift/fn/capsLock键之外）
- …
- 手指事件
  [Touch Event 但手指事件模型]
  - touchstart 手指按下
  - touchmove 手指移动
  - touchend 手指松开
    [Gesture Event 多手指事件模型]
- 表单事件
  - focus 获取焦点
  - blur 失去焦点
  - submit 点击表单提交（前提：表单元素都包含在form中，并且点击按钮是submit）
  - reset 表单重置（前提：表单元素都包含在form中，并且点击按钮是reset ）
  - select 下拉框内容选中
  - change 内容改变
  - input 移动端经常使用，监控文本框内容随着输入的改变而触发
  - …
- 资源事件
  - load 加载成功（window.onload/img.onload）
  - error 加载失败
  - beforeunload 资源卸载之前（页面关闭之前触发）- …
- CSS3动画事件
  - transitionend transition动画结束
  - transitionstart transition动画开始
  - transitionrun transition动画运行中
  - …
- 视图事件
  - resize 元素（浏览器）大小改变
  - scroll 滚动条滚动
  - …
- …

事件绑定

给元素默认的事件行为绑定方法，这样在行为触发的时候，执行这个方法。

1.DOM0级事件绑定

语法：元素.on[事件] = [函数]
document.body.οnclick=function(){}
移除绑定：赋值为null或者其他非函数值皆可。
document.body.οnclick=null
原理：每一个DOM元素的私有属性上都有很多类似“onxxx”的私有属性，我们给这些代表事件的私有属性赋值，就是DOM0事件绑定；
特点：如果没有对应事件的私有制[例如：DOMContenLoaded] 则无法基于这种办法实现事件绑定；只能给当前元素的某个事件行为绑定一个方法，绑定多个方法，最后一个操作会覆盖以往的；
好处是执行效率快，而且开发者使用起来方便；

2.DOM2级事件绑定

语法：[元素].addEventListenner([事件],[方法],[捕获/冒泡]) document.body.addEventListenner=(‘click’,fn1,false)
移除：[元素].removeEventListenner([事件],[方法],[捕获/冒泡])
但是需要参数和绑定的时候一样document.body.removeEventListenner=(‘click’,fn1,false)
原理：每一个DOM元素都会基于__proto__，查找到EventTarger.prototype上的addEventListenner/removeEventListenner等方法，基于这些方法实现事件的绑定和移除。主要目的是方便移除事件绑定的时候使用。
特点：DOM2事件绑定，绑定的方法一般不是匿名函数，主要目的是方便移除事件绑定的时候使用；凡是浏览器提供的事件行为，都可以基于这种模式完成事件的绑定和移除（例如window.addEventListener(‘DOMContentLoaded’),fn1,false）；可以给当前元素的某个事件类型绑定多个不同的方法（进入到事件池），这样事件行为触发，会从事件池中依次按照顺序取出对应的方法然后执行；

事件对象

存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关）。
给当前元素的某个事件行为绑定方法，当事件行为触发，不仅会把绑定的方法执行，而且还会给方法传递一个实参，而且这个实参就是事件对象。

鼠标事件对象 MouseEvent
- clientX/clientY 鼠标触发点距离当前窗口的X/Y轴的值
- pageX/pageY 鼠标触发点距离body的X/Y轴的值
- type 事件类型
- target/srcElement 获取当前事件源（当前操作的元素）
- path 传播的路径
- ev.preventDefault()/ ev.returnValue = false 阻止默认行为
- ev.stopPropagation()/ ev.cancelBubble = true阻止冒泡传播
- …
键盘事件对象 KeyboardEvent
- key / code 存储按键名字
- which / keyCode 获取按键的键盘码
  - 方向键左37 上38 右39 下40
  - Space 32
  - BackSpace 8
  - Del 46 MAC电脑中没有BackSpace，delete键是8
  - Enter 13
  - Shift 16
  - Ctrl 17
  - Alt 18
  - …
- altKey 是否按下alt键（组合按键）
- ctrlKey 是否按下ctrl键（组合按键）
- shiftKey 是否按下shift键（组合按键）
手指事件对象 TouchEvent
- changedTouches / touches / targetTouched 都是用来记录手指的信息的。平时常用的是changedTouches
  - 手指按下、移动、离开屏幕 changedTouches 都存储了对应的手指信息，哪怕离开屏幕后，存储的也是最后一次手指在屏幕中的信息；而touches 在手指离开屏幕后，就没有任何信息了；获取的结果都是一个TouchList集合，记录每一根手指的信息；
- ev.changedTouches [0] 第一根手指信息
  - clientX / clientY
  - pageX / pageY
  - …
普通事件对象 Event

默认行为

默认行为：浏览器会赋予元素很多默认的行为操作
- 鼠标右键菜单
- 点击A标签实现页面跳转（页面跳转、锚点定位）
  - 点击A标签，先触发其点击事件行为，然才是默认的跳转
  - href =“javascript:;”
  - ev.preventDefault()
  - return false;
- 不分浏览器会记录输入记录，在下一次的时候有模糊匹配
- 键盘按下去会输入内容
  我们可以基于ev.preventDefault()来禁用这些默认行为
禁用右键菜单（后续可能改为自己的菜单）