事件 (01)

一.事件的绑定方式

1. 动态绑定 (推荐) (必须全局)
2. 内联模式绑定 <button onclick=fu(123)>点击</button>
   (内联模式绑定的函数,必须是全局)

二. 事件分类

1. 鼠标事件
   onclick 单击
   ondblclick 双击
   onmousedown 鼠标按下去
   onmosueup 鼠标抬起
   onmouseenter 鼠标进入
   onmouseleave 鼠标离开
   onmousemove 鼠标移动
   onmouseover 鼠标进入(遇到子元素也会触发)
   onmouseout 鼠标离开(遇到子元素也会触发)
   onmousewheel 鼠标滚轮事件

2. 键盘事件
   onkeydown 键盘按下
   onkeypress 字符键
   onkeyup 键盘抬起

3).html事件
onload dom树结构加载完成,并外部资源也要加载完成才触发
DOMContentLoaded 它只需要 dom树结构加载完成 触发
onunload 卸载事件 刷新页面,关闭页面的那瞬间触发
onresize 改变窗口大小
onwheel 滚轮事件

4. input相关的事件
   onselect 选中文本内容事件,松开鼠标触发
   onfocus 光标聚焦事件
   onblur 失去焦点事件
   oninput 输入事件,触发过于频繁,集合 debounce(防抖)

5. 表单事件
   onsubmit 表单提交事件,要绑定给form表单,
   并结合 retrun false 阻止表单体默认提交行为
   onreset 重置

6. onscroll 滚动条事件

关于防抖 节流

• 1防抖 debounce
  引入了 lodash后,就能使用 _.debounce(函数,时间);
  防抖:最后一次生成,减少执行次数
• 2节流: throttle

debounce(防抖)与throttle(节流)的区别?

• 1 共同点
  减少执行频率
• 2不同点:
  防抖:最后一次生成,减少执行次数
  节流:稀释执行的次数 ,原来要执行10次,现在变成了3次