web前端|从零开始，学习web前端之js特效学习web前端|从零开始

我们在平时浏览网页的时候，一般都会看到一些网页效果，比如弹窗，轮播图，点击回到顶部和动画等等。一般我们都是通过操作dom的left和top属性的值来实现。要实现这些功能我们要熟悉offset，scroll，client这三大系列的知识，了解动画的基本原理，掌握事件的处理方式。
三大系列

offset
scroll
client

offset系列
offset本身有偏移，补偿的意思。在js中我们可以理解为偏移量。
offset系列常用的5个属性：

offsetWidth 获取元素本身的宽
offsetHeight 获取元素本身的高
offsetLeft 获取距离有定位的父盒子的左边的距离
offsetTop 获取距离有定位的父盒子的上边的距离
offsetParent 获取最近父元素中带有定位的节点

示例：

Title - 锐客网

文章图片

scroll系列

scrollWidth 获取元素中内容的宽度
scrollHeight 获取元素中内容的高度
scrollTop 网页被卷去的高
scrollLeft 网页被卷去的左

示例：
scrollWidth 、scrollHeight

Title - 锐客网 qweqweqqaaaaaaaaaa qwewqe qwewqe qweqwe qweqwe qweqweq qwewqew qwewqeqwe qweqweqww qweqweqw qwewqe qwewqeqwe qweqweqw

文章图片

scrollTop、scrollLeft

- 锐客网

scrollTop和scrollLeft有兼容性问题：
一、未声明 DTD（谷歌只认识他）
document.body.scrollTop
二、已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的
window.pageYOffset
兼容性写法：

scrollTop和scrollLeft方法的封装

client系列

clientWidth ：可视区域的宽
clientHeight：可视区域的高
clientX ：鼠标距离可视区域左侧距离（event调用）
clientY ：鼠标距离可视区域上侧距离（event调用）
clientTop 元素的上border
clientLeft 元素的左border

调用者不同，意义不同：
盒子调用：盒子本身的可视区域。
body/html调用：网页可视区域大小。

Title - 锐客网

文章图片

获取浏览器可视区域宽高：
存在兼容性问题：
IE9以上的版本：window.innerWidth/innerHeight
有DTD：（document.compatMode === “CSS1Compat”）
document.documentElement.clientWidth
document.documentElement.clientHeight
没有DTD:
document.body.clientWidth
document.body.clientHeight
封装（解决兼容性问题）

function client(){ if(window.innerWidth){ return { "width":window.innerWidth, "height":window.innerHeight }; }else if(document.compatMode === "CSS1Compat"){ return { "width":document.documentElement.clientWidth, "height":document.documentElement.clientHeight }; }else{ return { "width":document.body.clientWidth, "height":document.body.clientHeight }; } }

示例：

window.onresize=function () { console.log(client().width); }function client(){ //判断：如果浏览器支持window.innerWidth，直接用这个方法。不支持再用其他两个方法 if(window.innerWidth){ return { "width":window.innerWidth, "height":window.innerHeight }; }else if(document.compatMode === "CSS1Compat"){ return { "width":document.documentElement.clientWidth, "height":document.documentElement.clientHeight }; }else{ return { "width":document.body.clientWidth, "height":document.body.clientHeight }; } }

文章图片

三大系列总结
width和height

clientWidth= width+ padding clientHeight= height + padding offsetWidth= width+ padding + border offsetHeight= height + padding + border scrollWidth= 内容宽度（不包含border） scrollHeight= 内容高度（不包含border）

top和left

offsetTop/offsetLeft ：调用者：任意元素。(盒子为主) 距离父系盒子中带有定位的距离。 scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条) 调用者：document.body.scrollTop/.....(window) 浏览器无法显示的部分（被卷去的部分）。 clientY/clientX:（clientTop/clientLeft 值的是border值宽度）调用者：event.clientX(event) 鼠标距离浏览器可视区域的距离（左、上）。

动画 js种动画一般分为3种
1. 闪动动画
2. 匀速动画
3. 缓动动画
动画的原理：元素本身的位置+步长；
步长：每次移动的距离
闪动动画
瞬间到达指定位置
示例

Title - 锐客网

匀速动画
每次移动固定距离
示例：

Title - 锐客网

缓动动画
开始移动较快，距离终点越近，移动越慢。类似于电梯，刹车。
该动画用的较多，比较符合人类的审美。
公式：
元素位置 = 元素本身位置+（目标位置-元素本身位置）/ 10；
示例：

Title - 锐客网

事件对象（event）在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
普通浏览器支持 event（带参，任意参数）
ie 678 支持 window.event（无参，内置）
总结：他是一个事件中的内置对象。内部装了很多关于鼠标和事件本身的信息。
事件对象的获取
兼容写法：

//参数名可以是别的 document.onclick = function (event){ event = event || window.event; //兼容写法; console.log(event); }

事件对象的属性：

文章图片

event常用属：

event.clientX/event.clientY——触发事件时，鼠标的X轴和Y轴坐标（以可视区左上角开始计算） event.target ——在鼠标事件触发时，指向触发该事件的目标元素 event.keyCode ——当前按下按键的键值 event.ctrlKey——事件触发时，ctrl键是否被按下，true按下，false未按下 event.shiftKey——事件触发时，shift键是否被按下，true按下，false未按下 event.altKey——事件触发时，alt键是否被按下，true按下，false未按下

screenX、pageX和clientX的区别
pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）
screenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）
clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

文章图片

鼠标距离整个页面的距离、和距离可视区的距离有时候是相等的
当页面有被卷去的头部或者左侧的时候，这两个值就不相等了。
由此，我们可以得出：
鼠标位于整个页面的距离(pageY/X) = 鼠标位于可视区域的距离(clientY/X) + 页面被卷去的头部或者左侧的距离(scrollTop/Left)
pageX/pageY低版本浏览器（IE67）不支持，下面是兼容写法：

document.onclick = function (event) { //获取事件对象 event = event || window.event; //鼠标位于整个页面的坐标，兼容IE678 var pagex = event.pageX || event.clientX + scroll().left; var pageY = event.pageY || event.clientY +scroll().top; console.log(pagex); //值不带px console.log(pagey); }

事件的冒泡和捕获
【web前端|从零开始，学习web前端之js特效】任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
传统的事件绑定方法是
element1.onclick = doSomething2;
默认被视为在绑定于冒泡阶段
示例：

- 锐客网

文章图片

如果使用element.addEventListener()这种方式绑定事件的话，我们可以通过设置第三个参数来控制是冒泡还是捕获。
addEventListener第三个参数默认值是false。
false：冒泡
true：捕获
示例：

- 锐客网

当使用事件捕获时（true），父级元素先触发，子元素后触发
当使用事件冒泡时（false），子级元素先触发，父元素后触发
注意：并不是所有的事件都支持事件冒泡。例如：
阻止事件冒泡
当父元素也有和子元素同样类型的事件，但你在调用子元素事件的时候不想触发父元素事件的时，要阻止冒泡。
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true
兼容写法：

var event = event || window.event; if(event && event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; }

示例：

- 锐客网

事件委托
事件委托其实就是利用事件冒泡原理。从点击的元素开始，递归方式的向父元素传播事件，这样做的好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。还有一个好处就是可以处理动态插入dom中的元素，直接绑定的方式是不行的。
简单来说就是目标本事不处理事件，而是把事件任务委托给其父元素或祖先元素，当子元素被点击时，通过事件冒泡的特性，其父元素或捕获到该事件，执行相应方法。
示例：