事件 & this

一、事件

1. 绑定事件（JS）
   1. 一个事件只绑定一个处理函数

      元素.on事件名=function(){...}

   2. 一个事件绑定多个处理函数

      元素.addEventListener("事件名",原事件处理函数)

   3. 移除一个事件监听

      元素.removeEventListener("事件名",原事件处理函数对象)

2. 事件模型
   1. 捕获
   2. 目标触发
   3. 冒泡
3. 事件对象
   1. 获得事件对象

      元素.on事件名=function(){...}

   2. 阻止冒泡

      e.stopPropagation()

   3. 多个元素绑定相同事件，用冒泡/事件委托3步

      a. 事件只在父元素上绑定一次
      b. e.target代替this
      c. 判断e.target的任意特征是否是我们想要的元素

   4. 阻止元素默认行为

      e.preventDefault()

   5. 获取鼠标位置

      a. 相对于屏幕左上角的x，y坐标: 
      	e.screenX,  e.screenY
      b. 相对于文档显示区左上角的x，y用坐标:  
      	e.clientX,  e.clientY
      c. 相对于事件所在元素左上角的x，y坐标: 
      	e.offsetX   e.offsetY

   6. 页面滚动事件

      window.onscroll=function(){
        var scrollTop=document.documentElement.scrollTop||
      			document.body.scrollTop
        //如果scrollTop>多少，就执行xx操作
        //否则就恢复原样
      }

二、this

this只看调用时

1. obj.fun()
    this->obj
2. fun() 或 (function(){ ... })() 或 多数回调函数
    this->window
3. new Fun()
    this->new正在创建的新对象
4. 类型名.prototype.共有方法=function(){ ... }
    this->将来谁调用指谁，同第一种情况
5. 事件处理函数中的this->当前正在触发事件的DOM元素对象