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
随机推荐
- Asp.net MVC5中Html.DropDownList的使用
一.静态下拉列表项的绑定 在下拉列表中绑定静态项,我们可以通过 SelectListItem 的集合作为数据源的下拉列表. @Html.DropDownList("dropRoles&quo ...
- Jq超链接提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- windows系统下搭建Python开发环境
1.首先下载最新的Python http://www.python.org/download/,我下载的是最新的Python3.5.1 2.下载完成之后开始安装,安装就比较简单了,一路下一步. 3.安 ...
- tomcat日志分析详解
在server.xml里的<host>标签下加上 <Valve className="org.apache.catalina.valves.AccessLogValve&q ...
- 198. House Robber,213. House Robber II
198. House Robber Total Accepted: 45873 Total Submissions: 142855 Difficulty: Easy You are a profess ...
- u-boot基本命令
1.查看环境变量 printenv 2.网络相关命令 设置开发板ip:setenv ipaddr 192.168.2.110 设置子网掩码:setenv netmask 255.255.255.0 设 ...
- Mysql 记录
1.创建用户命令: <!---->mysql> CREATE USER yy IDENTIFIED BY '123'; yy表示你要建立的用户名,后面的123表示密码 上面建立的用户 ...
- 关于web标准的理解(转)
从开始接触所谓web标准化,差不多也有两年多的时候了吧.从最初的疑惑和彷徨一直到现在,经历了每一个阶段.这段过程是痛苦的也是开心的,痛苦的是这个过程中没有人可以帮你答疑解惑,所有的问题都要你自己去解决 ...
- Python第一天-----简单登录验证
----------------------------------------- 编写登录接口 要求:1.输入用户名密码 2.认证成功后显示欢迎信息 3.输错三次后锁定 -------------- ...
- Javascript自定义类
JavaScript并不是严格的面向对象的语言,但是带有面向对象的一些特性,我们可以通过这些特性创建js中的自定义类. JavaScript中的类其实是function关键字包裹的一系列变量和方法. ...