蓝鸥原生JS：事件对象及事件类型效果演示
事件对象
鼠标事件
event.clientX在可视区中，鼠标点击的x坐标
event.clientY在可视区中，鼠标点击的y坐标
示例：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
document.onclick = function () {
alert(event.clientX + ',' + event.clientY);
}
</script></head><body>
</body></html>
示例：一个跟随鼠标指针移动的红色块
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
background-color :red;
position: absolute;
}
</style>
<script type="text/javascript">
// 鼠标移动时触发改事件
document. = 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';
}
</script></head><body>
<div id = "div"></div>
</body></html>
示例：一串跟着鼠标走的div
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 10px;
height: 10px;
background-color :red;
position: absolute;
}
</style>
<script type="text/javascript">
// 鼠标移动时触发改事件
window.onload = function () {
var oDivs = document.getElementsByTagName('div');
document. = 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;
};
}
}
</script></head><body>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
<div id = "div"></div>
</body></html>
键盘事件
keyCode获取用户按下键盘的哪个按键
如：键盘控制DIV移动
ctrlKey 返回boolean值，按下时为true
shiftKey 返回boolean值，按下时为true
altKey 返回boolean值，按下时为true
示例：用提示框将用户按的按键提示出来：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
// 按动键盘时触发事件
document.onkeydown = function (ev) {
var oEvent = ev || event;
// 获取到按动的是哪个按键
alert(oEvent.keyCode);
}
</script></head><body>
</body></html>
示例：通过上下左右按键控制DIV的移动
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
left:10px;
top:10px;
background-color: gray;
position: absolute;
}
</style>
<script type="text/javascript">
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';
};
}
</script></head><body>
<div id = "div1"> </div></body></html>
示例：按住control+enter键，提交留言框中的文字到留言板中
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
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 = '';
};
}
}
</script></head><body>
<textarea id = 'text1' roes = '10' cols = '40'></textarea>
<br />
<input type = "text" id = 'text2'/>
<input type="button" value = '提交' id = 'btn'/>
</body></html>
事件冒泡
子标签发生事件后，向父级发送该事件，一直追溯到document。如：点击一个嵌套在body中的button，则该button的onclick事件也会传递给body、document中，触发他们的onclick里触发的函数.
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
<script type="text/javascript">
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被点击了")
}
}
</script>
</head>
<body>
<input type = "button" value = "显示" id = "button">
<div id = "div"></div>
</body>
</html>
取消冒泡
由于事件冒泡会触发父级的相关方法，所以我们经常会“取消事件冒泡”。
取消事件冒泡的方法:event.cancelBubble=true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
display: none;
}
</style>
<script type="text/javascript">
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被点击了")
}
}
</script>
</head>
<body>
<input type = "button" value = "显示" id = "button">
<div id = "div"></div>
</body>
</html>
零基础学习HTML5—HTML+CSS基础视频教程
http://edu.51cto.com/course/course_id-6452.html
