在前面14个教程中，比较重要的是使用jQuery操作html的每一个节点，此外就是针对这些节点事件使用。当然，还有很多场合操作键盘和鼠标，我们在学习过程过程中一定要关注比较常用的一些事件，然后尽可能在学习的时候就把他们应用到自己的工作场景中。本文主要针对浏览器的窗口事件做一些简要介绍，只在让读者可以入门操作bom有关的事件。

在浏览网页最常见的就是浏览器的窗口产生的事件，比如浏览器大小变化时发生的resize事件；浏览器滚动条变化时发生的scroll事件。这些事件在浏览器窗口比较直观，但实际上这两种情况也可以发生在html元素的某个节点上。本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件的使用。案例源代码：

代码语言：javascript代码运行次数：0运行复制

html关于表格的相关知识
相关标签：
table表格
thead可以省略，表示表格表头部分
tbody可以省略，表示表格内容部分
tr表格行
td表格列
th用于表头的列，有加粗效果
colspan列合并，用于列标签
rowspan行合并，用于列标签

网页预览效果如图5-22所示：

图5-22页面效果

在jQuery中的scroll事件是当滚轮出现时，用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件。在这个代码中，一旦触发scroll事件，就会弹出如图5-23所示的提示。

图5-23提示效果

而用户的浏览器大小发生变化时就会触发预先绑定在window上面的resize事件，这个事件可以将当前的浏览器内部的宽高实时输出到id为ctsize的容器里面。

当在使用resize事件的时候，要注意检测浏览器窗口要将节点绑定到window上，而不是document节点。

当使用scroll滚动事件的时候，绑定事件的容器要有滚动条变化才会发生。根据业务需要，有时候在没有滚动条情况下要触发鼠标滚动事件，如在页面中实现图片切换效果，就要回归使用JavaScript的方式将document绑定到mousewheel事件上。代码如下所示：

代码语言：javascript代码运行次数：0运行复制document.onmousewheel = function() {

//鼠标滚轮滚动后发生的代码

};