JS事件操作

事件

用于处理用在网页中的行为

语法：

标签.on事件类型 = 一段函数代码/函数名

一、事件类型

1、鼠标类型

click
dblclick
contextmenu
mouseover  mouseenter
mouseout   mouseleave
mousedown   
mouseup
mousemove
mousewheel

2、键盘类

keydown keyup keypress

3、表单类

focus
blur
change
input
submit

submit的事件源是form标签，点击提交按钮的时候会触发

4、window窗口类

load
scroll
resize

二、事件流

概念：事件从开始触发到执行结束的整个过程

3个阶段：

• 捕获阶段：从window向内找目标元素的过程
• 目标阶段：找到目标元素后，执行的他的事件函数
• 冒泡阶段：从目标元素向外到window离开的过程

注意：父标签的事件会在子标签事件的冒泡阶段执行

三、事件侦听器

概念：另外一种事件绑定方式

语法：

标签.addEventListener(事件类型, 事件函数, 是否在捕获阶段执行)

优点：

1. 可以让当前事件在子标签事件的捕获阶段执行
2. 可以让标签绑定多个同类型的事件，并一起出发

事件解绑：

什么叫解绑？将事件删除掉

为什么解绑？因为事件绑定后会一直保存在内存中，浪费了内存空间

如何解绑？

on事件类型绑定的事件，解绑方式：标签.on类型 = null

事件侦听器绑定的事件，解绑方式：标签.removeEventListener(事件类型, 绑定的事件函数)

注意：当事件侦听器绑定的函数是匿名函数就无法解绑了

四、事件对象

概念：事件函数中系统内置了一个用于记录事件所有信息的对象

获取事件对象：

标签.on类型 = function(e) {
    e就是事件对象
}

标签.on类型 = function() {
    window.event是事件对象
}

作用：

• 获取鼠标按键码 - 事件对象.button

  0表示左键；1表示滚轮；2表示右键

• 获取事件类型 - 事件对象.type

• 获取键盘按键码 - 事件对象.keyCode

  回车键：13

  空格键：32

  上下左右：38 40 37 39

  组合键：返回布尔值，表示这几个键是否跟其他键组合使用了

  ​ 事件对象.shiftKey

  ​ 事件对象.altKey

  ​ 事件对象.ctrlKey

• 获取鼠标位置

  • 相对事件源的位置

    事件对象.offsetX
    事件对象.offsetY
    

  • 相对当前浏览器可视窗口

    事件对象.clientX
    事件对象.clientY
    

  • 相对于整个网页文档

    事件对象.pageX
    事件对象.pageY
    

• 获取精准的事件目标元素

  事件对象.target
  

• 阻止事件冒泡

  事件对象.stopPropagation()
  事件对象.cancelBubble = true
  

• 阻止默认行为

  事件对象.preventDefault()
  事件对象.returnValue = false
  

四、事件委托

概念：将子标签事件委托父标签处理

原理：利用事件冒泡

关键代码：获取精准的目标元素，进行判断

好处：

1. 减少回流，减少绑定次数
2. 动态添加的子标签也能有事件