思维导图
ul事件
window.onload = function() {
// 等待页面加载完毕后执行
var dTime = document.getElementById("time");
console.log(dTime);
}
鼠标事件
var d1 = document.querySelector(".d1");
var d2 = document.querySelector(".d2");
鼠标移入移出事件
d1.onmouseover = function() {
console.log("over")
}
d1.onmouseout = function() {
console.log("out")
}
d1.onmouseenter = function() {
console.log("enter")
}
d1.onmouseleave = function() {
console.log("leave")
}
事件对象:包含了该事件所有的相关信息
d1.onclick = function(e) {
console.log(e);
}
案例:拖拽
<title>拖拽</title>
<style>
* {
margin: 0;
padding: 0;
}
.drag {
width: 100px;
height: 100px;
background-color: tomato;
background-image: url(https://img2.baidu.com/it/u=3495655923,3824349319&fm=253&fmt=auto&app=138&f=JPEG?w=467&h=500);
background-size: cover;
position: absolute;
}
</style>
</head>
<body>
<div class="drag"></div>
</body>
<script>
var drag = document.querySelector(".drag");
// 鼠标按下事件,获取起点位置信息
drag.onmousedown = function(e1) {
var x1 = e1.clientX;
var y1 = e1.clientY;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
// 鼠标移动事件,计算差值,drag重新定位
window.onmousemove = function(e2) {
var x2 = e2.clientX;
var y2 = e2.clientY;
var l2 = l1 + (x2 - x1);
var t2 = t1 + (y2 - y1);
// 边界处理
l2 = l2<0 ? 0 : (l2>window.innerWidth-drag.offsetWidth ? window.innerWidth-drag.offsetWidth : l2);
drag.style.left = l2 + 'px';
drag.style.top = t2 + 'px';
}
}
// 当鼠标抬起时,去掉mousemove事件
drag.onmouseup = function() {
window.onmousemove = null;
}
</script>