js事件高階應用01（事件繫結 、高階拖拽）
阿新 • • 發佈：2018-12-10
- 事件繫結
- IE方式
- attachEvent(事件名稱、函式)，繫結事件處理函式
- detachEvent(事件名稱、函式)，解除繫結
- DOM方式
- addEventListener(事件名稱，函式，捕獲)
- removeEventListener(事件名稱，函式，捕獲)
attachEvent是用來繫結事件的。如果我在一個元素的同一事件上去加兩次，會相互覆蓋。而繫結就不會出現這種問題。可以同時加好幾個函式在同一個事件上。
Internet Explorer 從 5.0 開始提供了一個 attachEvent 方法，使用這個方法，就可以給一個事件指派多個處理過程了。attachEvent 對於目前的 Opera 也適用。但是問題是 Mozilla/Firefox 並不支援這個方法。但是它支援另一個 addEventListener 方法，這個方法跟 attachEvent 差不多，也是用來給一個事件指派多個處理過程的。但是它們指派的事件有些區別，在 attachEvent 方法中，事件是以 “on” 開頭的，而在 addEventListener 中，事件沒有開頭的 “on”，另外 addEventListener 還有第三個引數，一般這個引數指定為 false 就可以了。
相容性問題：attachEvent(IE) addEventListener(火狐)
<script> window.onload=function(){ var oBtn=document.getElementById('btn'); //attachEvent(事件名，函式) oBtn.addEventListener('click',function(){ alert('a'); },false); oBtn.addEventListener('click',function(){ alert('b'); },false); /*oBtn.onclick=function(){ alert('a'); } oBtn.onclick=function(){ alert('b'); }*/ } </script> </head> <body> <input type="button" id="btn" value="點選按鈕"/> </body>
處理相容性問題：
<script>
/*window.onload=function(){
var oBtn=document.getElementById('btn');
//先出現b再出現a.IE9以下的瀏覽器執行順序和你繫結的執行順序相反，
if(oBtn.attachEvent){
oBtn.attachEvent('onclick',function(){
alert('a');
});
oBtn.attachEvent('onclick',function(){
alert('b');
});
}else{
oBtn.addEventListener('click',function(){
alert('a');
},false);
oBtn.addEventListener('click',function(){
alert('b');
},false);
}
}*/
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
}else{
obj.addEventListener(ev,fn,false);
}
}
window.onload=function(){
var oBtn=document.getElementById('btn');
myAddEvent(oBtn,'click',function(){
alert('a');
});
myAddEvent(oBtn,'click',function(){
alert('b');
});
}
</script>- 高階拖拽
- 複習拖拽原理：距離不變 三個事件：down、move、up
- 限制範圍：1.對位置判斷 （例子1，不能拖出視窗的Div. 例子2，不能拖出指定物件的Div）
- 2.磁性吸附
//例子2，不能拖出指定物件的Div.
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div2{
width: 700px;
height: 500px;
background: #cccccc;
position: relative;
}
</style>
<script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//滑鼠移動
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0){
l=0;
}else if(l>oDiv2.offsetWidth-oDiv.offsetWidth){
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}
if(t<0){
t=0;
}else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
//滑鼠擡起不動
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
};
return false;//火狐下，空div會有bug.加上false則無。
}
</script>
</head>
<body>
<div id="div2">
<div id="div1"></div>
</div>
</body>//吸附
if(l<50){
l=0;
}else if(l>oDiv2.offsetWidth-oDiv.offsetWidth){
l=oDiv2.offsetWidth-oDiv.offsetWidth;
}
if(t<50){
t=0;
}else if(t>oDiv2.offsetHeight-oDiv.offsetHeight){
t=oDiv2.offsetHeight-oDiv.offsetHeight;
}- 圖片拖拽 阻止預設事件
- 文字選中 阻止預設事件 IE下拖動有問題（事件捕獲）
- 與DOM配合（帶框拖拽、保留原有位置的拖拽）
當在拖拽的時候，我們不會選中頁面中的其他文字。
- 事件捕獲：setCapture()只在IE可用。
return false;//可以解決chrome、ff、IE9下的問題,但是解決不了IE7以下的問題所以我們要製作一個適用於IE的。
//沒加事件捕獲之前只有點選按鈕才能彈出a。加上事件捕獲之後，隨便點選一個地方都能彈出a.
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
alert('a');
}
oBtn.setCapture();//事件捕獲。作用：把事件都集中到一個按鈕身上。
}
</script>
</head>
<body>
<input type="button" id="btn1" value="按鈕"/>
</body>加了事件捕獲，oDiv.setCapture()；整個網頁裡面所有的事件都會聚集到一個div身上。
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
//滑鼠移動 之前我們是document.onmousemove
oDiv.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
//滑鼠擡起不動.之前我們是document.onmouseup
//換成document的原因是div太小，拖拽太快，容易滑鼠與div脫離。
oDiv.onmouseup=function(){
oDiv.onmousemove=null;
oDiv.onmouseup=null;
}
oDiv.setCapture();//無論拖拽的多快，div都不會跟不上滑鼠
return false;
};
}
</script>
</head>
<body>
djsakfgjaukdhwuq
<div id="div1">dwfewfewfwefwefefwef</div>
wdsfregtehrshtefeagregr
</body>我加了setCapture()之後，文字就得不到事件了。所以在要文字得到事件的時候，取消捕獲。
<script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
function mouseMove(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();//在滑鼠擡起的時候，釋放掉捕獲。
}
}
if(oDiv.setCapture){
//IE
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;
oDiv.setCapture();
}else{
//chrome
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
return false;//可以解決chrome、ff、IE9下的問題,但是解決不了IE7以下的問題
};
}
</script> <script>
//滑鼠按下 滑鼠擡起 滑鼠移動
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
function mouseMove(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
function mouseUp(){
this.onmousemove=null;
this.onmouseup=null;
if(oDiv.releaseCapture){
oDiv.releaseCapture();//在滑鼠擡起的時候，釋放掉捕獲。
}
}
if(oDiv.setCapture){
//IE
oDiv.onmousemove=mouseMove;
oDiv.onmouseup=mouseUp;
oDiv.setCapture();
}else{
//chrome
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
}
return false;//可以解決chrome、ff、IE9下的問題
};
}
</script>