0.前言
上一节主要是了解事件的概念,直到时间的设置方式,接下来我们来说说一些window中常用事件:
- onload加载事件和onunload卸载事件;
- onscroll滚动事件;
- onresize窗口变化事件。
1.onload加载事件和onunload卸载事件
当页面完全加载之后触发加载事件(onload)
window.onload = function() {
alert("我在界面加载后提示");
};
alert("加载界面中……");
当页面完全卸载之后触发卸载事件(unload)
window.onunload = function() {
alert("sunck is a good man!");
};
2.onscroll滚动事件
当滚动的时候触发滚动事件
window.onscroll = function() {
console.log("滚动");
var h = document.documentElement.scrollTop || document.body.scrollTop;
console.log(h);
};
document.documentElement.scrollTop 和document.body.scrollTop;是用来设置滚动跳的高度。
上面是加载并设置滚动条,但是当我们滚动到底部时,想要返回到最上面怎么办呢?我们可以在底部设置一个按钮,并添加事件监听:
function func() {
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}
将其滚动条设置为“0”即可。
3.onresize窗口变化事件
改变窗口尺寸时触发窗口变化事件
window.onresize = function() {
console.log("窗口变化");
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
console.log(w, h);
};
注意:我们要记住获取屏幕的宽和高,有助于往后的开发。
var w = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
4.总结
这只是其中的一部分,有兴趣的朋友可以自己去尝试尝试。各位大哥大姐,给点打赏吧!!!!