事件

2017-07-11 本文已影响0人刘晓洋

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;

事件