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
随机推荐
- Test 2.14
i am back 写博客是个好习惯啊,要坚持下去才行 这些天的日子实在堕落
- css系列教程--margin padding column(完结)
margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin ...
- mvc ajax请求
@{ ViewBag.Title = "ajax"; } <script src="../../Scripts/jquery-1.4.4.js" type ...
- Hibernate 查询:HQL查询(Hibernate Query Languge)
HQL是一种面向对象的查询语言,其中没有表和字段的概念,只有类,对象和属性的概念. 使用HQL查询所有学生: public static void main(String[] args) { Sess ...
- 重写TextView,实现圆形背景,文本居中显示
最近,在做考试试题排版,产品提出题号希望显示成圆形背景,序号文本居中显示. (有点问题:文本没有绝对居中,暂时没做处理.) 为此,我采取的方式是重写TextView的onDraw方法,绘制一个圆形背景 ...
- c#&.NET3.0高级程序设计-02 Enum Demo
Enum 实例 using System; using System.Collections.Generic; public class MyClass { enum EmpType ...
- java 简单的文件上传
一.文件上传原理: 1.文件上传的前提: a.form表单的method必须是post b.form表单的enctype必须是multipart/form-data(决定了POST请求方式,请求正文的 ...
- 浅谈AngularJS启动引导过程
我们都知道AngularJS默认会执行app.js来启动整个angular项目,但你知道angular具体执行过程吗? 一.自动引导启动框架 例如我们有如下代码,我们想要完成一个指令功能: <h ...
- 使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法 ...
- JQuery动态表格
功能实现:点击添加按钮,表格增加一行并给其name属性赋予的值,方便获取 点击删除,自动删除这一行 JQuery中定义一个count变量 var count = 1; function add() { ...