事件對象
鼠標(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);
? ? ? ? }
示例：一個跟隨鼠標(biāo)指針移動的紅色塊
demo.gif
? ? ? ? #div {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color :red;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? // 鼠標(biāo)移動時觸發(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)移動時觸發(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獲取用戶按下鍵盤的哪個按鍵
如：鍵盤控制DIV移動
ctrlKey 返回boolean值，按下時為true
shiftKey 返回boolean值，按下時為true
altKey 返回boolean值，按下時為true
示例：用提示框?qū)⒂脩舭吹陌存I提示出來：
demo.gif
? ? ? ? // 按動鍵盤時觸發(fā)事件
? ? ? ? document.onkeydown = function (ev) {
? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? // 獲取到按動的是哪個按鍵
? ? ? ? ? ? alert(oEvent.keyCode);
? ? ? ? }
示例：通過上下左右按鍵控制DIV的移動
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ā)生事件后，向父級發(fā)送該事件，一直追溯到document。如：點(diǎn)擊一個嵌套在body中的button，則該button的onclick事件也會傳遞給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的事件會被觸發(fā)
? ? ? ? ? ? oBtn.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡，作為父級的document的onclick事件也會被觸發(fā)
? ? ? ? ? ? document.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'none';
? ? ? ? ? ? ? ? alert("document被點(diǎn)擊了")
? ? ? ? ? ? }
? ? ? ? }
? ?
取消冒泡
由于事件冒泡會觸發(fā)父級的相關(guān)方法，所以我們經(jīng)常會“取消事件冒泡”。
取消事件冒泡的方法: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的事件會被觸發(fā)
? ? ? ? ? ? oBtn.onclick = function(ev) {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被點(diǎn)擊了");
? ? ? ? ? ? ? ? // 在這里取消事件冒泡，防止事件向父級傳遞
? ? ? ? ? ? ? ? // 兼容性考慮，有的瀏覽器的事件并不是'event'，所以把點(diǎn)擊事件作為參數(shù)傳遞過來
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? oEvent.cancelBubble=true;
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡，作為父級的document的onclick事件也會被觸發(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)的右菜單，來自定義新右鍵菜單樣式
ul {
list-style-type: none;
display:none;
position:absolute;
}
* {
margin: 0;
padding: 0;
}
? ?
? ? ? ? // 鼠標(biāo)右鍵觸發(fā)的時間
? ? ? ? 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;
};
? ? ? ? ? ? }
? ? ? ? }
拖拽
拖拽時，鼠標(biāo)經(jīng)歷三個事件：
onmousedown 鼠標(biāo)按下時，存儲當(dāng)前鼠標(biāo)距離拖拽對象左上角的距離
onmousemove 鼠標(biāo)移動時，根據(jù)鼠標(biāo)移動的距離移動拖拽對象的位置
onmouseup 鼠標(biāo)抬起時，停止拖拽
示例：鼠標(biāo)拖拽一個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)按下時計(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)開始移動，重新設(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é)束移動，清除移動事件的函數(shù)
? ? ? ? ? ? ? ? document.onmouseup = function? () {
? ? ? ? ? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? ? ? ? ? document.onmouseup = null;
? ? ? ? ? ? ? ? };
? ? ? ? ? ? };
? ? ? ? };
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
