UI事件之unload、resize和scroll
unload事件
当页面卸载或用户从当前页面换到其他页面上时,会在window上触发unload事件。根据DOM2级规范规定,unload应该在body上触发,但所有浏览器都实现了在window上触发unload,以保证向后兼容。
与load事件相同,也有两种绑定方式,推荐使用JavaScript方式:
<!-- html特性方式 -->
<html>
<head></head>
<body unload="alert(unloaded!)"></body>
</html>
//JavaScript方式
EventUtil.addEvent(window,'unload',function(event){
alert('unloaded!');
});
resize事件
当浏览器窗口大小发生变化时,会在window上触发resize事件;注意,firefox浏览器会在窗口大小停止变化时才触发resize事件,而其他浏览器则在窗口发生1px的变化就触发,因此建议不要在你resize事件处理程序中有大量的计算。
scroll事件
当页面随滚动条滚动时会触发连续scroll事件;混杂模式下,基于body计算滚动距离,在标准模式下,基于document计算滚动距离:
EventUtil.addEvent(window,'scroll',function(event){
var event = EventUtil.getEvent(event);
if(document.compatMode=='CSS1Compat){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
});
UI事件之unload、resize和scroll的更多相关文章
- Javascript高级编程学习笔记(61)—— 事件(5)UI事件
UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivat ...
- 事件类型-UI事件、焦点事件
DOM3级事件包括以下几类事件: UI事件:当用户与页面上的元素交互时触发 焦点事件:当元素获得或失去焦点时触发 鼠标事件:当用户通过鼠标在页面上执行操作时触发 滚轮事件:当使用鼠标滚轮时触发 文本事 ...
- React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路
React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...
- UI事件监听的击穿
什么是UI事件监听的击穿 在游戏视图中,有两个UI界面叠在一起的时候,单击一个空白处,却触发了被覆盖在下层了UI界面中的单击事件,这就是单击击穿了上层界面. 假设场景中放置了一个箱子,单击箱子会触发一 ...
- UI事件之load
load事件属于CSS3规范中的UI事件,load事件处理程序在页面元素和资源(html/script/link/img等)全部加载完成后在window上触发,或在img元素加载完成后再img元素上触 ...
- Android学习笔记--处理UI事件
Handling UI Events 在Android里, 有不只一种方式可以截获用户与你的应用程序交互的事件. 在你的界面上处理事件时,你需要捕获用户与某个View实例交互时所产生的事件.View类 ...
- UI事件与内容,舞台与演员
UI事件:创建/清除/显示/隐藏/填充内容/位置变化/形态变化/尺寸变化/颜色变化/ 非UI事件:点击/输入/拖动/
- unity UI事件
由于工作需要到持续按键,所以了解了一下unity UI事件,本文主要转载于http://www.cnblogs.com/zou90512/p/3995932.html?utm_source=tuico ...
- window resize和scroll事件的基本优化
转自 http://www.kankanews.com/ICkengine/archives/6564.shtml
随机推荐
- ECShop2.7.2详细文件结构及模板结构目录名称
┣plugins目录┣templates目录┃ ┣backup目录┃ ┃ ┣index.htm┃ ┃ ┗ibrary目录┃ ┃ ┗index.htm┃ ┣cac ...
- html标签之meta标签
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...
- android 补间动画
android开发过程中,为了更好的展示应用程序,应用程序添加动画,能够很好地实现这个功能.如果动画中的图像变化有一定的规律,可以采用自动生成图像的方式来生成动画,例如图像的移动.旋转.缩放等.自动生 ...
- 11i - 12 How To Set Email Style Preference For All Users At Once?
(文档 ID 578574.1) In this Document Goal Solution Workflow Information Center, Diagnostics, & ...
- RTP InitializeComponent() 报错
注意xaml中x:Class 是不是相应改了,下面2处标红的部分是否一致. namespace RTP.ToolKits{ /// <summary> /// Interaction lo ...
- ubuntu安装体验
本文记录一下昨晚及今天安装ubuntu系统的过程及体验 2016年6月13日09:36:11 更新 今天才有发现原来自己有个没填的坑 = = 那次安乌班图后第一感觉是很好用,新鲜了好几天,但是很快,新 ...
- C++ 析构函数为虚函数
1.原因: 在实现多态时, 当用基类指针操作派生类, 在析构时候防止只析构基类而不析构派生类. 2.例子: (1). #include<iostream> using namespace ...
- 显示Title和隐藏Title的ListView
一.主要步骤 ①.调用ListView的addHeaderView(),创建一个与Title一样高的View,这样ListView就不会刚开始被遮盖了 ②.调用ListView的setOnTouchE ...
- Python2.7 转义和正则匹配中文
今天爬虫(新浪微博 个人信息页面)的时候遇到了转义和正则匹配中文出乱码的问题. 先给出要匹配的部分网页源代码如下: <span class=\"pt_title S_txt2\&quo ...
- VS2010中添加dll目录
RT,比如用VS写QT,用qmake生成的项目,需要在项目属性里设置:调试->环境,path=%path%;C:\Qt\4.8.5\bin 这样省的每次都要把一堆dll复制到debug/rele ...