Topic 1 ：跟随的天使
screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。
clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动 始终是浏览器最上面的左上角
直接把鼠标的坐标给天使就行了，e.clientX(Y) 或者 e.pageX(Y)
有滚动条用pageX（Y）就行了
注意用到e就有兼容性问题：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跟随的天使</title>
<style>
/*
body {
height: 1000px;
}
*/
</style>
</head>
<body>
<!-- <div>123</div>-->
<img id="img" src="../images/tianshi.gif" alt="">
<script>
// body的有效范围，是body内部元素的范围
// 所以下面这个我们不能用body.onmousemove
var img = document.getElementById('img');
// 注意这个事件是onmousemove 而不是onmouseover
document.onmousemove = function (e) {
console.log('abc');
e = e || window.event;
img.style.position = 'absolute';
// // clientX / clientY 获取的是鼠标在可视区域中的位置
// img.style.left = e.clientX + 'px';
// img.style.top = e.clientY + 'px';
// 获取鼠标在页面中的位置
img.style.left = e.pageX + 'px';
img.style.top = e.pageY + 'px';
}
</script>
</body>
</html>
two ：有滚动条的情况下
因为有兼容性的问题 ie8的时候没有pageX 所以我们要自己算pageX
我们可以算出来鼠标的坐标就是滚动条的位置加上e.client
滚动出去的部分 ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跟东出去的部分</title>
<style>
body {
height: 1500px;
}
</style>
</head>
<body>
<script>
// 获取页面滚动出去的距离
// document.documentElement 文档的根元素
// 要获取当前页面的滚动条纵坐标位置，用：
// document.documentElement.scrollTop;
window.onscroll = function () {
console.log('documentElement' + document.documentElement.scrollTop);
//console.log('body' + document.body.scrollTop);
}
// chrome 和 IE11 有兼容性问题
// 获取页面滚动出去的距离。处理兼容性
function getScroll() {
return {
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
}
}
// 我们在这里获得了滚动条的位置那么我们在加上e.client就可以获得鼠标位置的坐标那么我们就可以再有滚动条的情况下
// 让我们的天使跟着鼠标走
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>follow天使</title>
<style type="text/css">
body {
height: 1500px;
}
</style>
</head>
<body>
<image id="img" src="../images/tianshi.gif"></image>
<script src="../js/common.js"></script>
<script>
var img = document.getElementById('img');
// 我们获取鼠标的坐标 要使用document.onmousemove
document.onmousemove = function (e) {
// 想让天使获得鼠标的坐标 先要脱离文档流
img.style.position = 'absolute';
// 用到e我们呢就会想到兼容性问题
e = e || window.event;
// 把鼠标的坐标给img
// 还有一点要特别注意就是我们属性设置一定要加单位
// 注意横纵坐标
img.style.top = getPage(e).pageY + 'px';
img.style.left = getPage(e).pageX + 'px';
}
</script>
</body>
</html>
Topic 2 ：事件冒泡参数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡参数</title>
<style>
#box1 {
width: 300px;
height: 300px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: blue;
}
#box3 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var array = [box1, box2, box3];
array.forEach(function (item) {
item.addEventListener('click', function (e) {
// eventPhase 事件的阶段
// 1 捕获阶段 2 目标阶段 3 冒泡阶段
// console.log(e.eventPhase);
// target 始终是点击的那个元素
console.log('target ' + e.target.id);
// currentTarget 调用事件处理函数的元素
console.log('currentTarget ' + e.currentTarget.id);
// this跟currentTarget一样 是调用事件处理函数的元素
console.log('this ' + this.id);
// 阻止事件冒泡 添加上他以后上面三个就是一样的了
e.stopPropagation();
}, false);
});
</script>
</body>
</html>
Topic 3 ：取消默认行为的执行
<body>
<a id="link" href="http://www.baidu.com">baidu</a>
<script>
var link = document.getElementById('link');
link.onclick = function (e) {
alert('点击了');
// 阻止默认行为的执行
//这里是组织了跳转到百度 我们上一次做了一个移除事件
//我们那个移除事件指的是只让那个事件执行一次 详情可以看上一篇博客
//return false;
e.preventDefault();
}
</script>
</body>Topic 4 ： 鼠标盒子中的位置
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获得鼠标在盒子中的位置</title>
<style type="text/css">
#box {
height: 200px;
width: 200px;
border: 1px red solid;
padding: 0px;
margin: 200px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script src="../js/common.js"></script>
<script>
// 获得鼠标在盒子中的位置
// 思路就是 我们先或得鼠标在页面中的位置 然后或得盒子的坐标 我们用页面中的位置减去合作的位置就得到我们想要的了
// 1.获得盒子的位置
var box = document.getElementById('box');
box.onmousemove = function (e) {
// 看到e就想到了兼容性问题
e = e || window.event;
// this.style 获取的仅仅是标签的style中设置的样式属性 id 和类选择器的都获取不出来 必须是在标签里面写的style样式
// 如果标签没有设置style属性，此时获取到的都是空字符串
// console.log(this.style.width);
// 获取元素的偏移量（坐标）
// console.log(this.offsetLeft);
// console.log(this.offsetTop);
// 我们这里还有offsetHeight元素的宽度和高度
// console.log(this.offsetHeight);
// console.log(this.offsetWidth);
// 鼠标在页面中的位置
var pageX = getPage(e).pageX;
var pageY = getPage(e).pageY;
// 鼠标减去盒子
console.log(pageX - this.offsetLeft);
console.log(pageY - this.offsetTop);
}
</script>
</body>
</html>
Topic 5：键盘事件
键盘码和ASC码几乎是对应的但是呢 我们键盘小键盘那里的数字和ASC码就不对应了，因为我们还有一行数字键，F几下面哪一行；
<body>
<input type="text" id="txt">
<script>
var txt = document.getElementById('txt');
txt.onkeydown = function (e) {
// 键盘码
console.log(e.keyCode);
// 判断按下的是不是a 要是的话就不执行 a就输不上去
// 我们的键盘吗不用记忆 因为我们忘了的话可以直接打印出来看一下
// if (e.keyCode === 65) {
// return false;
// }
// 判断按下的键是否是数字，如果不是数字，取消后续内容的执行
// 注意这里的8是退格 我们是可以退格的 //a 65
if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8) {
// return false;
e.preventDefault();
}
}
</script>
</body>