js笔记
function Start() { stage.addEventListener(MouseEvent.MOUSE_MOVE, CheckDirection);}Start();var prevX=0;var prevY=0;var curX=0;var curY=0; var dirX:String="";var dirY:String="";function CheckDirection(e:MouseEvent) { trace("X movement: " + GetHorizontalDirection() + ", Y movement: " + GetVerticalDirection()); e.updateAfterEvent();}function GetHorizontalDirection():String { prevX=curX; curX=stage.mouseX; if (prevX>curX) { dirX="left"; } else if (prevX < curX) { dirX="right"; } else { dirX="none"; } return dirX;}function GetVerticalDirection():String { prevY=curY; curY=stage.mouseY; if (prevY>curY) { dirY="up"; } else if (prevY < curY) { dirY="down"; } else { dirY="none"; } return dirY;}1、onmouseleave、onmouseenter，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。
2、onmouseout、onmouseover、鼠标进入指定元素触发事件，含子元素区域。
附加：jQuery中的子元素选择器find与children区别。
find是筛选出当前元素下的所有（儿子元素，孙子元素等）符合条件的元素。
children是筛选出当前元素下的直接子元素（儿子元素）。
三、onmouseover和onmouseenter区别
onmouseover和onmouseenter都是鼠标进入时触发，onmouseover在所选元素的子元素间切换的时候也触发！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid #aaa;
margin: 20px;
}
</style>
</head>
<body>
<div id="d1">
AA
<p>BB</p>
CC
</div>
<div id="d2">
AA
<p>BB</p>
CC
</div>
<script>
var counter1 = 0
d1.onmouseover = function(){
counter1++;
console.log('COUNTER1:'+counter1);
}
//mouseover在子元素间切换时也会触发
var counter2 = 0
d2.onmouseenter = function(){
counter2++;
console.log('COUNTER2:'+counter2);
}
</script>
</body>
</html>
四、事件
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
事件举例：
- 鼠标点击
- 页面或图像载入
- 鼠标悬浮于页面的某个热点之上
- 在表单中选取输入框
- 确认表单
- 键盘按键
注意：事件通常与函数配合使用，当事件发生时函数才会执行。
五、鼠标的横、纵坐标
var x , y;
//当需求为获得的坐标值相对于body时，用：
function positionBody(event){
event = event||window.event;
//获得相对于body定位的横标值；
x=event.clientX
//获得相对于body定位的纵标值；
y=event.clientY
}
//当需求为获得的坐标值相对于某一对象时，用：
function positionObj(event,id){
//获得对象相对于页面的横坐标值；id为对象的id
var thisX = document.getElementById(id).offsetLeft;
//获得对象相对于页面的横坐标值；
var thisY = document.getElementById(id).offsetTop;
//获得页面滚动的距离；
//注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核
var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;
event = event||window.event;
//获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；
x = event.clientX - thisX;
//获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；
y = event.clientY - thisY + thisScrollTop;
}
六、鼠标的相对、绝对位置
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"/><title>位置</title><script language="javascript" type="text/javascript">function m(){document.getElementById("area").innerHTML=event.clientX +" , "+event.clientY;} function c(){ var objTop = getOffsetTop(document.getElementById("d"));//对象x位置 var objLeft = getOffsetLeft(document.getElementById("d"));//对象y位置 var mouseX = event.clientX+document.body.scrollLeft;//鼠标x位置 var mouseY = event.clientY+document.body.scrollTop;//鼠标y位置//计算点击的相对位置 var objX = mouseX-objLeft; var objY = mouseY-objTop; clickObjPosition = objX + "," + objY; alert(clickObjPosition);}function getOffsetTop(obj){ var tmp = obj.offsetTop; var val = obj.offsetParent; while(val != null){ tmp += val.offsetTop; val = val.offsetParent; } return tmp;}function getOffsetLeft(obj){ var tmp = obj.offsetLeft; var val = obj.offsetParent; while(val != null){ tmp += val.offsetLeft; val = val.offsetParent; } return tmp;}</script></head><body style="margin:0px;" onmousemove="m();"><div style="padding:90px;border:1px solid #ccc;font-size:36px;width:800px;height:800px;"> </div><div id="area"></div><div style="width:1400px;height:300px;border:1px solid red;padding-left:1200px;"> <div id="d" style="width:200px;height:200px;border:1px solid green;padding:10px;cursor:hand;" onclick="c()">这里是图片，因为我用div边框1px，所以两个div会有2px的位置偏移，你可以自己调整</div></div></body></html>
