事件类型事件类型

DOM树和DOM节点

DOM的遍历

DOM文档处理

BOM

• 含义
• 定时器
• 弹窗
• 地址栏
• 访问记录
• 浏览器版本信息

DOM事件

• 含义： 事件是由用户行为触发的代码

• 组成三要素

  1. 事件源： 给哪一个元素绑定事件
  2. 事件类型 对应的行为 click
  3. 事件处理函数 行为触发执行的函数

• 纯js的绑定方式

  • 事件源.on+事件类型 = 事件处理函数

• 事件类型

  • 鼠标事件
    • click 单击事件
    • dblclick 双击事件
    • mouseover 移入
    • mouseout 移出
    • mouseenter 移入
    • mouseleave 移出
    • mousemove 移动
    • mousedown 按下
    • mouseup 抬起
    • mousewheel 滚轮滚动
  • 键盘事件
    • keydown 按下
    • keyup 抬起
  • 浏览器事件
    • load 网页加载完成之后执行的事件
    • resize 窗口尺寸变化执行的事件

• 获取网页的尺寸

  • window.innerWidth
  • window.innerHeight

事件对象 event对象

• 含义： 获取事件执行的详细信息

• 获取event对象

  • 第一种方式每一个事件处理函数里面自带一个event
  • 第二种方式每一个事件处理函数默认的第一个形参就是event
  • 兼容性的获取 var 变量名 = event || e

• 四组坐标

  • offetX offsetY 鼠标当前位置相对于事件源左上角点的坐标
  • clientX clientY 鼠标当前位置相对于浏览器左上角点的坐标
  • pageX pageY 鼠标当前位置相对于页面左上角点的坐标
  • screenX screenY 鼠标当前位置相对于屏幕左上角点的坐标

• 判断键盘按下的按键

  • 根据event对象里面keyCode(键盘码)来判断的
  • enter键 13
  • 空格键 32

• 判断键盘的组合键

  • ctrlKey
  • altKey
  • shiftKey
  • 当按住组合键不松开 再按其他键的时候 上面key值为true

• 判断鼠标滚轮滚动的方向