什么是event对象 用来获取事件的详细信息：鼠标位置、键盘按键 例子：获取鼠标位置：clientX document的本质：document.childNodes[0].tagName document包含整个网页、页面（body可能撑不开）： document.childNodes[0].tagName的标签名为！； document.childNodes[1].tagName的标签名为HTML； 获取event对象（兼容性写法） var oEvent = ev||event
window.onload = function (){ document.onclick = function (ev){ var oEvent = ev||event; alert(oEvent.clientX + ',' + oEvent.clientY); } }鼠标的坐标
事件流 事件冒泡 取消冒泡：oEvent.cancelBubble = true 例子：仿select控件 DOM事件流
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 { width: 400px; height: 300px; background: #ccc; display: none; } </style> <script type="text/javascript"> window.onload = function (){ var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev){ var oEvent = ev||event; oDiv.style.display = 'block'; oEvent.cancelBubble = true; } document.onclick = function(){ oDiv.style.display = 'none'; } } </script> </head> <body> <input id="btn" type="button" value="显示" /> <div id="div1"></div> </body> </html>cancelBubble 取消事件流
鼠标位置 可视区位置：clientX、clientY 例子：跟随鼠标的Div 消除滚动条的影响 滚动条的意义——可视区与页面顶部的距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style> <script type="text/javascript"> document.onmousemove = function (ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.left = oEvent.clientX + 'px'; oDiv.style.top = oEvent.clientY + scrollTop + 'px'; } </script> </head> <body style="height:2000px;"> <div id="div1"></div> </body> </html>当要使用clientX,与clientY时必须要有scrolltop
获取鼠标在页面的绝对位置 封装函数
function getPos(ev){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop}; } document.onmousemove = function (ev){ var oEvent = ev||event; var oDiv = document.getElementById('div1'); var pos = getPos(oEvent); oDiv.style.left = pos.x + 'px'; oDiv.style.top = pos.y + 'px'; }例子2：一串跟随鼠标的Div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div { width: 10px; height: 10px; background: red; position: absolute; } </style> <script type="text/javascript"> function getPos(ev){ var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; return {x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop}; } document.onmousemove = function(ev){ var aDiv = document.getElementsByTagName('div'); var oEvent = ev||event; var pos = getPos(oEvent); for (var i = aDiv.length - 1; i > 0; i--) { aDiv[i].style.left = aDiv[i - 1].offsetLeft + 'px'; aDiv[i].style.top = aDiv[i - 1].offsetTop + 'px'; }; aDiv[0].style.left = pos.x + 'px'; aDiv[0].style.top = pos.y + 'px'; } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>keyCode 获取用户按下键盘的哪个按键 例子：键盘控制Div移动
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 == 39) { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; } }但是一开始会卡一下
其他属性 CtrlKey、shiftKey、altKey 例子：提交留言 回车提交 ctrl+回车 提交 && oEvent.ctrlKey
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> </style> <script type="text/javascript"> window.onload = function (){ var oTxt1 = document.getElementById('txt1'); var oTxt2 = document.getElementById('txt2'); var oBtn = document.getElementById('btn1'); oBtn.onclick = function(){ oTxt2.value +=oTxt1.value +'\n'; oTxt1.value = ''; } oTxt1.onkeydown = function(ev){ var oEvent = ev||event; if (oEvent.keyCode == 13) { oTxt2.value += oTxt1.value + '\n'; oTxt1.value = ''; }; } } </script> </head> <body> <input id="txt1" type="text" /> <input id="btn1" type="button" value="发布" /><br> <textarea id="txt2" rows="10" cols="40"></textarea> </body> </html>可以通过回车键以及点击按钮发布信息
if (oEvent.keyCode == 13 && oEvent.ctrlKey) { oTxt2.value += oTxt1.value + '\n'; oTxt1.value = ''; };通过Ctrl+回车发布信息； 还有shiftKey与altKey
