焦点事件、event事件对象及clientX、clientY详解篇
一、焦点事件
1、焦点概念，是为使浏览器能够区分用户输入的对象而提出的。当一个元素有焦点的时候，就可以接收用户的输入。
可以通过以下方式是元素获得焦点：鼠标点击、键盘TAB键、JS操作
不是所有的元素都能获得焦点，只有能响应用户操作的元素才可以，如input输入框、按钮、a链接、select下拉框等。
2、获取焦点事件：obj.onfocus;
失去焦点事件：obj.onblur;
3、元素获取焦点的JS方法：obj.focus();
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input{
width: 400px;
height: 50px;
line-height: 30px;
}
</style>
</head>
<body>
<input type="text" value="请输入内容……" id="text"/>
</body>
<script type="text/javascript">
window.onload=function(){
var otext=document.getElementById("text");
otext.onfocus=function(){
if(this.value=="请输入内容……"){
this.value="";
}
};//当输入框获得焦点的时候，如果输入框的value是"请输入内容……"，则清空输入框的内容；
otext.onblur=function(){
if(this.value==""){
this.value="请输入内容……";
}
}//当输入框失去焦点的时候，如果输入框的value是空，则为输入框添加"请输入内容……"；
otext.focus();//页面加载完毕后即通过JS的focus()方法让输入框发获得焦点。类似百度，目的即是获得更好的用户体验。
}
</script>
</html>
二、event事件对象及clientX、clientY
1、event事件对象：当一个事件发生的时候，和当前这个对象发生的这个事件相关的一些详细信息都会被临时保存到一个指定地方，即event对象，供我们在需要的时候调用。其作用类似于“飞机--黑匣子”。
兼容问题：在IE/Chrome中的：event事件对象是一个内置全局变量，undefined/null;
在FF中（标准模式下），事件对象是通过事件函数的第一个参数传入；如果一个函数是通过事件调用的，那么这个函数定义的第一个参数，就是事件对象。 但在非标准的IE下会粗线问题。 解决方法，只需要在函数内部定义一下：var e=e ||event;
function fn1(e){ alert(e) } window.onclick=fn1;//object MouseEvent
注意一个问题：事件对象，必须在一个事件函数里面调用。一个函数是不是时间函数，不在于定义的时候，而在于调用的时候。
如下所示：
function fn1(){ alert(event) } fn1()//undefined; window.onclick=fn1;//object MouseEvent
2、cliectX 事件发生时，鼠标距离可视区域的X距离。cliectY 事件发生时，鼠标距离可视区域的Y距离。两者都是event对象的属性。
例：让一个元素随鼠标的移动而移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: orangered;
position: absolute;
}
</style>
</head>
<body>
<div class="div1" id="div1"></div>
</body>
<script type="text/javascript">
window.onload=function(){
//onmousemove 当鼠标在一个元素上面移动触发的事件；
//该事件触发的频率，不是根据像素大小，而是在指定时间内（如5秒内）如果鼠标的位置发生变化（不管是1px,还是2000px,结果都一样，都只是触发了一次）
var oDiv=document.getElementById("div1");
document.onmousemove = function(ev){
var ev=ev||event;//考虑IE兼容问题
oDiv.style.left=ev.clientX+"px";
oDiv.style.top=ev.clientY+"px";
}
}
</script>
</html>
但是注意ev.clientX[Y],只是屏幕的可视区域，往往元素的top/left值是相对于有定位属性的父级元素。当屏幕出现滚动条的时候，需要加上滚动条的滚动距离。
滚动条的滚动距离算法：var scrollTop=document.document.documentElement.scrollTop || document.body.scrollTop
故，对上面代码稍作修改：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: orangered;
position: absolute;
}
</style>
</head>
<body style="height: 2000px">
<div class="div1" id="div1"></div>
</body>
<script type="text/javascript">
window.onload=function(){
//onmousemove 当鼠标在一个元素上面移动触发的事件；
//该事件触发的频率，不是根据像素大小，而是在指定时间内（如5秒内）如果鼠标的位置发生变化（不管是1px,还是2000px,结果都一样，都只是触发了一次）
var oDiv=document.getElementById("div1");
document.onmousemove = function(ev){
var ev=ev||event;//考虑IE兼容问题
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.left=ev.clientX+"px";
oDiv.style.top=ev.clientY+scrollTop+"px";
}
}
</script>
</html>
浙公网安备 33010602011771号