每天一句 : 讓思考成為一種習(xí)慣循狰。
一咧擂、事件捕獲
- 事件綁定方式一(同一事件會(huì)被覆蓋)
oBox.onclick = fn1;
oBox.onclick = fn2; // 覆蓋掉fn1
- 事件綁定方式二(同一事件可以多個(gè)處理)
addEventListener(事件名詞逞盆，事件函數(shù)，是否捕獲)
參數(shù)3: true表示采用事件捕獲松申，若false事件冒泡
oBox.addEventListener('click', fn, true);
注1: 事件冒泡是從里到外的傳遞方式云芦，即是從事件目標(biāo)(target)開(kāi)始，往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽; 事件捕獲是從外到里的傳遞方式贸桶，即是從最上一級(jí)標(biāo)簽開(kāi)始往下查找舅逸，直到捕獲到事件目標(biāo)(target);
注2: IE中不支持事件捕獲;
二、DOM事件流
事件捕獲階段 ? 目標(biāo)元素階段 => 事件冒泡階段
三皇筛、事件取消
- 事件取消方式一
document.onclick = null;
- 事件取消方式二
IE: obj.detachEvent(事件名稱琉历， 事件函數(shù));
非IE: obj.removeEventListener(事件名稱, 事件函數(shù), 是否捕獲);
document.removeEventListener('click', fn1, false);
window.removeEventListener ? document.removeEventListener('click', fn1, false) : document.detachEvent('click', fn1);
四、鍵盤事件
- onkeydown: 當(dāng)鍵盤按鍵按下時(shí)
- onkeyup: 當(dāng)鍵盤按鈕釋放(彈起)時(shí)
- event.keyCode: 數(shù)字類型(鍵盤按鈕的值) ASCII值
- ctrlkey/shiftkey/altkey: 當(dāng)一個(gè)事件發(fā)生時(shí)设联，如果是按下?tīng)顟B(tài)善已，返回true灼捂，否則返回false
案例: 鍵盤控制元素移動(dòng)
五、事件默認(rèn)行為
當(dāng)一個(gè)事件發(fā)生時(shí)换团，瀏覽器自己會(huì)默認(rèn)做的事情;
如何阻止事件默認(rèn)行為
a悉稠、當(dāng)前這個(gè)行為是什么事件觸發(fā)的
b、在這個(gè)事件的處理函數(shù)中(高版本中只需要 return false;即可)
ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;右鍵菜單事件oncontextmenu
六艘包、鼠標(biāo)樣式
cursor： 其他取值
auto：標(biāo)準(zhǔn)光標(biāo)
default：標(biāo)準(zhǔn)箭頭
hand：手形光標(biāo)
wait：等待光標(biāo)
text：I形光標(biāo)
vertical-text：水平I形光標(biāo)
no-drop：不可拖動(dòng)光標(biāo)
not-allowed：無(wú)效光標(biāo)
help：幫助光標(biāo)
all-scroll：三角方向標(biāo)
move：移動(dòng)標(biāo)
crosshair：十字標(biāo)
例如1:
oBox.style.cursor = 'crosshair';
例如2：
#box h3{
// 鼠標(biāo)的樣式設(shè)置
cursor: move;
}
七的猛、拖拽
- 拖拽原理
<script>
window.onload = function(){
var oBox = document.getElementById("box");
oBox.onmousedown = function(ev){
// 保存鼠標(biāo)相對(duì)于oBox元素的位置
ev = event || ev;
var dowX = ev.offsetX;
var dowY = ev.offsetY;
// 鼠標(biāo)移動(dòng)范圍是整個(gè)document
document.onmousemove = function(ev){
ev = event || ev;
// 元素距離瀏覽器左邊位置 = ev.clientX(鼠標(biāo)距離瀏覽器左邊位置) - dowX(鼠標(biāo)相對(duì)于元素的位置)
oBox.style.left = ev.clientX - dowX + 'px';
oBox.style.top = ev.clientY - dowY + 'px';
}
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
}
}
}
</script>
- 完美拖拽
思路：
1）拖拽效果
<1>給元素#box定位（absolute,relative,fixed）
<2>拖拽原理
- 給#box綁定onmousedown,并記錄按下的光標(biāo)位置（offsetX,offsetY），然后給document綁定onmousemove事件想虎，在onmousemove事件內(nèi)不斷改變#box的top,left值
left = e.clicentX - offsetX + 'px';
top = e.clientY - offsetY + 'px';
- 鼠標(biāo)松開(kāi)時(shí)清除document的onmousemove事件
2）回放效果
<1>在拖拽過(guò)程中記錄移動(dòng)過(guò)的每一個(gè)坐標(biāo)在數(shù)組pos里
<2>點(diǎn)擊回放
點(diǎn)擊a標(biāo)簽時(shí)卦尊，#box窗口按原路徑返回原來(lái)的位置
遍歷arr,不斷改變#box的top,left值
<3>回放完成后清空數(shù)組arr
*/
作者：西門奄
鏈接：http://www.reibang.com/u/77035eb804c3
來(lái)源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處舌厨。
