每天一句 : 讓思考成為一種習(xí)慣咐旧。
一、事件捕獲
- 事件綁定方式一(同一事件會被覆蓋)
oBox.onclick = fn1;
oBox.onclick = fn2; // 覆蓋掉fn1
- 事件綁定方式二(同一事件可以多個處理)
addEventListener(事件名詞绩蜻，事件函數(shù)铣墨，是否捕獲)
參數(shù)3: true表示采用事件捕獲，若false事件冒泡
oBox.addEventListener('click', fn, true);
注1: 事件冒泡是從里到外的傳遞方式办绝，即是從事件目標(biāo)(target)開始踏兜，往上冒泡直到頁面的最上一級標(biāo)簽; 事件捕獲是從外到里的傳遞方式，即是從最上一級標(biāo)簽開始往下查找八秃，直到捕獲到事件目標(biāo)(target);
注2: IE中不支持事件捕獲;
二、DOM事件流
事件捕獲階段 ? 目標(biāo)元素階段 => 事件冒泡階段
DOM事件流
三肉盹、事件取消
- 事件取消方式一
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)鍵盤按鍵按下時
- onkeyup: 當(dāng)鍵盤按鈕釋放(彈起)時
- event.keyCode: 數(shù)字類型(鍵盤按鈕的值) ASCII值
- ctrlkey/shiftkey/altkey: 當(dāng)一個事件發(fā)生時上忍，如果是按下狀態(tài)骤肛，返回true纳本，否則返回false
案例: 鍵盤控制元素移動
五、事件默認行為
當(dāng)一個事件發(fā)生時腋颠，瀏覽器自己會默認做的事情;
如何阻止事件默認行為
a繁成、當(dāng)前這個行為是什么事件觸發(fā)的
b、在這個事件的處理函數(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：不可拖動光標(biāo)
not-allowed：無效光標(biāo)
help：幫助光標(biāo)
all-scroll：三角方向標(biāo)
move：移動標(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)相對于oBox元素的位置
ev = event || ev;
var dowX = ev.offsetX;
var dowY = ev.offsetY;
// 鼠標(biāo)移動范圍是整個document
document.onmousemove = function(ev){
ev = event || ev;
// 元素距離瀏覽器左邊位置 = ev.clientX(鼠標(biāo)距離瀏覽器左邊位置) - dowX(鼠標(biāo)相對于元素的位置)
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)松開時清除document的onmousemove事件
2）回放效果
<1>在拖拽過程中記錄移動過的每一個坐標(biāo)在數(shù)組pos里
<2>點擊回放
點擊a標(biāo)簽時尊搬，#box窗口按原路徑返回原來的位置
遍歷arr,不斷改變#box的top,left值
<3>回放完成后清空數(shù)組arr
*/
