JS里面的事件

概念：事件就是按照我们约定好的方式去处理一个已经发生的行为
事件三要素：

元素 -> 事件源： 绑定在谁身上的事件
事件 -> 事件类型： 绑定一个什么事件
执行函数 -> 事件处理函数： 当事件触发的时候执行的函数

常见的事件类型（在JS事件里面，没有大写字母）

1. 鼠标事件

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

2. 键盘事件
因为键盘事件, 没有办法确定我是在某一个元素上按下的键盘
所以一般来说我们的键盘事件绑定在 表单元素 或者 document 上

keydown 键盘按下（- 中文输入法下的时候， 你没有确定选中文字也会触发）
keyup 键盘抬起
keypress 键盘按下（- 中文输入法下的时候， 你没有确定选中文字不会触发）

3. 浏览器事件

load 加载完毕（- 当页面有图片等外部资源时， 要等这些资源加载完毕）
resize 窗口改变（- 当滚动条滚动的时候， 不管滚动多少少都会触发， 一直滚动一直触发）
scroll 滚动条滚动（- 只要改变， 不管改变多少都会触发， 一直改变一直触发）

4. 表单事件
专门给 form 标签和 input 标签 和 textarea 标签 和 select 标签 使用的

focus 聚焦事件
blur 失焦事件
input 输入事件
change 改变事件（- 表单失焦的时候判定一次， 如果和聚焦的时候内容不一样就会触发）
submit 提交事件 (- 需要绑定在 <form> 标签上， 当点击表单里面的 提交 按钮时触发)
reset 重置事件 (- 需要绑定在 <form> 标签上， 当点击表单里面的 重置 按钮时触发

)

5. 移动端触摸事件

touchstart 触摸开始(手放在屏幕上的时候)
touchmove 触摸移动(手在屏幕上移动)
touchend 触摸结束(手离开屏幕的时候)

6. 其他事件

transitionend 过渡动画结束 需要特殊的绑定方式（- 你一共过渡多少个属性， 就触发多少回）
animationend 帧动画结束 需要特殊的绑定方式（- 你一共让多少个属性出现动画， 就触发多少回）
selectstart 开始框选文本
事件对象

概念： 就是一个保存了本次事件的描述信息的对象数据类型
当你触发事件的时候, 浏览器会帮我们记录好这些内容
在每一个事件触发的时候都应该有一些描述性的信息
=> 触发的什么事件
=> 触发的哪一个元素身上的事件
=> 鼠标事件的时候, 光标坐标点时什么
=> 键盘事件的时候, 按下的时哪一个按键
当我们把这些信息放在一个 对象 里面的时候
我们管这个对象叫做 事件对象
事件对象: 就是一个保存了本次事件的描述信息的对象数据类型
当你触发事件的时候, 浏览器会帮我们记录好这些内容
你只要获取到事件对象, 去里面进行查看就可以了

获取事件对象

标准浏览器 => 直接在事件处理函数的时候接收一个形参的形式
      box.onclick = function (e) {}
      e => 就是一个形参, 你可以写 event 或者 ev 或者 e
        => 会在事件触发的时候, 由 浏览器 给我们传递实参
        => 我们直接在事件处理函数里面使用 e 就可以了
        => 得到的就是事件对象(里面包含本次事件的一些描述信息)
        => 所有事件都有事件对象
    IE 低版本 => 要使用 window.event 来获取
      直接在事件处理函数里面使用 window.event 来获取
    兼容方式
      接收形参 e
      在事件处理函数里面写 e = e || window.event
      给形参 e 进行重新赋值
      赋值的内容, 如果有实参, 就使用实参, 如果没有, 就使用 window.event
事件对象属性

光标坐标点属性

button： 决定的是你按下的是鼠标的哪一个按键
clientX 和 clientY： 光标点相对于浏览器可视窗口左上角的坐标点
pageX 和 pageY： 光标点相对于文档流左上角的坐标点
offsetX 和 offsetY： 光标点相对于元素坐上做的坐标点

键盘事件

事件对象里面的信息 - 键盘事件
键盘事件里面的主要信息就是
1. 你按下的是哪一个按键
我们键盘上每一个按键都有一个自己的编码
我们就是通过事件对象里面的编码来确定你按下的是哪一个按键
获取编码的信息由两个
e.keyCode 标准浏览器
e.which 火狐 < 20 的版本
兼容处理
var code = e.keyCode || e.which
2. 你按下的是不是组合按键
在事件对象里面有四个属性
shiftKey 判断 shift 按键
ctrlKey 判断 ctrl 按键
altKey 判断 alt 按键
metaKey (不兼容, IE 没有) 判断 win 按键
他们四个的值都是布尔值
默认是 false, 表示没有按下
当你按下去的时候, 他们会变成 true, 表示按下了
我们在判断组合按键的时候
只要多判断一个属性是不是 true 就能知道你按下的是不是组合按键

// 1. 获取元素
    var inp = document.querySelector('input')
    // 2. 判断组合按键
    inp.onkeydown = function (e) {
      // 处理事件对象兼容
      e = e || widnow.event
      // 处理键盘编码兼容
      var code = e.keyCode || e.which
      // 判断按下的是组合按键
      if (code === 65 && e.shiftKey === true && e.ctrlKey === true && e.altKey === true) {
        alert('您按下的是 shift + ctrl + alt + a')
      }
    }
绑定事件

绑定事件有两种方式
1、dom0级事件： 元素.on事件类型 = 事件处理函数

box.onclick = function (e) {
}

2、dom2级事件： 元素.addEventListener(‘事件类型’， 事件处理函数)

box.addEventListener(‘click’, function (e) {
})

不同浏览器的 dom2级
标准浏览器：

box.addEventListener(‘click’, function (e) {
})

低版本 IE

box.attachEvent(‘onclick’, function (e) {
})

dom0级 和 dom2级 的区别

dom0级 事件, 只能给一种事件绑定一个事件处理函数
    因为是 = 赋值, 当你给他第二个值的时候, 第一个就被覆盖了

  dom2级 事件, 可以给一种事件绑定多个事件处理函数
    当事件触发的时候都会执行

  dom2级 事件中, addEventLister 和 attachEvent 的区别
    addEventListener
      1. 使用在标准浏览器
      2. 事件类型位置不需要 on
      3. 至少两个参数, 一个是事件类型, 一个是事件处理函数
      4. 当你给一个事件注册多个事件处理函数的时候
        顺序注册, 顺序执行
    attachEvent
      1. 使用在 IE 低版本浏览器
      2. 事件类型位置需要 on
      3. 只有两个参数, 一个是事件类型, 一个是事件处理函数
      4. 当你给一个事件注册多个事件处理函数的时候
        顺序注册, 倒叙执行
事件解绑

标准浏览器

box.removeEventListener(‘click’, 事件处理函数）

低版本 IE

box.detachEvent(‘onclick’, 事件处理函数)
解绑事件

dom0级 事件解绑
元素.on事件类型 = null

box.onclick = null

dom2级 事件解绑
元素.removeEventListener(‘事件类型’, 要移除的事件处理函数)
元素.detachEvenbt(‘on事件类型’, 要移除的事件处理函数)

解绑 dom2级 事件
如果你要解绑某一个元素的 dom2级 事件
那么你必须在注册的时候就给他单独写成一个函数的形式
使用函数名去进行绑定
使用函数名去进行解绑

事件的传播

当你在一个元素上触发行为的时候
你这个行为会按照元素 结构父级 的顺序, 逐层 向上 传播
就相当于在父级身上也触发了这个行为
就相当于在父级的父级身上也触发了这个行为
直到 window 为止, 都触发了同样的行为

点击事件java 点击事件js_事件模块

事件的目标

目标: 当事件触发, 事件处理函数执行的时候, 准确触发事件的那个元素
按照现在的页面结构来看
当你点击 inner 的时候, 根据事件的传播, 会触发 window 身上的点击事件
当你点击 center 的时候, 根据事件的传播, 会触发 window 身上的点击事件
当你点击 outer 的时候, 根据事件的传播, 会触发 window 身上的点击事件
…
当 window 的点击事件触发的时候
是因为点击了谁, 而触发的
是因为点击自己触发的, 还是因为点击某一个子元素, 通过传播来触发的
准确触发事件的元素, 我们叫做事件的 目标
获取事件的目标, 在 事件对象 里面有记录
事件对象就是一个对象数据结构, 里面记录了本次事件的信息

事件目标的获取

标准浏览器

center.onclick = function (e) {
  e = e || window.event
  console.log(e.target)
}

低版本 IE

center.onclick = function (e) {
  e = e || window.event
  console.log(e.srcElement)
}

兼容写法

var target = e.target || e.srcElement
事件的冒泡和捕获

冒泡: 按照从 目标 到 window 的顺序来执行所有的同类型事件
捕获: 按照从 window 到 目标 的顺序来执行所有的同类型事件
怎么让事件按照冒泡或者捕获的顺序执行
IE 低版本只能按照冒泡的顺序执行, 没有办法设置捕获
标准浏览器, 通过 addEventListener 的第三个参数来决定是冒泡还是捕获
第三个参数, 是 布尔值
默认是 false, 表示冒泡
选填是 true, 表示捕获(一般很少使用)

阻止事件传播

当你不希望事件传播的时候， 我们可以在事件处理函数里面阻止一下

在事件对象里面有两种方式阻止事件传播

  1. 标准浏览器： e.stopPropagation()
center.onclick = function (e) {
  e = e || window.event
  e.stopPropagetion()
}
  1. 低版本 IE： e.cancelBubble = true
center.onclick = function (e) {
  e = e || window.event
  e.cancelBubble = true
}
事件委托

事件委托： 利用事件的冒泡， 把子元素的事件绑定在一个共同的父元素身上
优点：
1、减少元素的事件绑定
2、减少 dom 操作， 提高性能
3、对于新添加进来的元素也可以执行事件， 不需要从新绑定

浏览器的默认行为

浏览器默认行为
不需要绑定, 浏览器天生自带的一个行为
表单提交: 不需要绑定提交时间, 只要点击 submit 按钮, 会自动提交跳转页面
a 超链接: 不需要绑定点击事件, 只要点击 a 标签就会跳转连接
鼠标右键: 不需要绑定右键单击事件, 只要你单击鼠标右键, 就会出现一个菜单
文本选中: 不需要绑定选中事件, 只要你框选, 就会选中页面中的文本内容

阻止浏览器默认行为
    1. e.preventDefault()     标准浏览器
    2. e.returnValue = false  IE 低版本
    3. 通用的方法 return false
移入移除问题

mouseover 和 mouseenter 的区别
mouseover 和 mouseout 的移入移出会向上传播
mouseenter 和 mouseleave 的移入移出不会向上传播