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
随机推荐
- 4. Linux 系统目录
一.Linux 系统目录的作用 /home 用户主目录的根节点,所有用户自己独有的文件一般放在这个目录下的用户目录下 /bin 二进制可执行命令 / ...
- HTML5新增的主体元素和新增的非主体结构元素
HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的 ...
- Android开发中一些常见的问题解决方案
分享一下自己开发中遇到的一些常见问题及解决方案,方面以后快速开发少走弯路,也可以供大家一起学习. 1.开发中很常见的一个问题,项目中的listview不仅仅是简单的文字,常常需要自己定义listvie ...
- iOS框架介绍
iOS框架介绍 Cocoa Touch GameKit 实现对游戏中心的支持,让用户能够在线共享他们的游戏相关的信息 iOS设备之间蓝牙数据传输 从iOS7开始过期 局域网游 ...
- Lua编程入门-学习笔记2
第6章 深入函数 函数是一种“第一类值(First-Class Value)”,他们具有特定的词法域(lexical scoping) 将表达式“function(x) <body> en ...
- 单光纤udp通信
环境: 两块板子,拥有独立系统(Linux),通过单光纤连接(数据只能单向发送,无反馈).两块板子采用udp协议通信. 问题: 发送板子发送数据后,接收板子上的进程收不到数据. 确认两块光纤 ...
- Notepad++编译c++时使用的代码
cmd /c "g++ -o $(CURRENT_DIRECTORY)\$(NAME_PART).exe $(FULL_CURRENT_PATH)" 出现控制台. NppExec ...
- php中数字和字母生成随机字符串
function strrand($len) { $arr = array( "0", "1", "2", "3", & ...
- Nexus远程Maven仓库索引下载教程
下载Maven仓库索引有两种方式: 一.手动下载 首先将索引下载到本地,下载地址:nexus-maven-repository-index.zip 解压索引压缩包,将里面内容全部拷贝 关闭当前Ne ...
- API例子:用Java/JavaScript下载内容提取器
1,引言 本文讲解怎样用Java和JavaScript使用 GooSeeker API 接口下载内容提取器,这是一个示例程序.什么是内容提取器?为什么用这种方式?源自Python即时网络爬虫开源项目: ...