事件对象
鼠标事件
event.clientX在可视区中，鼠标点击的x坐标
event.clientY在可视区中，鼠标点击的y坐标
示例：
? ? ? ? document.onclick = function? () {
? ? ? ? ? ? alert(event.clientX + ',' + event.clientY);
? ? ? ? }
示例：一个跟随鼠标指针移动的红色块
demo.gif
? ? ? ? #div {
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color :red;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? // 鼠标移动时触发改事件
? ? ? ? document.onmousemove = function? (ev) {
? ? ? ? ? ? // 获取距离文档顶部的高度
? ? ? ? ? ? var oScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
? ? ? ? ? ? // 获取距离文档左边的的宽度
? ? ? ? ? ? var oScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
? ? ? ? ? ? // 获取鼠标事件
? ? ? ? ? ? var oEvent = event || ev;
? ? ? ? ? ? // 获取到div
? ? ? ? ? ? var oDiv = document.getElementById('div');
? ? ? ? ? ? // 设置div的位置
? ? ? ? ? ? oDiv.style.left = oEvent.clientX + oScrollLeft + 'px';
? ? ? ? ? ? oDiv.style.top = oEvent.clientY + oScrollTop + 'px';
? ? ? ? }
示例：一串跟着鼠标走的div
demo.gif
? ? ? ? #div {
? ? ? ? ? ? width: 10px;
? ? ? ? ? ? height: 10px;
? ? ? ? ? ? background-color :red;
? ? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? ? // 鼠标移动时触发改事件
? ? ? ? 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
示例：用提示框将用户按的按键提示出来：
demo.gif
? ? ? ? // 按动键盘时触发事件
? ? ? ? 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');
? ? ? ? ? ? // 鼠标点击提交按钮。进行留言
? ? ? ? ? ? oBtn.onclick = function? () {
? ? ? ? ? ? ? ? //点击提交按钮后，把留言框中的文字提交在留言区
? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';
? ? ? ? ? ? ? ? // 清空留言框
? ? ? ? ? ? ? ? oText2.value = '';
? ? ? ? ? ? };
? ? ? ? ? ? // 按下control+enter按钮，进行留言,因为当前焦点在留言框中，所以事件要加载留言框中
? ? ? ? ? ? oText2.onkeydown = function? (ev) {
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? // 按下回车键和control键
? ? ? ? ? ? ? ? if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
? ? ? ? ? ? ? ? ? ? //点击提交按钮后，把留言框中的文字提交在留言区
? ? ? ? ? ? ? ? oText1.value += oText2.value + '\n';
? ? ? ? ? ? ? ? // 清空留言框
? ? ? ? ? ? ? ? oText2.value = '';
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? }
? ?
? ?
事件冒泡
子标签发生事件后，向父级发送该事件，一直追溯到document。如：点击一个嵌套在body中的button，则该button的onclick事件也会传递给body、document中，触发他们的onclick里触发的函数.
示例：
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
? ?
window.onload = function () {
? ? ? ? ? ? var oBtn = document.getElementById('button');
? ? ? ? ? ? var oDiv = document.getElementById('div');
? ? ? ? ? ? // 点击buton后，button的事件会被触发
? ? ? ? ? ? oBtn.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被点击了");
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡，作为父级的document的onclick事件也会被触发
? ? ? ? ? ? document.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'none';
? ? ? ? ? ? ? ? alert("document被点击了")
? ? ? ? ? ? }
? ? ? ? }
? ?
取消冒泡
由于事件冒泡会触发父级的相关方法，所以我们经?；帷叭∠录芭荨?。
取消事件冒泡的方法: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');
? ? ? ? ? ? // 点击buton后，button的事件会被触发
? ? ? ? ? ? oBtn.onclick = function(ev) {
? ? ? ? ? ? ? ? oDiv.style.display = 'block';
? ? ? ? ? ? ? ? alert("button被点击了");
? ? ? ? ? ? ? ? // 在这里取消事件冒泡，防止事件向父级传递
? ? ? ? ? ? ? ? // 兼容性考虑，有的浏览器的事件并不是'event'，所以把点击事件作为参数传递过来
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? oEvent.cancelBubble=true;
? ? ? ? ? ? }
? ? ? ? ? ? // 由于事件冒泡，作为父级的document的onclick事件也会被触发
? ? ? ? ? ? document.onclick = function() {
? ? ? ? ? ? ? ? oDiv.style.display = 'none';
? ? ? ? ? ? ? ? alert("document被点击了")
? ? ? ? ? ? }
? ? ? ? }
? ?
事件的默认行为
浏览器自带的行为就是默认行为
阻止默认行为
只要将默认的事件return false，就可以组织默认行为的执行。
示例：自定义右键菜单：默认的右键菜单是系统提供的选项，我们可以阻止默认的右菜单，来自定义新右键菜单样式
ul {
list-style-type: none;
display:none;
position:absolute;
}
* {
margin: 0;
padding: 0;
}
? ?
? ? ? ? // 鼠标右键触发的时间
? ? ? ? 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;
? ? ? ? }
? ? ? ? // 鼠标左键触发的事件
? ? ? ? document.onclick? = function? (ev) {
? ? ? ? ? ? var oUl = document.getElementById('ul1');
? ? ? ? ? ? oUl.style.display = 'none';
? ? ? ? }
? ?
? ?
? ? ? ?
? ? ? ?
? ? ? ?
示例：输入框中只能输入数字和退格
? ?
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;
};
? ? ? ? ? ? }
? ? ? ? }
拖拽
拖拽时，鼠标经历三个事件：
onmousedown 鼠标按下时，存储当前鼠标距离拖拽对象左上角的距离
onmousemove 鼠标移动时，根据鼠标移动的距离移动拖拽对象的位置
onmouseup 鼠标抬起时，停止拖拽
示例：鼠标拖拽一个div
demo.gif
#div1 {
width: 100px;
height: 100px;
background-color : red;
position: absolute;
}
? ?
window.onload = function? () {
? ? ? ? ? ? var oDiv = document.getElementById('div1');
? ? ? ? ? ? // 当鼠标按下时计算鼠标距离div左上角的位置
? ? ? ? ? ? oDiv.onmousedown = function? (ev) {
? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? var oX = oEvent.clientX - oDiv.offsetLeft;
? ? ? ? ? ? ? ? var oY = oEvent.clientY - oDiv.offsetTop;
? ? ? ? ? ? ? ? // 当鼠标开始移动，重新设置div的位置
? ? ? ? ? ? ? ? document.onmousemove = function? (ev) {
? ? ? ? ? ? ? ? ? ? var oEvent = ev || event;
? ? ? ? ? ? ? ? ? ? oDiv.style.left = oEvent.clientX - oX + 'px';
? ? ? ? ? ? ? ? ? ? oDiv.style.top = oEvent.clientY - oY + 'px';
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? // 当鼠标抬起，结束移动，清除移动事件的函数
? ? ? ? ? ? ? ? document.onmouseup = function? () {
? ? ? ? ? ? ? ? ? ? document.onmousemove = null;
? ? ? ? ? ? ? ? ? ? document.onmouseup = null;
? ? ? ? ? ? ? ? };
? ? ? ? ? ? };
? ? ? ? };
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ? ? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
? ?
