9.JavaScript事件总结

事件
- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间
- JavaScript 与 HTML 之间的交互是通过事件实现的。
- 对于 Web 应用来说，有下面这些代表性的事件：单击事件、鼠标移入移出事件、键盘按下/弹起事件等等
比如：{
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
…
}
例子：{

------------CSS部分---------------
body{height: 1200px;}
#heart{width:200px;height: 166px;border:2px solid #000;background: #f00;position: absolute;}
------------HTML部分---------------
<div id="heart"></div>
------------JS部分---------------
window.onload = function(){
            var box=document.getElementById("heart");
            var container=document.getElementById("container");
            document.onmousemove = function(a){
                //console.log(45845);
                //处理兼容性问题
                a = a||window.event;
                //获取到鼠标的坐标
				/*
					clientX和clientY
						- 用于获取鼠标当前的可见窗口的坐标
							div的偏移量是相对于整个网页的
				*/
                /*var left = a.clientX;
                var top = a.clientY;*/
                /*
					pageX和pageY
						-  用于获取鼠标相对于当前页面的坐标
							但是这个属性在IE8中不兼容，所以如果需要兼容IE8,则不要使用
				*/
                /*var left = a.pageX;
                var top = a.pageY;*/
                /*
					获取滚动条滚动的距离
						Chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取 
						火狐等浏览器认为浏览器的滚动条是HTML的
						最新的Chrome浏览器中可以使用document.documentElement.scrollTop获取值
				*/
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                console.log(document.body.scrollTop);
                var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
                
                var left = a.clientX + screenLeft;
                var top = a.clientY + scrollTop;
                
                box.style.left = left+"px";
                box.style.top = top+"px";
            }
        }

}
以上就是鼠标移动document文档里面的元素