UI Events 用户界面事件

UI Events并不是直接与用户行为相关，UI Event 包括如下：

　　DomActivate：当元素被用户的某些行为激活时，触发该事件，例如用户的鼠标或者键盘事件。这一事件在DOM3级事件中被废弃了，FF2+和chrome支持，犹豫跨浏览器实现机制的不同，不推荐使用这个事件。

　　load：在window对象上触发是当页面加载完毕之后触发的，在frameset 是当所有的frames都加载完毕之后触发，当指img标签时，是指图片加载完毕之后等等。

　　unload：在window对象上触发是当页面卸载完毕之后触发的，在frameset 是当所有的frames都卸载完毕之后触发，当指img标签时，是指图片卸载完毕之后等等。

　　abort：当一个元素没有完全加载完，在用户停止了下载操作之前，而触发。

　　error：当window的javascript发生错误时触发，当img不能加载是触发，或者object元素不能被加载时触发，当frameset中的一个或多个frame不能被加载时触发，
　　select：当用户选择textbox中一个或多个字符时触发该事件。
　　resize：当window或者frame被改变大小的时候触发。
　　scroll：当用户滚动一个带滚动条的元素时触发。
　　绝大多数的HTML事件，要么与window对象相关，要么与form控件相关。
　　判断一个浏览器是否在DOM2级事件上支持HTML事件，可以采用下面的代码：
　　var isSupport = document.implementation.hasFeature('HTMLEvents','2.0');
　　若果在dom2级事件上实现的话，将会返回true，否则返回false
　　var isSupported = document.implementation.hasFeature(“UIEvent”, “3.0”);
　　在dom3级上同理。

The load Event

　　load事件可能是javascript中最常用到的。对window对象而言，当网页被完全加载完毕时，触发load事件。总而言之，任何发生在window上的事件可以通过body元素的属性进行访问，因为在HTML中是没有权限访问window元素。

　　对于img标签当你制定img标签的src属性时，同样可以触发他的load事件。

　　如下：


代码如下:

EventUtil.addHandler(window, “load”, function(){
var image = new Image();
EventUtil.addHandler(image, “load”, function(event){
alert(“Image loaded!”);
});
image.src = “smile.gif”;
});

　　同样也有其他的元素以一种非标准的方式支持load event，如script标签元素，当在 IE9+、FF、Opera、Chrome、Safari3.0+中动态加script并且加载完成时将触发script的load事件，与img元素不同，js文件开始加载是在src属性被赋值之后，而且这个元素已经被加入到document之中。因此Event handler的顺序与src赋值无关。
　　例子如下：


代码如下:

EventUtil.addHandler(window, “load”, function(){
var script = document.createElement(“script”);
script.type = “text/javascript”;
EventUtil.addHandler(script, “load”, function(event){
alert(“Loaded”);
});
script.src = “example.js”;
document.body.appendChild(script);
});

　IE和Opera同样支持link标签的load事件。

The unload Event
　　与load事件相对的就是 unload事件，这个事件当document完全被卸载的时候触发。典型的例子就是，浏览器从一个一面导航到另一个页面的时候会触发该事件，并且通常是用这个事件来释放内存，避免没有必要的内存占用。与load事件相似，unload事件可以通过两种方式进行创建即通过js和通过HTML属性来创建。
　　对于unload事件的处理函数要格外的小心，因为自从卸载事件被激发,并不是所有的对象都是可用的,当页面被加载仍然可用。试图操作Dom节点的位置或者改变外观会出现错误。

The resize Event

　　当浏览器窗口的长度和高度被改变时会触发 resize 事件，这个事件发生在window对象上，注册方式与前两个事件的注册方式相同。

　　与其他发生在window对象上的事件相同，在dom浏览器中该事件的target指的是document，而IE8 和 更早版本的浏览器中是没有相关属性可以使用的。

　　在不同的浏览器中resize事件存在这很多不同，在IE safari chrome opera中只要修改一个像素的值，该事件就会被触发。而在FF中只有当重置大小操作停止时才会触发这个事件。并且浏览器的最大 最小化同样会触发此事件。

The scroll Event

　　虽然scroll事件发生在window对象上，但他也同样适用于页面级元素。在混在模式下，对应的变化反映在<body>元素的scrollLeft和scrollTop属性；在标准模式下，对应的变化发生在<HTML>元素上,除了safari，其他的浏览器都遵守上述的规则，例如：

代码如下:

EventUtil.addHandler(window, “scroll”, function(event){
if (document.compatMode == “CSS1Compat”){//标准模式反映在html上。
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});

赞 (0)

相关推荐

  • UI Events 用户界面事件

    UI Events并不是直接与用户行为相关,UI Event 包括如下: DomActivate:当元素被用户的某些行为激活时,触发该事件,例如用户的鼠标或者键盘事件.这一事件在DOM3级事件中被废弃了,FF2+和chrome支持,犹豫跨浏览器实现机制的不同,不推荐使用这个事件. load:在window对象上触发是当页面加载完毕之后触发的,在frameset 是当所有的frames都加载完毕之后触发,当指img标签时,是指图片加载完毕之后等等. unload:在window对象上触发是当页面卸

  • JavaScript高级程序设计 事件学习笔记

    第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档). □所有浏览器均支持事件冒泡.Firefox.chrome.safari将事件一直冒泡到window对象. 1.2事件捕获(Netscape事件流) □不太具体的节点更早收到事件,而具体的节点最后收到节点. □Safari.chrome.Opera.firefox支持,但从window对象

  • 简单讲解Android开发中触摸和点击事件的相关编程方法

    在Android上,不止一个途径来侦听用户和应用程序之间交互的事件.对于用户界面里的事件,侦听方法就是从与用户交互的特定视图对象截获这些事件.视图类提供了相应的手段. 在各种用来组建布局的视图类里面,你可能会注意到一些公共的回调方法看起来对用户界面事件有用.这些方法在该对象的相关动作发生时被Android框架调用.比如,当一个视图(如一个按钮)被触摸时,该对象上的onTouchEvent()方法会被调用.不过,为了侦听这个事件,你必须扩展这个类并重写该方法.很明显,扩展每个你想使用的视图对象(只

  • 深入解析JavaScript框架Backbone.js中的事件机制

    深入解析JavaScript框架Backbone.js中的事件机制

    事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model

  • JQuery自定义事件的应用 JQuery最佳实践

    知识要点: 1,自定义事件custom events及事件的订阅 2,trigger.bind.unbind方法的使用 3,带命名空间的自定义事件 将下面内容粘贴至txt文档后再直接粘贴至firebug的控制台,运行看看. 复制代码 代码如下: /* JQuery自定义事件的应用-Javascript OO 有一帅哥叫Levin,在某公司前端设计部工作,他的主管是大帅哥A,经理是大美眉B. 领导们希望可以抽空瞄瞄这家伙每周的工作情况,于是... Levin每周一要用google doc写一份关于

  • ASP.NET中实现定制自己的委托和事件参数类

    本文实例讲述了ASP.NET中实现定制自己的委托和事件参数类的方法,对于学习ASP.NET有很好的参考借鉴价值.具体方法如下: 一般在实际开发中,对于事件不需要传递数据信息时,像上面的KingTextBox控件的事件,在引发事件时传递的参数为EventArgs.Empty,如下所示: OnTextChanged(EventArgs.Empty); 这是因为控件KingTextBox的TextChanged事件比较简单,这里不需要参数对象传递数据.但像一些复杂的控件比如GridView的按钮命令事

  • node.js的事件机制

    首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发, 所以性能非常高~ 那么什么是单进程单线程呢~(写给语文跟我一样不好的小伙伴) 我们来看下单进程和多进程的区别: 1.  多进程的优势在于任务的独立性,比如某个任务单独作为一个进程的话,崩溃只影响自己的服务,其他任务不受影响.如果是多个任务在同一个进程内部利用多个线程进行处理,某个线程发生了未处理的异常的话,会导致整个进程完蛋,所有的任务跟着遭殃 2.  从资源分配上来说,多进程方案比多线

  • Laravel给生产环境添加监听事件（SQL日志监听）

    本文主要给大家介绍的是关于Laravel给生产环境添加监听事件(SQL日志监听)的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: laravel版本:5.2.* 一.创建监听器 php artisan make:listener QueryListener --event=Illuminate\\Database\\Events\\QueryExecuted or sudo /usr/local/bin/php artisan make:listener QueryListener

  • MYSQL事件查看器使用介绍

    要查看当前是否已开启事件调度器 SHOW VARIABLES LIKE 'event_scheduler'; 开启事件查看器 SET GLOBAL event_scheduler = 1; 创建事件 语法: CREATE EVENT [IF NOT EXISTS] event_name ON SCHEDULE schedule [ON COMPLETION [NOT] PRESERVE] [ENABLE | DISABLE] [COMMENT 'comment'] DO sql_statemen

  • Node.js中HTTP模块与事件模块详解

    Node.js中HTTP模块与事件模块详解

    Node.js的http服务器 通过使用HTTP模块的低级API,Node.js允许我们创建服务器和客户端.刚开始学node的时候,我们都会遇到如下代码: 复制代码 代码如下: var http = require('http'); http.createServer(function (req,res) {     res.end('Hello World\n'); }).listen(3000,"127.0.0.1"); console.log("Server funni

随机推荐