事件基础
浏览器在时刻监视着用户在页面上的行为,这些行为就是用户事件。
用户做了某个行为,就会触发相应的事件,开发者只需要编写代码,告诉浏览器,当用户触发了某个事件后,去执行相应的代码(开发者编写的代码)
举例:
第一种方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="div1" onclick="fn()">戳我</button>
<script>
function fn() {
alert('滴滴滴')
}
</script>
</body>
</html>
第二种方法:
<body>
<button>戳我</button>
<script>
var abc=document.querySelector('button')
abc.onclick=function(){
alert(('(๑′ᴗ‵๑)I Lᵒᵛᵉᵧₒᵤ❤'))
}
</script>
</body>
例子解析:
1.获取button元素:document.querySelector(‘button’)
2.为button元素添加click(左键单击)事件
3.匿名函数:事件处理程序
告诉浏览器,当用户左键单击button元素时,让浏览器帮我们执行匿名函数中的代码
显示鼠标移动轨迹案例
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 10px;
height: 10px;
background-color: lightskyblue;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
document.onmousemove = function(){
var odivs = document.getElementsByTagName('div');
for(var i = odivs.length-1; i > 0; i--){
odivs[i].style.left = odivs[i-1].offsetLeft + 'px';
odivs[i].style.top = odivs[i-1].offsetTop + 'px';
}
var pos = getPost();
odivs[0].style.left = pos.x + 'px';
odivs[0].style.top = pos.y + 'px';
}
function getPost(){
var scollleft = document.documentElement.scrollLeft;
var scrollTop = document.documentElement.scrollTop;
return {x:event.clientX+scollleft, y:event.clientY+scrollTop};
}
</script>
</body>
</html>
效果展示:
结果:跟随鼠标移动,显示鼠标移动轨迹