事件

1事件对象包含哪些信息: e

     *      e.clientX: 当前鼠标点击位置距离(浏览器)左上角的x轴坐标
     *      e.clientY: 当前鼠标点击位置距离(浏览器)左上角的y轴坐标
     *      e.pageX :  当前鼠标点击位置距离(页面body)左上角的x轴坐标
     *      e.pageY :  当前鼠标点击位置距离(页面body)左上角的y轴坐标
     *      ps: e.pageX和e.pageY在ie6-8中是不存在的
     *      e.pageX = e.clientX + (document.documentElement.scrollLeft||document.body.scrollLeft);
     *      e.type : 事件类型  点击事件：'click' 没有'on'
     *      e.preventDefault()  阻止默认行为
     *      e.returnValue = false; ie6-8阻止默认行为
     *      e.target 事件源： 真正触发事件的那个元素，比如：给body绑定一个事件。那么点击任何一个body内的后代元素都会触发body的click事件。而       e.target就是保存的就是真正点击的元素
     *      e.srcElement 在ie6-8中的事件源   window.event.target
     *      e.target = e.target || e.srcElement
     *      e.stopPropagation() 阻止事件传播
     *      e.cancelBubble = true; 在ie6-8中阻止事件冒泡传播
     *      冒泡传播 ： 从子元素传播到祖先元素

2常用事件

鼠标事件
onclick onmouseover onmouseout onmouseenter onmouseleave ondbclick...
系统事件
onload onscroll onresize...
表单事件
onfocus onblur
键盘事件
onkeydown onkeyup onkeypress...

3事件包含两种

• DOM0级事件：
  1）属于元素的私有属性
  2）只能发生在事件流的冒泡阶段
  3）给同一个元素同一个行为绑定相同的方法，之前的方法就会被覆盖；
• DOM2级事件：1)在元素所属的eventTarget这个类的原型上-公有方法2）
  标准浏览器：addEventListener(type,fn,false)
  事件对象:对当前行为的详细描述
  事件对象的兼容处理：e=e||window.event;
  1.type:当前所触发的行为-兼容
  2.clientX/Y:当前鼠标落脚点，距离可视区左上角的坐标位置-兼容
  3.pageX/pageY:当前鼠标落脚点，距离第一屏左上角的坐标位置-不兼容
  (document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
  4.e.keyCode:键码
  5.阻止默认事件：e.preventDefault? e.preventDefault(): e.returnValue=false;
  6.阻止冒泡 e.stopPropagation? e.stopPropagation(): e.cancelBubble=true;
  7.关联元素：
  onmouseover :e.fromElement||e.relatedTarget; if(!this.contains(oTo)){}
  onmouseout :e.toElement||e.relatedTarget; if(!this.contains(oTo)){}

4事件流：

第一种：事件流包含3阶段：1）捕获阶段 2）事件源 3）冒泡阶段
第二种：事件流包含2阶段：1）捕获阶段 2）冒泡阶段

5事件委托：

当一个容器中的n多个元素，都要发生某个行为的时候，我们可以把这个行为委托给他们共同的父级(父容器)；然后通过事件源做不同的区分；
事件委托->是对事件冒泡的典型运用；

6onmouseover和onmouseout：

问题：如果里面有子元素的话；会发生冒泡的问题，无法通过阻止冒泡来解决
其他解决措施：
1）onmosueenter 和 onmouseleave
2)用关联元素来解决：如果是关联元素，不做任何操作，如果不是关联元素，才写代码块；
oncontextmenu 阻止鼠标右键的
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+ e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+ e.clientY;

7拖拽思路

• 基本效果
  1.当鼠标按下的时候：保存元素的位置和鼠标落脚点
  2.当鼠标移动的时候：元素以前的位置+新的鼠标落脚点-以前的鼠标落脚点
  3.当鼠标抬起的时候：释放元素身上的onmousemove和onmouseup事件
• 兼容处理：
  因为当快速移动的时候，元素会失去焦点，导致拖拽无法正常进行
  标准浏览器下：document
  IE浏览器下：焦点捕获
  - 设置焦点 ele.setCapture()
  - 释放焦点 ele.releaseCapture();

IE事件库的问题：

• 1）顺序问题 2）重复绑定的问题 3）this问题：attachEvent绑定方法中，this指向window；而不是当前发生事件的这个元素；
• 封装兼容版事件库思路：
  1）浏览器的兼容处理：
  标准浏览器：ele.addEventListener(type,fn,false)
  IE浏览器：ele.attachEvent('on'+type,fn)
  2)标准浏览器下的DOM2级事件绑定：1）顺序 2）this指向当前元素 3）不会重复绑定
  IE下attachEvent存在的问题：1）顺序 2）this 3)重复绑定
  3）在IE浏览器下做兼容处理：
  this：把fn放在匿名函数中-》无法解除事件绑定
  放在私有变量中-》unbind中无法获取该私有变量
  ele.tmp=匿名函数->同一个属性名上只能存一个值；后面绑定的方法，覆盖前面绑定方法；
  把每个tmp都放进自己事件池：[]; ele[type+'aEvent']=[];
  -重复绑定的问题： 在放进自己的事件池之前，先检查自己事件池中是否重复；如果重复，既不放进自己事件池（过滤），也不放入系统事件池；
  -顺序问题：把所有click行为下要绑定的方法，都放进自己事件池，给系统事件池中只放了一个run方法（获取数组，顺序调用-判断为函数才能顺序调用）；
  解除绑定的时候，一定不能用splice；而要赋值为null;