JS事件

事件流

事件

事件就是在变成时系统内发生的动作或者发生的事情

• 单击
• 双击
• 鼠标放置
• 表单内容发生变化
• 拖拽
• 页面滚动
• 触发/失去焦点
• 键盘按下
• 提交表单
• ......

JS 中事件就是一个对象

DOM事件流

• 三个阶段
  • 事件捕获阶段，处于目标阶段，事件冒泡阶段
  • image.png
  • 在捕获阶段和冒泡阶段分别可以对事件进行监听

事件监听函数

• 当事件发生时执行的函数
• 三种绑定方法
  1. 在 html 中绑定，尽量不用
     • <div onclick="sayHello">点我</div>
  2. 给 dom 元素的 onclick 赋值
     • $btn.onclick = function(e){console.log('点我')}
     • 这个写法只能点击一次触发一次，相当于更改属性绑定的函数，那么每次点击的时候，只能触发一次属性
  3. 调用 dom 的 addEventListener 函数
     • $btn.addEventListener('click', function(e){console.log('点我')}, true)
     • 使用这个函数的一个好处就是，可以给一个元素绑定多个事件监听，即便是这个事件是相同事件，也可以点击一次多次触发，因为它写的方式就是调用函数，函数是可以多次调用的

addEventListener

• target.addEventListener(type, listener, options)
  • type：事件类型
  • listener：事件处理方法
  • options：可选，默认全是 false。{capture：是否捕获阶段监听，once：是否只监听一次，passive：是否忽略 preventDefault}
• target.addEventListener(type, listener, useCapture)
  • useCapture：可选，true表示在捕获阶段调用 listener，false表示在冒泡阶段处理
• target.removeEventListener
  • target.removeEventListener('click', handler)
  • target.removeEventListener('click', handler, true)

阻止事件传播

• e.stopPropagation()
• 我们知道事件触发分为捕获阶段和冒泡阶段，并且会着一执行对应的事件，当我们在其中一个事件监听的时候，使用阻止事件传播，那么后续的事件就不会进行下去。

$('.child').addEventListener('click', function(e){
    console.log('事件开始处理')
    e.stopPropagation()
}, true)

阻止默认事件

• e.preventDefault()
  • 链接不自动跳转
  • 表单不自动提交
• 与passive选项的关系
  • 移动端滚动性能优化

事件代理

什么是事件代理

• 事件绑定代理给父元素，由父元素根据事件来源统一处理
• 适用于可能会新增子元素场景
• 事件代理实际上是事件冒泡的应用

为什么用事件代理

• 我们又一系列的子元素，这些子元素都有相类似的事件，我们在刚开始就给这些元素添加这些事件
• 但是后面通过其他方式创建的新元素没有这些事件，只能在创建之后还给这个元素新添事件
• 换一个思路：我们部不对单个元素添加绑定，而是注意到父元素上，使用冒泡原理，将事件绑定在父元素上面
• 事件具有一个path属性，通过这个path属性，可以拿到对应的对象
• image.png

常见事件

• click：点击
• dblclick：双击左键
• mouseover：鼠标悬停，如果悬停在孩子身上就不执行
• mouseout：鼠标离开，离开到孩子身上，会执行
• mouseenter：只执行一次，如果里面是孩子，也只执行一次，更符合我们的预期
• mouseleave：只执行一次，如果里面是孩子，也只执行一次，更符合我们的预期
• hover：鼠标悬停事件
• focus：一般是表单拿到焦点
• blur：一般是表单失去焦点
• keyup：按键松开，使用起来并不方便
• keydown：按键按下，使用起来并不方便
• change：使用起来比较方便，内容变化就触发
• submit：form表单的提交事件
• scroll：滚动页面窗口的时候
• resize：调整页面大小的时候
• window.onload：资源全部加载完毕的时候
• DOMContentLoaded：页面的DOM全部加载完毕之后
• $('img').onload：图片加载完毕事件