转行学开发，代码100天——2018-05-02
1.事件对象
JavaScript中事件对象通常用定义变量ev或event表示。为了兼顾浏览器兼容问题，定义事件对象为
var oEvent = ev||event;
2.鼠标事件
鼠标事件通常有获取鼠标点击位置clientX;clientY
鼠标移动事件：onmousemove;
鼠标点击事件：onmousedown;
鼠标抬起事件：onmouseup;
如设置一个鼠标跟随程序：
物体跟随鼠标移动。
<!DOCTYPE html>
<html>
<head>
<title>javascript 鼠标事件</title>
<style type="text/css">
#div1{ 100px;height: 100px;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时一定要结合scrollLeft和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 }; }
3.事件冒泡
事件冒泡通常会影响网页运行效果，一般需要设置阻止事件冒泡的发生。
如一个模仿select按钮的效果，通过点击按钮，弹出内容框；点击视图中其他区域，内容框消失。
其代码如下：
<!DOCTYPE html> <html> <head> <title>仿select效果</title> <style type="text/css"> #div1{width: 200px; height: 200px;background: #ccc;display: none;} </style> <script type="text/javascript"> window.onload = function() { var btn1 = document.getElementById("btn1"); var div1 = document.getElementById("div1"); btn1.onclick = function(ev) { var oEvent = ev||event; div1.style.display = "block"; alert("按钮被点击了"); oEvent.cancelBubble = true; } document.onclick = function() { div1.style.display = "none"; alert("document被点击了"); } } </script> </head> <body> <input id="btn1" type="button" value="显示" > <div id="div1"></div> </body> </html>
可以看到，代码中对按钮添加了阻止冒泡的功能，oEvent.cancelBubble = true;
否则在点击显示按钮后，先后弹出
"按钮被点击了"
"document被点击了"
但实际上内容灰色框并不会显示。
所以在事件的使用中至少需要注意以下问题：
1）兼容性问题
2）事件冒泡问题