如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】
如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】
刘金玉编程
发布于 2024-05-29 14:48:39
发布于 2024-05-29 14:48:39
本文主要针对浏览器的窗口事件做一些简要介绍，只在让读者可以入门操作bom有关的事件。
在浏览网页最常见的就是浏览器的窗口产生的事件，比如浏览器大小变化时发生的resize事件；浏览器滚动条变化时发生的scroll事件。这些事件在浏览器窗口比较直观，但实际上这两种情况也可以发生在html元素的某个节点上。本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件的使用。案例源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js"></script>
<style>
#container pre {
font-size: 20px;
text-align: left;
}
</style>
<script>
$(function() {
$(document).scroll(function() {
alert("触发了滚动条事件");
});
$(window).resize(function() {
$("#ctsize").html("当前窗体宽度" + window.innerWidth + "，高度" + window.innerHeight);
});
})
</script>
</head>
<body>
<div id="wraper">
<div id="ctsize"></div>
<div id="container">
<h1>html关于表格table的相关知识分享【2020网页综合笔记02】</h1>
<pre>
html关于表格的相关知识
相关标签：
table表格
thead可以省略，表示表格表头部分
tbody可以省略，表示表格内容部分
tr表格行
td表格列
th用于表头的列，有加粗效果
colspan列合并，用于列标签
rowspan行合并，用于列标签
</pre>
</div>
</div>
</body>
</html>网页预览效果如图5-22所示：
图5-22页面效果
在jQuery中的scroll事件是当滚轮出现时，用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件。在这个代码中，一旦触发scroll事件，就会弹出如图5-23所示的提示。
图5-23提示效果
而用户的浏览器大小发生变化时就会触发预先绑定在window上面的resize事件，这个事件可以将当前的浏览器内部的宽高实时输出到id为ctsize的容器里面。
当在使用resize事件的时候，要注意检测浏览器窗口要将节点绑定到window上，而不是document节点。
当使用scroll滚动事件的时候，绑定事件的容器要有滚动条变化才会发生。根据业务需要，有时候在没有滚动条情况下要触发鼠标滚动事件，如在页面中实现图片切换效果，就要回归使用JavaScript的方式将document绑定到mousewheel事件上。代码如下所示：
document.onmousewheel = function() {
//鼠标滚轮滚动后发生的代码
};本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2024-05-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读