JavaScript事件

---

JavaScript事件

博客

一、鼠标事件

• click 鼠标左键点击
• dblclick 鼠标左键双击
• contextmenu 鼠标右键
• mousedown 鼠标按下
• mouseup 鼠标抬起
• mousemove 鼠标移动
• mouseover 鼠标移入
• mouseout 鼠标移出
• mouseenter 鼠标移入
• mouseleave 鼠标移出
  …

二、键盘事件

• 解盘事件不是所有元素都能触发，一般是 可以聚焦的元素 或者 window 或者 document

• window 表示当前浏览器、document表示当前页面

• keydown 键盘按下

• keyup 键盘抬起 （只要是键盘上的按钮按下都触发）

• keypress 键盘按下 （能真实嵌入进入的按键才会触发该事件）

三、浏览器事件

• 由浏览器的行为触发的
• load 加载 （页面所有资源加载完毕后触发）
• resize 窗口尺寸改变 （只要浏览器可视窗口发生改变就会触发）
• scroll 滚动条滚动 （只要浏览器滚动条滚动就触发，不管是横向还是纵向）
  …

四、表单事件

• input 输入事件

• change 改变事件

• focus 聚焦事件

• blur 失焦事件

• submit 表单提交事件

  • 绑定在 form 标签上
  • 通过你点击 submit 按钮来触发

• reset 表单重置事件

  • 绑定在 form 标签上
  • 通过你点击 reset 按钮来触发
    …

五、触摸事件

• 用于移动端的事件，只能在移动端使用
• touchstart 触摸开始（手指头碰到屏幕瞬间）
• touchmove 触摸移动 （手指头在屏幕上移动）
• touchend 触摸结束 （手指头离开屏幕的瞬间）

六、其他事件

• 各种各样的事件

  • 每一个事件都不一定是绑定在谁的身上,有的事件只能绑定在 window 身上,有的事件只能绑定在 document 身上, 有的事件只能绑定在 元素 身上

• transitionend 事件

  • 过渡动画结束的时候触发
  • 注意: 这个事件是你过渡多少个属性, 那么在过渡结束的时候就会触发多少次

• animationend 事件

  • 帧动画结束的时候触发
  • 特殊的绑定方式

• selectstart 事件

  • 当你想要框选文本内容的时候触发

• visibilitychange 事件

  • 当你切换页面的时候触发
  • 离开当前页面, 回到当前页面
  • 注意: 只能绑定在 document 身上
    …

七、事件监听器

  另一种绑定事件的方式
  绑定事件有两种方式

  dom0级事件： 元素.on事件类型 = 事件处理函数
  dom2级事件： 元素.addEventListener('事件类型'， 事件处理函数)
  ⚠️：IE绑定 dom2级事件使用 attachEvent() 这个方法，元素.addEventListener('on事件类型'， 事件处理函数)

1. dom0级 和 dom2级 的区别

• dom0级事件只能绑定一个事件处理函数
• dom2级事件可以绑定多个事件处理函数，并且在触发事件的时候， 每一个事件处理函数都会触发

2. dom2级事件在不同浏览器的区别：

addEventListener()

     - 绑定的时候事件类型不需要 on

      - 至少两个参数

     - 顺序绑定顺序执行

     - 标准浏览器使用

     - 解除绑定使用 removeEventListener

attachEvent()

     - 绑定的时候事件类型需要 on

      - 只有两个参数

     - 顺序绑定倒序执行

     - IE 低版本使用

     - 解除绑定使用 detachEvent

八、事件侦听器的特殊事件类型

transitionend、animationend

• 这两个事件只能使用事件侦听器的方式来进行绑定
• 不能使用 on事件类型 的方式进行绑定

transitionend 事件

• 是当元素触发过渡动画的时候
• 在过渡动画结束以后触发的事件
• 注意: 这个事件是你过渡多少个属性, 那么在过渡结束的时候就会触发多少次