js事件

js中事件的三要素：

事件源  事件类型  事件处理

  网页上有一个广告，点击右上角的x，广告关闭了。事件源是 右上角的x  事件类型是点击  事件处理：广告关闭

  事件源：引发后续事件的HTML标签。
  事件类型：比如点击，双击，鼠标移入移出等等
  事件处理：一个函数（对DOM进行操作。）

  书写一个事件的步骤:
    1.获取事件源
    2.指定事件的类型
    3.书写一个函数，处理对应的事件。

事件类型可以分为这么几大类：

  1.鼠标事件
  2.键盘事件
  3.浏览器事件
  4.表单事件
  5.触摸事件（移动端）
  6.其他事件

  鼠标事件：
    click：鼠标左键单击
    dblclick:鼠标左键双击
    contextmenu:鼠标右键单击
    mousedown:鼠标按下(只要是鼠标上的按键都可以)
    mouseup:鼠标抬起
    mousemove:鼠标移动
    mouseover:鼠标移入
    mouseout:鼠标移出
    mouseenter:鼠标移入
    mouseleave:鼠标移出

键盘事件

  只有部分表单元素（有选中效果） document,window

    keydown 键盘按下
    keyup 键盘抬起
    keypress 键盘按下  输入的内容必须与按下的键是一样的。
   

浏览器事件：

 事件源是window
  load：页面加载完毕
  scroll：滚动
  resize：窗口大小
  offline:网络断开
  online:网络恢复

表单事件：

 表单元素的事件

  change:表单内容改变
    表单元素失去焦点时，如果内容发生了变化，则触发该事件。
  input:
    表单输入事件,只要在表单中输入内容就会触发（包括删除键）
  focus：
    获取焦点事件
  blur：
    失去焦点事件
  
  整个表单事件

  submit：
    表单提交事件 点击提交按钮时触发。
  reset：
    表单重置事件  点击重置按钮时触发。

绑定事件的方式：

1.直接绑定匿名函数
      元素节点.on+事件类型 = function(){
        对事件的处理
      }
    
    2.先定义函数，再绑定。
    元素节点.on+事件类型 = 函数名
    【注意】后面跟的是函数名，不是函数执行，不要写成 函数名（）

    3.行内式(不推荐)
    在标签中直接绑定事件  on+事件类型 = '函数名（）'

    4.事件监听

    addEventListener()
      只能在标准浏览器下使用，IE8以下不兼容。
      可以给一个事件源添加多个同一类型的事件处理函数。
      多个事件处理函数，执行顺序为绑定顺序，从上到下。

    事件源.addEventListener('事件类型',事件处理函数)

    attachEvent()
      IE低版本使用
      语法：
        事件源.attachEvent('on+事件类型',事件处理函数)

解绑：

  1.赋值式
    直接用null将之前的事件函数覆盖掉即可。
  2.事件监听
    一个事件源可以绑定多个事件，解绑时，也要一个一个解绑。

  语法：
    事件源.removeEventListener('事件类型',要解绑的事件函数)
  
  【注意】如果需要解绑事件，则绑定事件时，不要使用匿名函数。而是定义一个函数，使用函数名绑定，使用函数名解绑。

事件对象：

 当我们触发了一个事件之后，对该事件的一些描述信息被包装成了一个对象。
  
  每一个事件都有一个对应的对象来描述事件的信息，这个对象就叫做事件对象。

  每一个事件的处理函数中，默认都有一个实参，这个实参就是这个事件的事件对象。


  获取事件对象：
    标准浏览器： 直接在事件处理函数上定义一个形参。
      会在事件触发时，自动接收事件对象作为实参。
    
    IE低版本：
      不需要定义形参。 需要使用window.event 

    兼容：
      ev = ev || window.event;

鼠标事件对象：

  对象包含：属性，函数

  button：
    表示按下是哪一个键。
    0:左键
    1：中键/滑轮键
    2：右键

  获取当前鼠标位置：(位置的圆点不一样)
    clientX clientY   可视窗口的左上角
    pageX pageY  整个页面的左上角（滚动条隐藏的部分也会计算）
    screenX screenY （了解） 电脑屏幕的左上角
    offsetX offsetY 光标触发事件的元素的左上角 (点在哪个盒子上，圆点就是那个盒子的左上角。)

js获取元素的尺寸：

  尺寸：内容+padding+border

  两种方法：
    offsetWidth offsetHeight
    
    内容+padding+border

    语法：元素.offsetWidth / 元素.offsetHeight
    【注意】display:none 之后 获取的值为0；

  clientWidth clientHeight
    只计算  内容+padding

  两组方法差别在于：client方法不计算border