JS事件高階應用-1
阿新 • • 發佈:2018-12-10
一個事件可以繫結多個函式語句 一、同一個元素的同一個事件會覆蓋,而繫結不會。 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'; }