事件對(duì)象
鼠標(biāo)事件
event.clientX在可視區(qū)中喜庞，鼠標(biāo)點(diǎn)擊的x坐標(biāo)
event.clientY在可視區(qū)中催什，鼠標(biāo)點(diǎn)擊的y坐標(biāo)
示例：
? ? ? ? document.onclick = function? () {
? ? ? ? ? ? alert(event.clientX + ',' + event.clientY);
? ? ? ? }
示例：一個(gè)跟隨鼠標(biāo)指針移動(dòng)的紅色塊
demo.gif
? ? ? ? #div {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color :red;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? // 鼠標(biāo)移動(dòng)時(shí)觸發(fā)改事件
? ? ? ? document.onmousemove = function? (ev) {
? ? ? ? ? ? // 獲取距離文檔頂部的高度
? ? ? ? ? ? var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? ? ? ? // 獲取距離文檔左邊的的寬度
? ? ? ? ? ? var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
? ? ? ? ? ? // 獲取鼠標(biāo)事件
? ? ? ? ? ? var oEvent = event || ev;
? ? ? ? ? ? // 獲取到div
? ? ? ? ? ? var oDiv = document.getElementById('div');
? ? ? ? ? ? // 設(shè)置div的位置
? ? ? ? ? ? oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';
? ? ? ? ? ? oDiv.style.top = oEvent.clientY + oScrollTop + 'px';
? ? ? ? }
示例：一串跟著鼠標(biāo)走的div
demo.gif
? ? ? ? #div {
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color :red;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? // 鼠標(biāo)移動(dòng)時(shí)觸發(fā)改事件
? ? ? ? window.onload = function? () {
? ? ? ? ? ? var oDivs = document.getElementsByTagName('div');
? ? ? ? ? ? document.onmousemove = function? (ev) {
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? oDivs[0].style.left = oEvent.clientX+'px';
? ? ? ? ? ? ? ? oDivs[0].style.top = oEvent.clientY+'px';
? ? ? ? ? ? ? ? for (var i = oDivs.length-1; i > 0; i--) {
? ? ? ? ? ? ? ? ? ? oDivs[i].style.left = oDivs[i-1].style.left;
? ? ? ? ? ? ? ? ? ? oDivs[i].style.top = oDivs[i-1].style.top;
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? }
鍵盤事件
keyCode獲取用戶按下鍵盤的哪個(gè)按鍵
如：鍵盤控制DIV移動(dòng)
ctrlKey 返回boolean值，按下時(shí)為true
shiftKey 返回boolean值川背，按下時(shí)為true
altKey 返回boolean值速缆，按下時(shí)為true
示例：用提示框?qū)⒂脩舭吹陌存I提示出來(lái)：
demo.gif
? ? ? ? // 按動(dòng)鍵盤時(shí)觸發(fā)事件
? ? ? ? document.onkeydown = function (ev) {
? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? // 獲取到按動(dòng)的是哪個(gè)按鍵
? ? ? ? ? ? alert(oEvent.keyCode);
? ? ? ? }
示例：通過(guò)上下左右按鍵控制DIV的移動(dòng)
demo.gif
? ? ? ? #div1 {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? left:10px;
? ? ? ? ? ? top:10px;
? ? ? ? ? ? background-color: gray;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? document.onkeydown = function? (ev) {
? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? if (oEvent.keyCode == 37) {
? ? ? ? ? ? ? ? oDiv.style.left =? oDiv.offsetLeft - 10 +'px';
? ? ? ? ? ? } else if (oEvent.keyCode==38) {
? ? ? ? ? ? ? ? oDiv.style.top = oDiv.offsetTop - 10 +'px';
? ? ? ? ? ? } else if (oEvent.keyCode == 39) {
? ? ? ? ? ? ? ? oDiv.style.left = oDiv.offsetLeft + 10 +'px';
? ? ? ? ? ? } else if (oEvent.keyCode == 40) {
? ? ? ? ? ? ? ? oDiv.style.top = oDiv.offsetTop + 10 +'px';
? ? ? ? ? ? };
? ? ? ? }
示例：按住control+enter鍵，提交留言框中的文字到留言板中
demo.gif
? ? ? ? window.onload = function? () {
? ? ? ? ? ? var oText1 = document.getElementById('text1');
? ? ? ? ? ? var oText2 = document.getElementById('text2');
? ? ? ? ? ? var oBtn = document.getElementById('btn');
? ? ? ? ? ? // 鼠標(biāo)點(diǎn)擊提交按鈕禁荸。進(jìn)行留言
? ? ? ? ? ? oBtn.onclick = function? () {
? ? ? ? ? ? ? ? //點(diǎn)擊提交按鈕后，把留言框中的文字提交在留言區(qū)
? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';
? ? ? ? ? ? ? ? // 清空留言框
? ? ? ? ? ? ? ? oText2.value = '';
? ? ? ? ? ? };
? ? ? ? ? ? // 按下control+enter按鈕阀湿，進(jìn)行留言,因?yàn)楫?dāng)前焦點(diǎn)在留言框中赶熟，所以事件要加載留言框中
? ? ? ? ? ? oText2.onkeydown = function? (ev) {
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? // 按下回車鍵和control鍵
? ? ? ? ? ? ? ? if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
? ? ? ? ? ? ? ? ? ? //點(diǎn)擊提交按鈕后，把留言框中的文字提交在留言區(qū)
? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';
? ? ? ? ? ? ? ? // 清空留言框
? ? ? ? ? ? ? ? oText2.value = '';
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? }
? ?
? ?
事件冒泡
子標(biāo)簽發(fā)生事件后炕倘，向父級(jí)發(fā)送該事件，一直追溯到document翰撑。如：點(diǎn)擊一個(gè)嵌套在body中的button罩旋，則該button的onclick事件也會(huì)傳遞給body、document中眶诈，觸發(fā)他們的onclick里觸發(fā)的函數(shù).
示例：
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
? ?
window.onload = function () {
? ? ? ? ? ? var oBtn = document.getElementById('button');
? ? ? ? ? ? var oDiv = document.getElementById('div');
? ? ? ? ? ? // 點(diǎn)擊buton后涨醋，button的事件會(huì)被觸發(fā)
? ? ? ? ? ? oBtn.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡，作為父級(jí)的document的onclick事件也會(huì)被觸發(fā)
? ? ? ? ? ? document.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'none';
? ? ? ? ? ? ? ? alert("document被點(diǎn)擊了")
? ? ? ? ? ? }
? ? ? ? }
? ?
取消冒泡
由于事件冒泡會(huì)觸發(fā)父級(jí)的相關(guān)方法逝撬，所以我們經(jīng)常會(huì)“取消事件冒泡”浴骂。
取消事件冒泡的方法:event.cancelBubble=true
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
? ?
window.onload = function () {
? ? ? ? ? ? var oBtn = document.getElementById('button');
? ? ? ? ? ? var oDiv = document.getElementById('div');
? ? ? ? ? ? // 點(diǎn)擊buton后，button的事件會(huì)被觸發(fā)
? ? ? ? ? ? oBtn.onclick = function(ev) {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");
? ? ? ? ? ? ? ? // 在這里取消事件冒泡宪潮，防止事件向父級(jí)傳遞
? ? ? ? ? ? ? ? // 兼容性考慮溯警，有的瀏覽器的事件并不是'event'，所以把點(diǎn)擊事件作為參數(shù)傳遞過(guò)來(lái)
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? oEvent.cancelBubble=true;
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡狡相，作為父級(jí)的document的onclick事件也會(huì)被觸發(fā)
? ? ? ? ? ? document.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'none';
? ? ? ? ? ? ? ? alert("document被點(diǎn)擊了")
? ? ? ? ? ? }
? ? ? ? }
? ?
事件的默認(rèn)行為
瀏覽器自帶的行為就是默認(rèn)行為
阻止默認(rèn)行為
只要將默認(rèn)的事件return false梯轻，就可以組織默認(rèn)行為的執(zhí)行。
示例：自定義右鍵菜單：默認(rèn)的右鍵菜單是系統(tǒng)提供的選項(xiàng)尽棕，我們可以阻止默認(rèn)的右菜單喳挑，來(lái)自定義新右鍵菜單樣式
ul {
list-style-type: none;
display:none;
position:absolute;
}
* {
margin: 0;
padding: 0;
}
? ?
? ? ? ? // 鼠標(biāo)右鍵觸發(fā)的時(shí)間
? ? ? ? document.oncontextmenu = function? (ev) {
? ? ? ? ? ? var oUl = document.getElementById('ul1');
? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? oUl.style.display = 'block';
? ? ? ? ? ? oUl.style.left = oEvent.clientX + 'px';
? ? ? ? ? ? oUl.style.top = oEvent.clientY + 'px';
? ? ? ? ? ? return false;
? ? ? ? }
? ? ? ? // 鼠標(biāo)左鍵觸發(fā)的事件
? ? ? ? document.onclick? = function? (ev) {
? ? ? ? ? ? var oUl = document.getElementById('ul1');
? ? ? ? ? ? oUl.style.display = 'none';
? ? ? ? }
? ?
? ?
? ? ? ?
? ? ? ?
? ? ? ?
示例：輸入框中只能輸入數(shù)字和退格
? ?
window.onload = function? () {
var oText = document.getElementById('text');
oText.onkeydown = function? (ev) {
var oEvent = ev || event;
if ( (oEvent.keyCode < 40 && oEvent.keyCode != 8) || oEvent.keyCode > 57 ) {
return false;
};
? ? ? ? ? ? }
? ? ? ? }
拖拽
拖拽時(shí)，鼠標(biāo)經(jīng)歷三個(gè)事件：
onmousedown 鼠標(biāo)按下時(shí)滔悉，存儲(chǔ)當(dāng)前鼠標(biāo)距離拖拽對(duì)象左上角的距離
onmousemove 鼠標(biāo)移動(dòng)時(shí)伊诵，根據(jù)鼠標(biāo)移動(dòng)的距離移動(dòng)拖拽對(duì)象的位置
onmouseup 鼠標(biāo)抬起時(shí)，停止拖拽
示例：鼠標(biāo)拖拽一個(gè)div
demo.gif
#div1 {
width: 100px;
height: 100px;
background-color : red;
position: absolute;
}
? ?
window.onload = function? () {
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? // 當(dāng)鼠標(biāo)按下時(shí)計(jì)算鼠標(biāo)距離div左上角的位置
? ? ? ? ? ? oDiv.onmousedown = function? (ev) {
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? var oX = oEvent.clientX - oDiv.offsetLeft;
? ? ? ? ? ? ? ? var oY = oEvent.clientY - oDiv.offsetTop;
? ? ? ? ? ? ? ? // 當(dāng)鼠標(biāo)開始移動(dòng)回官，重新設(shè)置div的位置
? ? ? ? ? ? ? ? document.onmousemove = function? (ev) {
? ? ? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? ? ? oDiv.style.left = oEvent.clientX - oX + 'px';
? ? ? ? ? ? ? ? ? ? oDiv.style.top = oEvent.clientY - oY + 'px';
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? // 當(dāng)鼠標(biāo)抬起曹宴，結(jié)束移動(dòng)，清除移動(dòng)事件的函數(shù)
? ? ? ? ? ? ? ? document.onmouseup = function? () {
? ? ? ? ? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? ? ? ? ? document.onmouseup = null;
? ? ? ? ? ? ? ? };
? ? ? ? ? ? };
? ? ? ? };
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
