js /滚动事件

导语：在淘宝官网中，我们会发现，页面的中返回顶部按钮不是一直存在的，而是当页面滚动到某个高度的时候才会出现，那么想要实现这样的效果，就需要使用js中的滚动事件

****事件	****说明
onscroll	窗口发生滚动
scrollTo	滚动到指定位置【增加】

 **方法一：**方法一： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。 比如： window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标。 y-coord 是文档中的纵轴坐标。 比如：window.scrollTo(0,1000); // 垂直滚动到1000的位置

**方法二：**方法二： window.scrollTo(options) // option为对象格式 window.scrollTo(options) // option为对象格式

• top 等同于 y-coord
• left 等同于 x-coord
• behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

1. 文档可视区域高度(屏幕的高度) document.documentElement.clientHeight
2. 文档高度(整个html页面的高度) document.documentElement.scrollHeight
3. 文档滚动高度(标准浏览器生效) document.documentElement.scrollTop
4. 文档滚动高度(IE浏览器有效) document.body.scrollTop
5. 获得当前坐标的X，Y坐标 x=event.clientX;   Y=event.clientY
6. 获取当前元素的宽度和高度,定位的left和top/元素上面内容的高度 height=ele.offsetHeight; width=ele.offsetWidth     left = ele.offsetLeft top = ele.offsetTop

常用的尺寸获取方式： 获取页面滚动上去的高度：document.documentElement.scrollTop/document.body.scrollTop 获取当前元素的宽度和高度：ele.offsetHeight/ele.offsetWidth 获取窗口的宽度和高度：window.innerHeight 获取文档的宽度和高度：document.documentElement.scrollHeight

. js中两种添加事件的方式

• 方式一 ：on+事件名
• 方法二：添加事件监听

方法一：

on+事件名

// 添加事件关联 oneDiv.onclick = function() { console.log("+++++"); } oneDiv.onclick = function() { console.log("-----"); } // 取消事件关联 oneDiv.onclick = null; oneDiv.onclick = false;

方法二：

语法1：element.addEventListener(event, function, useCapture) Event： 必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 Function： 必须。指定要事件触发时执行的函数。 useCapture： 可选。布尔值，(默认值, false. true 代表以事件捕获形式触发事件, false 代表以事件冒泡形式触发事件)

1. 对比onclick和addEventListener

1.addEventListener可以对同一个元素绑定多个事件【相同事件】，执行顺序从上到下依次执行。而onclick同一个元素只能绑定一个【相同】事件，如有多个，后面的事件会覆盖前面的事件。 2.addEventListener的第三个参数为布尔类型，默认为false，也就是执行的冒泡机制，如为true，则执行捕获机制 3.addEventListener它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。点击查看dom分类 4.注册addEventListener事件时不需要写on，而onclick方式则必须加on 5.在移除事件上，onclick使用的是指针指向null，例如document.onclick = null，而addEventListener则使用的是独有的移除方法removeListener（要使用此方法，addEventListener必须执行的是外部函数或存在函数名，不然则不能使用） 6.addEventListener为DOM2级事件绑定，onclick为DOM0级事件绑定 7.IE678只能使用attachEvent，无addEventListener

总结：对于简单事件（同一个元素上只有一个事件）使用行内的onclick更合适。对于复杂事件使用 addeventlistenr 最后可以删除事件。 推荐大家使用addeventlistenr ，他是现在浏览器的标准，浏览器的兼容性会更好一些