javascript基础（事件对象）（三十一）

来源：互联网发布：性能数据守望先锋编辑：程序博客网时间：2024/05/20 07:53

1.事件对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style><script type="text/javascript">window.onload = function(){/* * 鼠标在大div中移动时，在小div中显示鼠标的坐标 *///获取两个divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");//为areaDiv绑定一个鼠标移动的事件/* * 事件对象 * - 当浏览器调用事件的响应函数时，每次都会传递一个事件对象作为参数， * 在事件对象封装了当前事件相关的信息，比如：鼠标的坐标 键盘哪个按键被按下。。。 * 我们可以通过该对象来获取事件相关的信息 */areaDiv.onmousemove = function(event){//clientX可以获取鼠标指针的水平坐标//clientY可以获取鼠标指针的垂直坐标/*var x = event.clientX;var y = event.clientY;*///处理兼容性的问题/*if(!event){event = window.event;}*/event = event || window.event ;/* * 在IE8及以下的浏览器中，没有将事件对象作为参数传递进函数， * 所以我们就不能以参数的形式来使用事件对象。 *  * 在IE8中，是将事件对象作为window对象的属性保存的 * 需要使用window.event来使用 */var x = event.clientX;var y = event.clientY;//alert("x = "+x +" y = "+y);//在shouMsg中显示鼠标的坐标showMsg.innerHTML = "x = "+x +" , y = "+y;};};</script></head><body><div id="areaDiv"></div><div id="showMsg"></div></body></html>

练习：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;/*开启绝对定位*/position: absolute;}</style><script type="text/javascript">window.onload = function(){/* * 使div可以跟随鼠标移动 *  * 使div跟随鼠标移动，实际上就是将div的偏移量设置为鼠标的坐标 *///获取box1var box1 = document.getElementById("box1");//绑定一个鼠标移动的事件document.onmousemove = function(event){//处理兼容的问题event = event || window.event;/* * 事件对象的clientX和clientY获取的坐标是鼠标相对于浏览器窗口可见区域的坐标 * 但是元素的偏移量相对于页面的，所以当拖动滚动条时，会发现鼠标指针和元素的位置发生了偏离 *  * 为了解决这个问题，可以将滚动条滚动的距离加到偏移量中 *///获取垂直方向的滚动距离/* * 在chrome浏览器中，认为窗口的滚动条就是body的，可以通过body来获取 *  * 而其他浏览器认为浏览器的滚动条是html的，需要通过html根标签来获取 *///var st = document.body.scrollTop;//var st = document.documentElement.scrollTop;var st = document.documentElement.scrollTop || document.body.scrollTop;var sl = document.documentElement.scrollLeft || document.body.scrollLeft;//获取鼠标的坐标/* * pageX * pageY * - 可以获取鼠标指针相对于页面的水平和垂直坐标 * - 但是这两个属性在IE8及以下的浏览器中并不支持，所以如果需要兼容IE8则不能使用 */var left = event.clientX;var top = event.clientY;//修改box1的偏移量box1.style.left = left + sl + "px";box1.style.top = top + st + "px";};};</script></head><body style="height: 3000px; width: 3000px;"><div id="box1"></div></body></html>

0 0