我们原来学过DOM,DOM是解决文档里元素关系的一套模式,其实那只是DOM的第一个版本解决的问题。在DOM的第二个版本里,解决的问题就不仅仅是文档里元素之间的关系里,还把DOM元素的事件问题重新给了一套解决方案,这套方案就叫“DOM二级事件”。
DOM二级事件解决了原来的同一事件绑定多个处理方法时,后面的绑定会覆盖前面的绑定的问题,如:
ele.οnclick=fn1
ele.οnclick=fn2;
这样处理的结果就是,ele的onclick事件上,fn2方法把fn1方法给覆盖了,这样不容易实现在同一事件上绑定多个方法。
W3C给出的方法是这样的:
ele.addEventListener(“click”,fn,false);
IE6/7/8给出的方案是:
ele.attachEvent(“onclick”,fn);
解决标准浏览器和低版本的IE方案如下:事件绑定
function bind(ele,type,handler){
if(ele.addEventListener){//标准浏览器专用
ele.addEventListener(type,handler,false)
}else if(ele.attachEvent){//IE专用
ele.attachEvent("on"+type,handler);
}
}
移除事件绑定:
function unbind(ele,type,handler){
if(ele.removeEventListener){//标准流程器专用
ele.removeEventListener(type,handler,false)
}else if(ele.detachEvent){//IE专用
ele.detachEvent("on"+type,handler);
}
}
注意:虽然IE、火狐、chrome等浏览器都给出了DOM2级事件的处理方法,但IE的方法却存在着很多问题,并且非常严重。一是被绑定的方法在事件触发执行时,this关键字竟然是window,二是IE中被绑定到事件上的方法的执行顺序是混乱的。
在W3C的标准是在同一事件上,先绑定的方法先执行,并且不能重复绑定同一个方法在同一个事件上。但IE6/7/8中,如果绑定的方法少于9个,执行的顺序是相反的,超过9个,执行是混乱的。
这些IE中的这些问题都比较严重,我们必须解决好。
事件的兼容性问题总结(常见的)
· 事件对象本身:标准浏览器是事件发生时自动给方法传一个实参,这个实参就是事件对象。IE是全局的window.event
· 阻止事件传播:e.stopPropagation这个方法,IE是e.cancelBubble=true这个属性
· 阻止默认行为:e.preventDefault()方法,IE是e.returnValue=false;
· 事件源:e.target.IE是e.srcElement
· e.pageX,e.pageY,IE不支持这两个属性
· DOM二级的事件绑定:ele.addEventListener,IE是ele.attachEvent
· IE的attachEvent绑定的方法上:1、this不是当前的元素,2执行顺序是混乱的
DOM二级事件事件兼容性问题解决之一:解决this关键字
注意:以下代码中的handler是个形参,它可以表示不同的方法,所以不要把handler认为是某一个具体的方法。如果你bind(ele,”click”,fn1),则fn1是handler,如果bind(ele,”click”,fn2),则fn2是handler。新手一定要理解好把握好。
关键思路:关键是两个问题,一是理解好call的用途作用,二是理解好在一个程序里写的代码,是为了解决另外一个程序中的问题的这种思路。
我们修改一下bind这个方法
如果只是解决被绑定的方法的this指向,这倒好办,只需在IE的专用的代码里,帮如下修改即可
else if(ele.detachEvent){//IE专用
function fnTemp=function(){handler.call(ele)};//使用call方法,强制使handler方法在运行时this指向被绑定的ele这个DOM元素
ele.detachEvent("on"+type,fnTemp);//再绑定时,就不是直接绑定handler这个方法了,而是绑定经过“化装”的fnTemp这个方法
}
或直接这样写:
else if(ele.detachEvent){//IE专用
ele.detachEvent("on"+type,function(){handler.call(ele)});
}
这样确实在事件触发时,handler运行,并且让handler的this指向了被绑定的元素ele,但由于我们已经不是直接绑定的handler方法了,而是经过call“变形”后的fnTemp方法,那在移除绑定的时候,我们就没办法移除handler方法。
那我们怎么能找到这个化装之后fnTemp,并将其移除呢?这件事必须要在绑定事件的时候就要考虑好:在bind方法里,把fnTemp方法保存下来,并且还要能用某种方式识别出这个fnTemp方法是由那一个handler“变形”而来的。
这儿是个不好理解的难点,做这件事,我们需要两步:
【这儿两次都用到了对象的自定义属性,不好理解,望认真思考】
一、把fnTemp保存下来,不能用全局变量保存,因为容易被污染;保存在bind的某个变量里,局部变量在unbind这个作用域里也访问不到。在不同的作用域里,还能访问到一个非全局变量的值,那用什么呢?最方便的方式就是把fnTemp保存在ele这个DOM元素的属性上,因为这个ele是两个函数都要操作的引用类型的变量,那么我们在ele上定义一个自定义属性,那这个属性在bind和unbind两个作用域里都能访问的到。具体实现方式如下:
}else if(ele.attachEvent){//IE专用代码
if(!ele["aBind"+type]){//如果不存在这个属性,则创建一个
ele["aBind"+type]=[];//使用数组来保存被绑定到不同事件上的那些方法(相当的事件上,可能会被绑定很多个handler)
//这个属性是以aBind为前缀,以type为区分符的。Type是事件类型,这是一个非常重要的技巧,
}
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
ele["aBind"+type].push(tempFn);//把变形后的tempFn保存到这个数组里
ele.attachEvent("on"+type,tempFn);
}
补充:理解好ele["aBind"+type]=[]这个属性定义时,”aBind”这个字符串是个区别符的意思。先来看如果没有这个”aBind”会怎么样?那就定义成了ele[type]=[],如果type是”click”,则会出现ele.click=[],而ele本身就有click这个方法属性,我们是没办法修改这个原生属性的,这样定义就失效了。所以才给”click”前面加个”aBind”做为前缀,以避免或减少和原生的属性冲突。这种加前缀的技巧还是很常见的。
二、给tempFn再加一个自定义属性,用来标识当前这个tempFn是由handler“变形”而来的
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
tempFn.photo=handler;//我们通过tempFn的photo这个属性,就可以分辨出tempFn这个方法是由那个handler变形而来的。Photo这个属性只是在这儿定义,而使用它是在unbind函数里。
三、还要强调一个DOM2级事件绑定编程的原则,即:一个函数不能被重复绑定在同一个事件上。比如:不能把fn1这个函数重复绑定给ele的click事件:
ele.addEventListener(“click”,fn1,false);
ele.addEventListener(“click”,fn1,false);//绑定两次或多次,但是事件触发时,后面的绑定是无效的。
当然,低版的IE浏览器没有遵循这个原则,所以这儿还要解决一下这个问题,加一个判断即可(在ele)
for(var i=0;i<ele["aBind"+type].length;i++){
if(ele["aBind"+type][i].photo==handler){//如果数组里已经存在了经过化装的handler方法,则退出执行
return;//保证一个方法只能被绑定到某事件上一次
}
}
Bind方法完整的代码如下:
function bind(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false)
}else if(ele.attachEvent){
if(!ele["aBind"+type]){//如果不存在这个属性,则创建一个
ele["aBind"+type]=[];//这个属性是以aBind为前缀,以type为区分符的
}
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
tempFn.photo=handler//photo标识型的属性,用做和handler关联
for(var i=0;i<ele["aBind"+type].length;i++){
if(ele["aBind"+type][i].photo==handler){
return;//保证一个方法只能被绑定到某事件上一次
}
}
ele["aBind"+type].push(tempFn);
ele.attachEvent("on"+type,tempFn);
};
}
我们再来看unbind。该做的准备工作,都已经在bind里完成了。Unbind负责把绑定在事件上的方法移除,但现在已经不是移除handler这个方法了,而是移除经过化装后的这个方法,这个方法被保存在ele的"aBind"+type这个属性上。
我们知道ele["aBind"+type]这是个数组,先把它取到,赋给一个短变量a:var a=ele["aBind"+type]。操作a这个短变量比操作ele["aBind"+type]这个属性更方便。
然后遍历这个数组,逐个比较那个是经过化装的handler方法,当然比较的依据是photo这个属性,所以是:
1.for(var i=0;i<a.length;i++){//遍历
2. if(a[i].photo==handler){//通过photo属性做比较。在bind里定义的photo属性
3. ele.detachEvent("on"+type,a[i]);//把这个方法从事件移除
4. a.splice(i,1);//并且一定要把这个方法从数组里移除了,要不然下一次就不能再绑定了。
5. return ;//因为每一次绑定都是唯一的(这是原则,上边讲了),所以移除后直接结束这个函数的运行就可以了
}
}
解释第四行:用a.splice会造成“数组塌陷”,所以在正式的代码里,用a[i]=null来解决的。看下面代码的第10行。大家要注意上课时看老师的BUG测试演示。
完整的unbind代码如下:
1.function unbind(ele,type,handler){
2. if(ele.removeEventListener){//标准浏览器
3. ele.removeEventListener(type,handler,false);
4. }else if(ele.detachEvent){//IE浏览器
5. var a=ele["aBind"+type];//在bind里约定好的那个自定义
6. if(a){//如果存在这个数组
7. for(var i=0;i<a.length;i++){
8. if(a[i].photo==handler){//这里用了在bind里定义的photo属性
9. ele.detachEvent("on"+type,a[i]);
10. a[i]=null;//改进之后的,避免动态移除的时候会出问题
11. return ;
12. }
13. }
14. }
15. }
16.}
DOM二级事件事件兼容性问题解决之二:执行顺序问题
首先要明确的是在IE6/7/8中,如果一个事件上绑定多个方法,它的执行顺序是相反的或混乱的,这也是IE中另一个很严重的问题。
解决这个问题的原则,其实相当于把浏览器的事件机制给重写了一遍。
就是是把IE浏览器自己的那套事件机制抛弃了,然后自己构造一个可以按顺序执行的程序池(或叫程序清单也行),然后再编写一个run方法,让某个事件发生的时候,让run方法依次去遍历执行程序池里的那些方法。
比如,我们要给ele的click事件绑定fn1,fn2,fn3,fn4,fn5等若干个方法,我们不直接写成bind(ele,”click”,fn1)这样的方式,而是先创建一个数组,这个数组保存在ele的一个自定义属性上,以”aEvent”这个字符串为前缀,以事件类型为区分符(这个技巧在解决this指向的时候用过)。每绑定一个方法,我们就push进去一个。
伪代码如下:
var type=”click”
ele[”aEvent”+type]=[];
ele[”aEvent”+type].push(fn1);
ele[”aEvent”+type].push(fn2);
ele[”aEvent”+type].push(fn3);
ele[”aEvent”+type].push(fn4);
ele[”aEvent”+type].push(fn5);
那当事件发生的时候怎么去执行保存在这个ele[”aEvent”+type]的方法呢?
先定义一run方法,由这个run方法来负责去数组里遍历执行保存好的那些方法。
1.function run(){
2. var a=this["aEvent"+event.type];//这里的this是ele,因为run函数被绑定给了ele。
3. if(a){//为了确定代码不出意外,先判断一下数组是否存在
4. for(var i=0;i<a.length;i++){//遍历
5. a[i].call(this, event);//用call方法去调用执行,确保了数组里的方法的this是指向被绑定元素的。这是个不好理解的点。event是事件对象
6. }
7. }
8.}
然后真正绑定事件的时候,用上面写好的bind函数绑定这个run函数:
bind(ele,”click”,run);
这样,当click事件发生的时候,真正由事件触发而执行的函数其实是run(这里用的是浏览器的事件机制),而run再去数组里遍历执行保存下来的那些函数(这里就避开了浏览器的执行机制)。因为数组的循环执行是有序的,所以这个保存在数组里的方法肯定也是按顺序执行的。
只要理解了这儿,总体的思路就没有问题了,下面就是把代码写的更有通用性。
相对完整的代码如下:
先要写一个on方法,负责创建程序池,并且把需要绑定在事件上的方法保存在这个池子里:
function on(ele,type,handler){//订阅:产生一张清单
if(!ele["aevent"+type]){
ele["aevent"+type]=[];
}
var a=ele["aevent"+type];
for(var i=0;i<a.length;i++){
if(a[i]==handler)return;//避免重复绑定
}
a.push(handler);
bind(ele,type,run);//真正的绑定,虽然on方法会多次运行,但不会多次被绑定这个run方法,这是在bind函数里约定好的原则
}
function run(e){//这个负责通知:遍历那张清单并且执行
e=e||window.event;
var a=this["aevent"+e.type];//在on里产生的那个清单
//下面是解决兼容性问题的代码,这是个整体的事件解决方案
if(!e.stopPropagation){
e.stopPropagation=function(){e.cancelBubble=true;}
}
if(!e.preventDefault){
e.preventDefault=function(){e.returnValue=false}
}
if(typeof e.pageX=="undefined"){
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
}
if(typeof e.target =="undefined"){
e.target=e.srcElement;
}
if(a){
for(var i=0;i<a.length;i++){//遍历
a[i].call(this, e);//e是事件对象
}
}
}
拖拽的最基本原始代码
拖拽的基本原理:
拖拽是三种事件的组合
当鼠标按下时准备拖拽,当鼠标按着并且鼠标移动时进行拖拽,当鼠标松开时,结束拖拽。盒子是随着鼠标移动而移动的,鼠标移动多远它就移动多远。
鼠标移动的距离是=鼠标现在的位置-鼠标按下去的时的位置。
盒子移动的公式是:盒子现在的位置=盒子原来的位置(mousedown时的)+鼠标移动的距离
在学习这个案例的时候,一个是要把握好对this的理解和应用,另一个就是把握好对自定义属性的应用。
以下的代码,每个函数都是低耦合的,每一个函数里都不会出现具体的某一个被拖拽元素的变量名,而是灵活使用this关键字来获得被拖拽的元素。this的好处在这儿能很明显的体显出来。
把获得到的值保存在当前被拖拽的元素的自定义属性上,避免了全局变量容易被污染的问题。
var ele=document.getElementById('div1');
ele.οnmοusedοwn=down;
function down(e){//准备拖拽
this.x=this.offsetLeft;//先要把盒子的原始位置保存下来,保存到自定义属性x上
this.y=this.offsetTop;//把盒子的垂直坐标保存在this.y上
this.mx=e.clientX;
this.my=e.clientY;
this.οnmοusemοve=move;
this.οnmοuseup=up;
}
function move(e){
this.style.left=e.clientX-this.mx+this.x+"px";//当鼠标移动时,重新计算盒子的坐标
this.style.top=e.clientY-this.my+this.y+"px";
}
function up(){//当鼠标按键抬起的时候,结束拖拽
this.οnmοusemοve=null;//把事件属性清空
this.οnmοuseup=null;
}
经过优化和改进之后的拖拽代码
ele.οnmοusedοwn=down;
/*
因为在下面的拖拽里经常需要让事件绑定的方法在运行的时候,this关键字指向被拖拽的元素,所以把这段经常被重复利用的逻辑封装成一个小方法。
目的就是让fn方法在运行的时候,功能不变,但this指向指定的对象obj。
*/
function processThis(obj,fn){//这个函数一定要理解好
return function(e){fn.call(obj,e);} //返回这个方法。事件在绑定的时候,其实是绑定的这个方法,而运行的时候,其实还是运行fn这个方法
}
function down(e){
e=e||window.event;
this.x=this.offsetLeft;
this.y=this.offsetTop;
this.mx=e.clientX;
this.my=e.clientY;
if(this.setCapture){//
this.setCapture();//专门处理mousemove事件的方法,使DOM元素不能丢失鼠标。目前IE和FireFox支持此方法
this.οnmοusemοve=move;
this.οnmοuseup=up;
}else{//chrome浏览器,把给document绑定mousemove事件.只有文档这个大容器不会丢掉鼠标。
//var that=this;//这是开始用的技巧,注意体会对this的处理
//this.MOVE=function(e){move.call(that,e)}
//this.UP=function(e){up.call(that,e)}
//document.οnmοusemοve=this.MOVE;
//document.οnmοuseup=this.UP;
document.οnmοusemοve=processThis(this,move);//用了上边定义的这个方法
document.οnmοuseup=processThis(this,up)
}
}
function move(e){
e=e||window.event;
this.style.left=e.clientX-this.mx+this.x+"px";
this.style.top=e.clientY-this.my+this.y+"px";
}
function up(){
if(this.releaseCapture){
this.οnmοusemοve=null;
this.οnmοuseup=null;
this.releaseCapture();
}else{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
附录:写在HTML标签里的事件是如何被浏览器解析并执行的
比如HTML代码如下:
<div id="div1" οnclick=”fn()” onClick="fn.call(this,event)" onClick="fn(event)" >
这里面写的三种格式,是为了对比
</div>
写在HTML代码里的事件绑定,相当于把事件后边的字符串当参数,传给 new Function("fn()"),相当于生成了这样一个方法:function(){fn();}
div1.οnclick=function(){fn();}
FireFox里生成的匿名方法是这样的
div1.οnclick=function(event){fn(event);}
这个function(event){}匿名方法才是直接被绑定到click事件上的方法,它形式参数名叫event。而fn是在匿名方法里被调用(invoke),如果fn需要事件对象,则必须传实参:就是event.
只有一个方法,直接被绑定给事件才不需要传实参
DOM二级事件解决了原来的同一事件绑定多个处理方法时,后面的绑定会覆盖前面的绑定的问题,如:
ele.οnclick=fn1
ele.οnclick=fn2;
这样处理的结果就是,ele的onclick事件上,fn2方法把fn1方法给覆盖了,这样不容易实现在同一事件上绑定多个方法。
W3C给出的方法是这样的:
ele.addEventListener(“click”,fn,false);
IE6/7/8给出的方案是:
ele.attachEvent(“onclick”,fn);
解决标准浏览器和低版本的IE方案如下:事件绑定
function bind(ele,type,handler){
if(ele.addEventListener){//标准浏览器专用
ele.addEventListener(type,handler,false)
}else if(ele.attachEvent){//IE专用
ele.attachEvent("on"+type,handler);
}
}
移除事件绑定:
function unbind(ele,type,handler){
if(ele.removeEventListener){//标准流程器专用
ele.removeEventListener(type,handler,false)
}else if(ele.detachEvent){//IE专用
ele.detachEvent("on"+type,handler);
}
}
注意:虽然IE、火狐、chrome等浏览器都给出了DOM2级事件的处理方法,但IE的方法却存在着很多问题,并且非常严重。一是被绑定的方法在事件触发执行时,this关键字竟然是window,二是IE中被绑定到事件上的方法的执行顺序是混乱的。
在W3C的标准是在同一事件上,先绑定的方法先执行,并且不能重复绑定同一个方法在同一个事件上。但IE6/7/8中,如果绑定的方法少于9个,执行的顺序是相反的,超过9个,执行是混乱的。
这些IE中的这些问题都比较严重,我们必须解决好。
事件的兼容性问题总结(常见的)
· 事件对象本身:标准浏览器是事件发生时自动给方法传一个实参,这个实参就是事件对象。IE是全局的window.event
· 阻止事件传播:e.stopPropagation这个方法,IE是e.cancelBubble=true这个属性
· 阻止默认行为:e.preventDefault()方法,IE是e.returnValue=false;
· 事件源:e.target.IE是e.srcElement
· e.pageX,e.pageY,IE不支持这两个属性
· DOM二级的事件绑定:ele.addEventListener,IE是ele.attachEvent
· IE的attachEvent绑定的方法上:1、this不是当前的元素,2执行顺序是混乱的
DOM二级事件事件兼容性问题解决之一:解决this关键字
注意:以下代码中的handler是个形参,它可以表示不同的方法,所以不要把handler认为是某一个具体的方法。如果你bind(ele,”click”,fn1),则fn1是handler,如果bind(ele,”click”,fn2),则fn2是handler。新手一定要理解好把握好。
关键思路:关键是两个问题,一是理解好call的用途作用,二是理解好在一个程序里写的代码,是为了解决另外一个程序中的问题的这种思路。
我们修改一下bind这个方法
如果只是解决被绑定的方法的this指向,这倒好办,只需在IE的专用的代码里,帮如下修改即可
else if(ele.detachEvent){//IE专用
function fnTemp=function(){handler.call(ele)};//使用call方法,强制使handler方法在运行时this指向被绑定的ele这个DOM元素
ele.detachEvent("on"+type,fnTemp);//再绑定时,就不是直接绑定handler这个方法了,而是绑定经过“化装”的fnTemp这个方法
}
或直接这样写:
else if(ele.detachEvent){//IE专用
ele.detachEvent("on"+type,function(){handler.call(ele)});
}
这样确实在事件触发时,handler运行,并且让handler的this指向了被绑定的元素ele,但由于我们已经不是直接绑定的handler方法了,而是经过call“变形”后的fnTemp方法,那在移除绑定的时候,我们就没办法移除handler方法。
那我们怎么能找到这个化装之后fnTemp,并将其移除呢?这件事必须要在绑定事件的时候就要考虑好:在bind方法里,把fnTemp方法保存下来,并且还要能用某种方式识别出这个fnTemp方法是由那一个handler“变形”而来的。
这儿是个不好理解的难点,做这件事,我们需要两步:
【这儿两次都用到了对象的自定义属性,不好理解,望认真思考】
一、把fnTemp保存下来,不能用全局变量保存,因为容易被污染;保存在bind的某个变量里,局部变量在unbind这个作用域里也访问不到。在不同的作用域里,还能访问到一个非全局变量的值,那用什么呢?最方便的方式就是把fnTemp保存在ele这个DOM元素的属性上,因为这个ele是两个函数都要操作的引用类型的变量,那么我们在ele上定义一个自定义属性,那这个属性在bind和unbind两个作用域里都能访问的到。具体实现方式如下:
}else if(ele.attachEvent){//IE专用代码
if(!ele["aBind"+type]){//如果不存在这个属性,则创建一个
ele["aBind"+type]=[];//使用数组来保存被绑定到不同事件上的那些方法(相当的事件上,可能会被绑定很多个handler)
//这个属性是以aBind为前缀,以type为区分符的。Type是事件类型,这是一个非常重要的技巧,
}
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
ele["aBind"+type].push(tempFn);//把变形后的tempFn保存到这个数组里
ele.attachEvent("on"+type,tempFn);
}
补充:理解好ele["aBind"+type]=[]这个属性定义时,”aBind”这个字符串是个区别符的意思。先来看如果没有这个”aBind”会怎么样?那就定义成了ele[type]=[],如果type是”click”,则会出现ele.click=[],而ele本身就有click这个方法属性,我们是没办法修改这个原生属性的,这样定义就失效了。所以才给”click”前面加个”aBind”做为前缀,以避免或减少和原生的属性冲突。这种加前缀的技巧还是很常见的。
二、给tempFn再加一个自定义属性,用来标识当前这个tempFn是由handler“变形”而来的
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
tempFn.photo=handler;//我们通过tempFn的photo这个属性,就可以分辨出tempFn这个方法是由那个handler变形而来的。Photo这个属性只是在这儿定义,而使用它是在unbind函数里。
三、还要强调一个DOM2级事件绑定编程的原则,即:一个函数不能被重复绑定在同一个事件上。比如:不能把fn1这个函数重复绑定给ele的click事件:
ele.addEventListener(“click”,fn1,false);
ele.addEventListener(“click”,fn1,false);//绑定两次或多次,但是事件触发时,后面的绑定是无效的。
当然,低版的IE浏览器没有遵循这个原则,所以这儿还要解决一下这个问题,加一个判断即可(在ele)
for(var i=0;i<ele["aBind"+type].length;i++){
if(ele["aBind"+type][i].photo==handler){//如果数组里已经存在了经过化装的handler方法,则退出执行
return;//保证一个方法只能被绑定到某事件上一次
}
}
Bind方法完整的代码如下:
function bind(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false)
}else if(ele.attachEvent){
if(!ele["aBind"+type]){//如果不存在这个属性,则创建一个
ele["aBind"+type]=[];//这个属性是以aBind为前缀,以type为区分符的
}
var tempFn=function (){handler.call(ele);}//变形这个方法,让这个方法运行的时候this指向被绑定的元素
tempFn.photo=handler//photo标识型的属性,用做和handler关联
for(var i=0;i<ele["aBind"+type].length;i++){
if(ele["aBind"+type][i].photo==handler){
return;//保证一个方法只能被绑定到某事件上一次
}
}
ele["aBind"+type].push(tempFn);
ele.attachEvent("on"+type,tempFn);
};
}
我们再来看unbind。该做的准备工作,都已经在bind里完成了。Unbind负责把绑定在事件上的方法移除,但现在已经不是移除handler这个方法了,而是移除经过化装后的这个方法,这个方法被保存在ele的"aBind"+type这个属性上。
我们知道ele["aBind"+type]这是个数组,先把它取到,赋给一个短变量a:var a=ele["aBind"+type]。操作a这个短变量比操作ele["aBind"+type]这个属性更方便。
然后遍历这个数组,逐个比较那个是经过化装的handler方法,当然比较的依据是photo这个属性,所以是:
1.for(var i=0;i<a.length;i++){//遍历
2. if(a[i].photo==handler){//通过photo属性做比较。在bind里定义的photo属性
3. ele.detachEvent("on"+type,a[i]);//把这个方法从事件移除
4. a.splice(i,1);//并且一定要把这个方法从数组里移除了,要不然下一次就不能再绑定了。
5. return ;//因为每一次绑定都是唯一的(这是原则,上边讲了),所以移除后直接结束这个函数的运行就可以了
}
}
解释第四行:用a.splice会造成“数组塌陷”,所以在正式的代码里,用a[i]=null来解决的。看下面代码的第10行。大家要注意上课时看老师的BUG测试演示。
完整的unbind代码如下:
1.function unbind(ele,type,handler){
2. if(ele.removeEventListener){//标准浏览器
3. ele.removeEventListener(type,handler,false);
4. }else if(ele.detachEvent){//IE浏览器
5. var a=ele["aBind"+type];//在bind里约定好的那个自定义
6. if(a){//如果存在这个数组
7. for(var i=0;i<a.length;i++){
8. if(a[i].photo==handler){//这里用了在bind里定义的photo属性
9. ele.detachEvent("on"+type,a[i]);
10. a[i]=null;//改进之后的,避免动态移除的时候会出问题
11. return ;
12. }
13. }
14. }
15. }
16.}
DOM二级事件事件兼容性问题解决之二:执行顺序问题
首先要明确的是在IE6/7/8中,如果一个事件上绑定多个方法,它的执行顺序是相反的或混乱的,这也是IE中另一个很严重的问题。
解决这个问题的原则,其实相当于把浏览器的事件机制给重写了一遍。
就是是把IE浏览器自己的那套事件机制抛弃了,然后自己构造一个可以按顺序执行的程序池(或叫程序清单也行),然后再编写一个run方法,让某个事件发生的时候,让run方法依次去遍历执行程序池里的那些方法。
比如,我们要给ele的click事件绑定fn1,fn2,fn3,fn4,fn5等若干个方法,我们不直接写成bind(ele,”click”,fn1)这样的方式,而是先创建一个数组,这个数组保存在ele的一个自定义属性上,以”aEvent”这个字符串为前缀,以事件类型为区分符(这个技巧在解决this指向的时候用过)。每绑定一个方法,我们就push进去一个。
伪代码如下:
var type=”click”
ele[”aEvent”+type]=[];
ele[”aEvent”+type].push(fn1);
ele[”aEvent”+type].push(fn2);
ele[”aEvent”+type].push(fn3);
ele[”aEvent”+type].push(fn4);
ele[”aEvent”+type].push(fn5);
那当事件发生的时候怎么去执行保存在这个ele[”aEvent”+type]的方法呢?
先定义一run方法,由这个run方法来负责去数组里遍历执行保存好的那些方法。
1.function run(){
2. var a=this["aEvent"+event.type];//这里的this是ele,因为run函数被绑定给了ele。
3. if(a){//为了确定代码不出意外,先判断一下数组是否存在
4. for(var i=0;i<a.length;i++){//遍历
5. a[i].call(this, event);//用call方法去调用执行,确保了数组里的方法的this是指向被绑定元素的。这是个不好理解的点。event是事件对象
6. }
7. }
8.}
然后真正绑定事件的时候,用上面写好的bind函数绑定这个run函数:
bind(ele,”click”,run);
这样,当click事件发生的时候,真正由事件触发而执行的函数其实是run(这里用的是浏览器的事件机制),而run再去数组里遍历执行保存下来的那些函数(这里就避开了浏览器的执行机制)。因为数组的循环执行是有序的,所以这个保存在数组里的方法肯定也是按顺序执行的。
只要理解了这儿,总体的思路就没有问题了,下面就是把代码写的更有通用性。
相对完整的代码如下:
先要写一个on方法,负责创建程序池,并且把需要绑定在事件上的方法保存在这个池子里:
function on(ele,type,handler){//订阅:产生一张清单
if(!ele["aevent"+type]){
ele["aevent"+type]=[];
}
var a=ele["aevent"+type];
for(var i=0;i<a.length;i++){
if(a[i]==handler)return;//避免重复绑定
}
a.push(handler);
bind(ele,type,run);//真正的绑定,虽然on方法会多次运行,但不会多次被绑定这个run方法,这是在bind函数里约定好的原则
}
function run(e){//这个负责通知:遍历那张清单并且执行
e=e||window.event;
var a=this["aevent"+e.type];//在on里产生的那个清单
//下面是解决兼容性问题的代码,这是个整体的事件解决方案
if(!e.stopPropagation){
e.stopPropagation=function(){e.cancelBubble=true;}
}
if(!e.preventDefault){
e.preventDefault=function(){e.returnValue=false}
}
if(typeof e.pageX=="undefined"){
e.pageX=(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;
e.pageY=(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;
}
if(typeof e.target =="undefined"){
e.target=e.srcElement;
}
if(a){
for(var i=0;i<a.length;i++){//遍历
a[i].call(this, e);//e是事件对象
}
}
}
拖拽的最基本原始代码
拖拽的基本原理:
拖拽是三种事件的组合
当鼠标按下时准备拖拽,当鼠标按着并且鼠标移动时进行拖拽,当鼠标松开时,结束拖拽。盒子是随着鼠标移动而移动的,鼠标移动多远它就移动多远。
鼠标移动的距离是=鼠标现在的位置-鼠标按下去的时的位置。
盒子移动的公式是:盒子现在的位置=盒子原来的位置(mousedown时的)+鼠标移动的距离
在学习这个案例的时候,一个是要把握好对this的理解和应用,另一个就是把握好对自定义属性的应用。
以下的代码,每个函数都是低耦合的,每一个函数里都不会出现具体的某一个被拖拽元素的变量名,而是灵活使用this关键字来获得被拖拽的元素。this的好处在这儿能很明显的体显出来。
把获得到的值保存在当前被拖拽的元素的自定义属性上,避免了全局变量容易被污染的问题。
var ele=document.getElementById('div1');
ele.οnmοusedοwn=down;
function down(e){//准备拖拽
this.x=this.offsetLeft;//先要把盒子的原始位置保存下来,保存到自定义属性x上
this.y=this.offsetTop;//把盒子的垂直坐标保存在this.y上
this.mx=e.clientX;
this.my=e.clientY;
this.οnmοusemοve=move;
this.οnmοuseup=up;
}
function move(e){
this.style.left=e.clientX-this.mx+this.x+"px";//当鼠标移动时,重新计算盒子的坐标
this.style.top=e.clientY-this.my+this.y+"px";
}
function up(){//当鼠标按键抬起的时候,结束拖拽
this.οnmοusemοve=null;//把事件属性清空
this.οnmοuseup=null;
}
经过优化和改进之后的拖拽代码
ele.οnmοusedοwn=down;
/*
因为在下面的拖拽里经常需要让事件绑定的方法在运行的时候,this关键字指向被拖拽的元素,所以把这段经常被重复利用的逻辑封装成一个小方法。
目的就是让fn方法在运行的时候,功能不变,但this指向指定的对象obj。
*/
function processThis(obj,fn){//这个函数一定要理解好
return function(e){fn.call(obj,e);} //返回这个方法。事件在绑定的时候,其实是绑定的这个方法,而运行的时候,其实还是运行fn这个方法
}
function down(e){
e=e||window.event;
this.x=this.offsetLeft;
this.y=this.offsetTop;
this.mx=e.clientX;
this.my=e.clientY;
if(this.setCapture){//
this.setCapture();//专门处理mousemove事件的方法,使DOM元素不能丢失鼠标。目前IE和FireFox支持此方法
this.οnmοusemοve=move;
this.οnmοuseup=up;
}else{//chrome浏览器,把给document绑定mousemove事件.只有文档这个大容器不会丢掉鼠标。
//var that=this;//这是开始用的技巧,注意体会对this的处理
//this.MOVE=function(e){move.call(that,e)}
//this.UP=function(e){up.call(that,e)}
//document.οnmοusemοve=this.MOVE;
//document.οnmοuseup=this.UP;
document.οnmοusemοve=processThis(this,move);//用了上边定义的这个方法
document.οnmοuseup=processThis(this,up)
}
}
function move(e){
e=e||window.event;
this.style.left=e.clientX-this.mx+this.x+"px";
this.style.top=e.clientY-this.my+this.y+"px";
}
function up(){
if(this.releaseCapture){
this.οnmοusemοve=null;
this.οnmοuseup=null;
this.releaseCapture();
}else{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
附录:写在HTML标签里的事件是如何被浏览器解析并执行的
比如HTML代码如下:
<div id="div1" οnclick=”fn()” onClick="fn.call(this,event)" onClick="fn(event)" >
这里面写的三种格式,是为了对比
</div>
写在HTML代码里的事件绑定,相当于把事件后边的字符串当参数,传给 new Function("fn()"),相当于生成了这样一个方法:function(){fn();}
div1.οnclick=function(){fn();}
FireFox里生成的匿名方法是这样的
div1.οnclick=function(event){fn(event);}
这个function(event){}匿名方法才是直接被绑定到click事件上的方法,它形式参数名叫event。而fn是在匿名方法里被调用(invoke),如果fn需要事件对象,则必须传实参:就是event.
只有一个方法,直接被绑定给事件才不需要传实参