1.事件:
click
dbclick
mouseover
mouseout
mouseenter
mouseleave
onload
change
blur
input
submit
focus
scroll
resize
2. 鼠標(biāo)的點(diǎn)擊位置?
鍵盤按鍵?
如果對一個標(biāo)簽設(shè)置了點(diǎn)擊事件之后,沒有效果?
1.有沒有報錯。
2.事件有沒有寫錯
3.元素有沒有獲取到
document是整個文檔的父級。
event對象是事件發(fā)生的時候產(chǎn)生的一個對象。但是FF不支持。
3. 獲取一個兼容的event對象。
var ev = ev || event ;
event.clientX:相對于窗口可視區(qū)域的X坐標(biāo)
event.clientY:相對于窗口可視區(qū)域的Y坐標(biāo)
封裝的鼠標(biāo)點(diǎn)擊位置的坐標(biāo)獲取方法。
function getPos(ev){
var scrollLeft = window.pageXOffset ||
document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = window.pageYOffset ||
document.documentElement.scrollTop || document.body.scrollTop;
return {
left:scrollLeft+ev.clientX,
top:scrollTop + ev.clientY
};
}
4.事件流
事件冒泡:事件冒泡就是內(nèi)層元素的事件會隨著文檔流向上冒泡,
如果上層具有相同的事件,那么這個事件也會響應(yīng)。直到冒泡到頂層對象document。
event.cancelBubble = true; //停止冒泡
5. 鍵盤事件
keydown
keypress
keyup
按鍵的編碼 。 ev.keyCode
按鍵編碼是連續(xù)的。0-9,a-z
ctrlKey、shiftKey、altKey 這個是鍵盤事件的功能鍵,如果這些鍵按下的話,對應(yīng)的key值是true。這樣可以實現(xiàn)多按鍵操作。
Ctrl+enter
ctrl+c
ctrl+v
6.鼠標(biāo)右鍵的菜單事件 on contextmenu
return false ; 能夠阻止事件的默認(rèn)行為。
7.拖拽事件
復(fù)合事件
首先是鼠標(biāo)按下,然后是鼠標(biāo)移動。然后是鼠標(biāo)放開。自己理解。
var d = document.querySelector('div');
d.onmousedown = function(ev){
var ev = ev || event;
var x = ev.clientX - d.offsetLeft;
var y = ev.clientY-d.offsetTop;
d.onmousemove = function(ev){
var ev = ev || event;
d.style.left = ev.clientX - x + 'px';
d.style.top = ev.clientY - y + 'px';
};
d.onmouseup = function(){
d.onmousemove = function(){};
};
};