本节我们对前面讲的事件对象做一些应用。
案例描述：
点击按钮后页面中的图片标签跟着鼠标走。
实现原理：
获取按钮，给按钮绑定点击事件，在事件函数里，由于需要动态获取鼠标举例窗口左边和顶边的位置，所以需要给window绑定鼠标移动事件。
通过事件对象，即window事件对象，取出鼠标当前位置的x坐标和y坐标，然后将坐标值通过设置css样式的方式赋值给图片标签的left和top属性。
根据以上描述，大家可以动手尝试做一下，实在做不出来再看下面的代码。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件对象的应用案例 让元素标签跟着鼠标走</title>
<style type="text/css">
img{
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="go......" id="btn">
<img src="img/12.jpg" id="tianshi" style="width:50px;height:50px;">
<script type="text/javascript">
// 以下实现点击按钮后图片跟着鼠标走
//获取按钮
var btn = document.getElementById('btn');
//绑定点击事件
btn.onclick = function(){
//点击事件中：
//
//给整个窗口window绑定鼠标移动事件
window.onmousemove = function(e){
console.log(e);
//鼠标移动事件中：
//兼容性方式获取事件对象
var e = e || window.event;
console.log(e); // e.pageX e.pageY
//获取鼠标的横纵坐标
var x = e.pageX; // e.clientX
var y = e.pageY; // e.clientY
//设置图片在页面的位置（横纵坐标）
document.getElementById("tianshi").style.left = x + 'px';
document.getElementById("tianshi").style.top = y + 'px';
}
}
</script>
</body>
</html>
本案例对事件绑定、事件对象和节点属性都有应用，往往大家可以深刻了解案例原理。
|
窥视卡
雷达卡
发表于 2023-1-27 18:56:04
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 15:42:56
