一个事件可以绑定多个函数语句
一、同一个元素的同一个事件会覆盖,而绑定不会。
attachEvent(‘ on事件名 ’,执行语句);ie下
addEventListener(‘ 事件名’,执行语句,false);谷歌chrome
兼容函数封装
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('0n'+ev,fn);
}else{
obj.addEventListener(ev,fn,false);
}
}
二、绑定解除
detachEvent(事件名,执行语句)
实例1:高级拖拽-1
磁性吸附
问题:当页面中和div中有文字,在拖动的过程中会选中文字。
三、事件捕获(只有ie下才有)
div.setCapture 页面上的所有的事件都会集中在这个div中
div.releaseCapture释放事件捕获
高级拖拽-1 (兼容IE和Chrome、火狐,封装方法)
var div1 = document.getElementById('div1');
var disX =0,
disY = 0;
div1.onmousedown = function(e){
var oEvent = e ||event;
disX = oEvent.clientX - div1.offsetLeft;
disY = oEvent.clientY - div1.offsetTop;
if(div1.setCapture){
// IE下
div1.onmousemove= mouseMove;
div1.onmouseup = function(){//
this.onmousemove= null;
this.onmouseup = null;
this.releaseCapture();//鼠标松开的时候,捕获也取消,不然页面中其他标签的元素无法执行事件
};
div1.setCapture();//事件捕获
}else{
//chrome、火狐
document.onmousemove= mouseMove; //函数封装成了mouseMove
document.onmouseup = function(){//
this.onmousemove= null;
this.onmouseup = null;
};
}
};
function mouseMove(e){
var oEvent = e ||event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-disY;
if( l<0){
l = 0;
}else if(l> document.documentElement.clientWidth -div1.offsetWidth){
l= document.documentElement.clientWidth -div1.offsetWidth;
}
if(t<0){
t= 0;
}else if(t> document.documentElement.clientHeight -div1.offsetHeight){
t=document.documentElement.clientHeight -div1.offsetHeight;
}
div1.style.left=l+'px';
div1.style.top= t+'px';
}