overflow:auto的页面计算滚动距离:
document.querySelector('.scroll-list').scrollTop //scroll-list为容器
元素距离浏览器顶部的高度:
document.querySelector('.xxx').offsetTop
防抖 闭包应用
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
类似输入input
function(fn,time){
var timeout;
return function(){
var _this=this;
timeout=setTimeout(()=>{
func.apply(_this, arguments);
},time)
}
}
截流
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
类似scroll等需要一直触发事件
function (fn,time){
var timeout
var start = new Date;
var threshhold = threshhold || 160
return function () {
var context = this, args = arguments, now = new Date() - 0
clearTimeout(timeout)
if(now - start >= time){
fn.apply(context, args)
start = now
}else{
timeout = setTimeout(function(){
fn.apply(context, args)
}, time);
}
}
}
pc端常用的事件:
事件名 作用
click 当鼠标点击时触发
mouseover 当鼠标指针移动到元素上时触发
mouseout 当鼠标指针移出元素时触发
mouseenter 当鼠标指针移动到元素上时触发(不支持冒泡)
mouseleave 当鼠标指针移出元素上时触发(不支持冒泡)
mousemove 当鼠标指针移动到元素上时触发
mousedown 当元素上按下鼠标按钮时触发
mouseup 当在元素上释放鼠标按钮时触发
mousewheel 当鼠标滚轮正在被滚动时运行的脚本
keydown 在用户按下按键时触发
keyup 当用户释放按键时触发
load 页面结束加载之后触发
scroll 当元素滚动条被滚动时运行的脚本
blur 元素失去焦点时运行的脚本
focus 当元素获得焦点时运行的脚本
change 在元素值被改变时运行的脚本