UI事件

包括以下事件：

1.load事件

当页面完全加载后（包括所有图像、js文件、css文件等外部资源）在window上面触发；
当所有框架都加载完毕时在框架集上面触发；
当图像加载完毕时在<img>元素上面触发；
当嵌入内容加载完毕时在<object>元素上触发。

两种定义onload事件处理程序的方式：
(1) js代码
(2) 为<body>元素添加一个onload属性

/*第一种方式*/

EventUtil.addHandler(window,"load",function(event){

  //进行相应的操作

})

/*第二种方式*/

<body onload="相应操作"></body>

1.1 图像上触发load事件

/*方式1*/

<img src="smile.gif" onload="alert('Image Loaded')">

/*方式2*/

var image = document.getElementById("myImage");

        EventUtil.addHandler(image, "load", function(event){

            event = EventUtil.getEvent(event);

            alert(EventUtil.getTarget(event).src);

        });

在创建新的<img>元素时，可以为其指定一个事件处理程序，以便图像加载完之后给出提示，但是重要的是在指定src属性之前先指定事件，如下：

/*为window指定事件，确保在document.body不会出错，页面已经完全加载*/

EventUtil.addHandler(window, "load", function(){

            var image = document.createElement("img");

       //指定src之前先指定事件

            EventUtil.addHandler(image, "load", function(event){

                event = EventUtil.getEvent(event);

                alert(EventUtil.getTarget(event).src);

            });

            document.body.appendChild(image);

            image.src = "smile.gif";

        });

注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。

1.2 <script>元素、<link>元素触发load事件

确定动态加载的js问价时候加载完毕，注意：与图像不同，只有设置了src属性并将新元素添加到文档后，才开始下载，所以对<script>元素来说，指定src属性和指定事件处理程序的先后顺序是不重要的。

 EventUtil.addHandler(window, "load", function(){

       var script = document.createElement("script");

       EventUtil.addHandler(script, "load", function(event){

           alert("Loaded");

        });

        script.src = "example.js";

        document.body.appendChild(script);

  })

    EventUtil.addHandler(window, "load", function(){

            var link = document.createElement("link");

            link.type = "text/css";

            link.rel= "stylesheet";

            EventUtil.addHandler(link, "load", function(event){

                alert("css loaded");

            });

            link.href = "example.css";

            document.getElementsByTagName("head")[0].appendChild(link);

    });

2. unload事件

与load事件对应，在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会发生unload事件。该事件用的最多的就是清除引用，以避免内存泄漏。

/*第一种方式*/

EventUtil.addHandler(window,"unload",function(event){

  //进行相应的操作

})

/*第二种方式*/

<body onunload="相应操作"></body>

unload事件是在一切都被卸载之后才触发的，那么在页面加载后存在的那些对象此时就不一定存在了，所以此时再操作DOM节点或元素的样式就会导致错误。

3.resize事件

当浏览器窗口被调整到一个新的高度或者宽度时，就会触发resize事件，该事件在window（窗口）上面触发，因此可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序，推荐的JavaScript方式如下：

EventUtil.addHandler(window,"resize",function(event){});

//传入的event对象有一个target属性，值为document

关于何时触发resize事件不同浏览器有不同的机制，所以不要在这个事件的处理程序中加入大量的代码。

4.scroll事件

该事件是在window对象上发生的，但它实际表示的是页面中相应元素的变化：

混杂模式下：通过<body>元素的scrollLeft和scrollTop来监控到这一变化。
标准模式下：通过<html>元素来反映这一变化（除了Safari，Safari仍然基于<body>跟踪滚动位置）

EventUtil.addHandler(window, "scroll", function(event){

            if (document.compatMode == "CSS1Compat"){    //标准模式下

                alert(document.documentElement.scrollTop);

            } else {

                alert(document.body.scrollTop);

            }

        });

与resize事件类似，scroll事件会在文档被滚动期间重复被触发，所以尽量保持事件处理程序代码简单。

焦点事件

焦点事件会在页面元素获得或失去焦点时触发，利用这些时间并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。有6个焦点事件：

blur：在元素失去焦点时触发，该事件不会冒泡，所有浏览器都支持。
focus：在元素获得焦点时触发，该事件不会冒泡，所有浏览器都支持。
focusin：与focus事件等价，但是它冒泡。
focusout：是HTML事件blur的通用版本。

事件类型-UI事件、焦点事件的更多相关文章

Javascript高级编程学习笔记（62）—— 事件（6）焦点事件
焦点事件焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用以及 document.activeElement 属性配合可以知晓用户在页 ...
DOM事件类型详解
一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...
《JAVASCRIPT高级程序设计》事件处理程序和事件类型
一.事件流谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...
浅谈JavaScript的事件（事件类型）
Web浏览器能够发生的事件有很多种类型,不同的事件类型有不同的事件信息.DOM3级的事件类型主要包括:UI事件,用户与页面上的元素交互时触发:焦点事件,元素获得或失去焦点触发:鼠标事件,用户通过鼠标在 ...
javascript 的事件类型（事件）
事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...
深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用前面的话鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件类型键盘事件用来描述键盘行为,主要有keydown ...
AS3事件类型
Event事件类型: ACTIVATE 激活事件 DEACTIVATE 对象休眠事件 ADDED 可视对象添加事件 ADDED_TO_STAGE 可视对象添加到舞台事件 REMO ...
jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于需要多添加一个属性: ...
在 SharePoint Server 2013 中配置建议和使用率事件类型
http://technet.microsoft.com/zh-cn/library/jj715889.aspx 适用于: SharePoint Server 2013 利用使用事件,您可以跟踪用户与 ...

随机推荐

Django框架之ORM常用字段
一.ORM介绍 1.ORM概念对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过 ...
u盘乱码了，如何备份
文/亡命之徒 2013年7月的最后一天,今天在公司下了些嵌入式的教程存在u盘里,准备拿回家到自己的本子上学习,不知怎的查到电脑上,显示一些文件夹,名字都是乱码,顿时心情扫地,无奈只能到互联网上寻找re ...
Java 线程高级
1.volatile关键字:当多个线程操作共享数据时,可以保证内存中的数据可见,相较于syncronized是一种较为轻量级的同步策略, 注意:1.volatile不具有“互斥性” 2.volatil ...
cmake使用的一些补充
一般使用cmake生成vs项目的时候,要么生成32位的要么生成64位的. 怎样将32位和64位在一个工程中打开呢,联系我们自己建立的工程都是32位和64位在一起的,就动手开始了. 实验对象是openc ...
mysql设置定时任务(对于中控心跳包的实现有意义)
转载:https://www.cnblogs.com/laowu-blog/p/5073665.html 目前用途:因为脚本正常开关会给中控发送消息但是万一脚本被强制关闭没有触发脚本关闭事件就无 ...
Vue-状态管理Vuex的使用
vuex是状态管理,是为了解决跨组件之间数据共享问题的,一个组件的数据变化会映射到使用这个数据的其他组件当中.如果刷新页面,之前存储的vuex数据全部都会被初始化掉.以一个全局单例模式管理当应用遇到多 ...
JS-apply、call、bind
最近查看了很多关于apply的文章,就随手记录一下. Apply apply: 方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args) 方法能接收两个 ...
CSS3绘制不规则图形，代码收集
三角形系列(三角形.倒三角.左三角.右三角.左上三角.右上三角.左下三角.右下三角) 主要用到的是:宽度高度设置为0, border的各个边的设置(各个边的透明或不透明): .triangle-up ...
ES6：字面量的增强写法
以前对象字面量的写法: 属性的增强写法: ES6中可以写成: 方法的增强写法 ES6中可以写成: ~~~~~ END ~~~~~
9000端口号被上一个ip地址占用，需要reboot才可以恢复正常ip端口问题
比如查看端口# lsof -i:9000 本机ip已经修改为192.168.0.50,而经过# lsof -i:9000查看到,端口是这样的,192.168.0.88:9000,显示的还是上一个ip的 ...

事件类型-UI事件、焦点事件