js--事件对象（keyCode、target）、js三大特效（offset、scroll、client）
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
Ie9以下浏览器中的事件对象是放在全局中的window.event;
解决兼容性：event = event || window.event
screenX、pageX和clientX的区别
PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY: 内容可视区域鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）
PageY和pageX的兼容写法（很重要）
在页面位置就等于 = 看得见的+看不见的
pageY/pageX=event.clientY/clientX+scroll().top/scroll().left
1. event.target属性；返回触发此事件的元素（事件的目标节点）。
重要作用：事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变，例：点击子级元素时子级发生样式改变）：
event.target.style=''（点击的目标对象）
2. event.currentTarget属性; 返回其事件监听器触发该事件的元素。
3. event.type属性； 返回当前 Event 对象表示的事件的名称。
4.event.timeStamp属性； 返回事件生成的日期和时间。
1-4案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box" id="box" onclick="targett(event)">
<p>我爱https://blog.csdn.net/muzidigbig</p>
<p>我爱https://blog.csdn.net/muzidigbig</p>
</div>
</body>
<script>
function targett(event) {
// 解决IE9兼容性问题
event = event || window.event;
//返回触发此事件的元素（事件的目标节点）。
console.log(event.target);
// console.log(event.target.id);
// console.log(event.target.tagName);
// console.log(event.target.nodeName);
// console.log(event.target.className);
// console.log(event.target.innerHTML);
// console.log(event.target.innerText);
//事件委托（点击子级元素，相对应的样式发生改变）
event.target.style.color='yellow';
//返回其事件监听器触发该事件的元素。
console.log(event.currentTarget);
//返回当前 Event 对象表示的事件的名称。
console.log(event.type);
//返回事件生成的日期和时间。
console.log(event.timeStamp);
}
</script>
</html>5. event.keyCode ； 键盘按键代码（返回值number）和keydown/keyup(事件会在键盘按下/松开时触发)配合使用
上下左右案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
width: 20px;
height: 20px;
border: 1px solid black;
}
.bc{
background-color: pink;
}
</style>
</head>
<body>
<table>创建一个十行十列的表格，代码略……</table>
</body>
<script>
window.onload = function () {
dig();
function dig() {
//这里将随机数作为获取对象的索引；注意这里定义在全局位置的变量
var random = Math.round(Math.random()*100);
console.log(random);
var tds = document.getElementsByTagName('td');
tds[random].className='bc';
//键盘按键事件
document.onkeydown = function (event) {
if(event.keyCode == 38){
tds[random].className='';
random -= 10;
if(random>1 ){
tds[random].className='bc';
}else{
//这里用到了递归
dig();
}
}else if(event.keyCode == 40){
tds[random].className='';
random += 10;
if(random<99){
tds[random].className='bc';
}else{
dig();
}
}else if(event.keyCode == 37){
tds[random].className = '';
random -= 1;
if(random>0 || random==0){
tds[random].className = 'bc';
}else {
dig();
}
}else if(event.keyCode == 39){
tds[random].className = '';
random += 1;
if(random < 99 || random == 99){
tds[random].className = 'bc';
}else{
dig()
}
}
}
}
}
</script>
</html>
js--三大特效（重点重点）
三大家族和一个事件对象
三大家族（offset/scroll/client）
事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）
1. offset家族 （返回值为number）
offset这个单词本身是--偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent共同组成了offset家族。
offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding+border；（不包含margin）
offsetWidth =width+padding+border；
offsetHeight =Height+padding+border；
offsetLeft和offsetTop （元素的left/top距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
offsetParent(检测父系盒子中带有定位的父盒子节点）
1、返回该对象的父级 （带有定位）
如果当前元素的父级元素没有进行CSS定位 （position为absolute或relative，fixed）, offsetParent为body元素。
2、如果当前元素的父级元素中有CSS定位 （position为absolute或relative，fixed）,offsetParent取最近的那个父级元素。
offsetLeft和style.left区别：
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置；而 style.left不可以。
二、offsetTop 返回的是数字，而 style.top 返回的是字符串；除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
案例：匀速动画
动画原理：定时器+盒子本身的位置+步长
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 100px;
background-color: pink;
position: relative;
}
</style>
</head>
<body>
<button onclick="speed()">匀速动画</button>
<div>
https://blog.csdn.net/muzidigbig
</div>
</body>
<script>
function speed() {
var btn = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];
function bian() {
//动画原理：盒子未来的位置 = 盒子现在的位置+步长
//用offsetLeft属性获取定位的盒子距离body左边的距离改变这个距离
//将offsetLeft重新设置的值赋给style.left
//offset获取值的返回类型为number
div.style.left = div.offsetLeft+10+'px';
}
setInterval(bian,2000);
}
</script>
</html>2.scroll家族组成（卷页)
scrollWidth和scrollHeight（不包括border、margin）
检测盒子的宽高。（调用者：节点元素。属性。）
盒子内容的宽高。（如果有内容超出了，显示内容的高度；不超出是盒子本身的高度）
IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
IE8一下不超出盒子，高为内容的高度
scrollToph和scrollLeft（与onscroll滚动事件配合）
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
它的兼容性问题
一、未声明 DTD（谷歌只认识他）
document.body.scrollTop
二、已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容性写法
var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;案例：
固定导航栏
<script>
window.onload = function () {
//需求1：当我们滚动界面的时候，被卷曲的头部超过第二个盒子距离顶部的位置，那么直接给第二个盒子加类名.fixed
//需求2：当我们滚动界面的时候，被卷曲的头部小于第二个盒子距离顶部的位置，那么直接给第二个盒子取消类名.fixed
//步骤：
//1.老三步。
//2.判断 ，被卷曲的头部的大小
//3.满足条件添加类，否则删除类
//1.老三步。
var topDiv = document.getElementById("top");
var height = topDiv.offsetHeight;
var middle = document.getElementById("Q-nav1");
var main = document.getElementById("main");
window.onscroll = function () {
//2.判断 ，被卷曲的头部的大小
if(scroll().top > height){
//3.满足条件添加类，否则删除类
middle.className += " fixed";
//第二个盒子不占位置了，所以我们给第三个盒子一个上padding占位置，不出现盒子抖动问题
main.style.paddingTop = middle.offsetHeight+"px";
}else{
middle.className = "";
//清零
main.style.paddingTop = 0;
}
}
}
</script>3.client 家族
client 可视区域
clientWidth： width + padding 不包含borde
检测屏幕宽度(可视区域)
ie9及其以上的版本
window.innerWidth
标准模式
document.documentElement.clientWidth
怪异模式
document.body.clientWidth
window.onresize = function(){} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
案例：
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
document.write(client().width);
</script>
若有不足请多多指教！希望给您带来帮助！
上一篇： 微信推送模板信息接口（干货-代码）
下一篇： GeoHash编码原理和代码演示