- 浏览: 3294197 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具(开发)使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563:
感谢作者分享~请教下,http://www.lisa33xia ...
CSS基础:text-overflow:ellipsis溢出文本 -
u012206458:
$.ajax的error,complete,success方法 -
DEMONU:
谢谢,虽然不能给你赞助,但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes:
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础:text-overflow:ellipsis溢出文本 -
zenmshuo:
用过SpreadJS,也包含数据可视化的图表
推荐几个web中常用js图表插件
作者:zccst
一、UI事件
1,load
两种添加方式:js方式添加,<body onload="alert('Loaded')"></body>
img也可以触发load事件,无论在DOM中,还是HTML中,例如
<img src="smile.gif" onload="alert('Image loaded.')">,当然也可以用js方式实现
但一定要先添加事件,再指定src属性。
需要格外注意:新图像元素不一定要从添加到文档后才开始下载,主要设置了src属性就会开始下载。
2,unload
在文档被完全卸载后触发,如用户从一个页面切换到另一个页面。利用这个事件最多的情况是清除引用,以避免内存泄露。
3,resize
不同浏览器有不同的机制。IE,Safari,Chrome和Opera在浏览器窗口变化了1px时就触发,然后随着变化不断重复触发。FF只会在用户停止调整窗口时才触发。
所以,不能在该handler里加入大量计算的代码,导致浏览器变慢
4,scroll
二、焦点事件
blur, focus不冒泡(但focusin, focusout冒泡)
三、鼠标与滚轮事件
1,鼠标事件
mouseenter, mouseleave不冒泡
双击过程(七步走):down -> up -> click -> down -> up ->click -> dbclick
2,坐标
event.clientX, event.clientY 浏览器左上角
event.pageX, event.pageY 坐标是从页面本身而非视口的左边和顶边计算的。
3,屏幕坐标
screenX, screenY,在屏幕中的坐标
4,修改键
shift, ctrl, alt, windows, (cmd)
四、键盘与文本事件
五、复合事件
六、变动事件
七、HTML5事件
1,contextmenu
2,beforeunload
可以用来取消卸载,并继续使用原有页面
3,DOMContentLoaded事件
load颇费周折,而DOMContentLoaded事件则在形成完整的DOM树之后就会触发,不理会img,Javascript文件、CSS文件或其他资源是否已经下载完毕。
与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面进行交互。
要处理DOMContentLoaded事件,可以为document或window添加事件,尽管这个时间会冒泡到window,但它的目标实际上是document(其target是document)
IE9+, FF, Chrome, Safari 3.1+, Opera 9+都支持DOMContentLoaded事件。
对于不支持的浏览器,建议加一个0毫秒的超时调用,如下
4,readystatechange事件
批注:与XMLHTTPRequest对象的onreadystatechange只差了一个on。
IE支持,支持readystatechange事件的每一个对象都有一个readyState属性,可能包含下面5个值的一个:(未必所有阶段都经历)
uninitialized 未初始化
loading
loaded
interactive 交互。可以操作对象了,但还没有完全加载(如图片,js,css等)
complete 完毕
其中,readyState的interactive状态 与 DOMContentLoaded大致相同时刻触发readystatechange事件。
与load一起使用时,无法预测先后顺序。包含较多或较大外部资源时先于load,否则很难判断
5,pageshow, pagehide事件
6,hashchange事件
由于浏览器支持程度不同,最好还是使用location.hash
hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.
特点:
冒泡
HTML5
不能取消默认行为
目标:defaultView
更多信息请参看:http://zccst.iteye.com/blog/2169437
八、设备事件
九、触摸与手势事件
一、UI事件
1,load
两种添加方式:js方式添加,<body onload="alert('Loaded')"></body>
img也可以触发load事件,无论在DOM中,还是HTML中,例如
<img src="smile.gif" onload="alert('Image loaded.')">,当然也可以用js方式实现
但一定要先添加事件,再指定src属性。
需要格外注意:新图像元素不一定要从添加到文档后才开始下载,主要设置了src属性就会开始下载。
2,unload
在文档被完全卸载后触发,如用户从一个页面切换到另一个页面。利用这个事件最多的情况是清除引用,以避免内存泄露。
3,resize
不同浏览器有不同的机制。IE,Safari,Chrome和Opera在浏览器窗口变化了1px时就触发,然后随着变化不断重复触发。FF只会在用户停止调整窗口时才触发。
所以,不能在该handler里加入大量计算的代码,导致浏览器变慢
4,scroll
二、焦点事件
blur, focus不冒泡(但focusin, focusout冒泡)
三、鼠标与滚轮事件
1,鼠标事件
mouseenter, mouseleave不冒泡
双击过程(七步走):down -> up -> click -> down -> up ->click -> dbclick
2,坐标
event.clientX, event.clientY 浏览器左上角
event.pageX, event.pageY 坐标是从页面本身而非视口的左边和顶边计算的。
3,屏幕坐标
screenX, screenY,在屏幕中的坐标
4,修改键
shift, ctrl, alt, windows, (cmd)
四、键盘与文本事件
五、复合事件
六、变动事件
七、HTML5事件
1,contextmenu
2,beforeunload
可以用来取消卸载,并继续使用原有页面
3,DOMContentLoaded事件
load颇费周折,而DOMContentLoaded事件则在形成完整的DOM树之后就会触发,不理会img,Javascript文件、CSS文件或其他资源是否已经下载完毕。
与load事件不同,DOMContentLoaded支持在页面下载的早期添加事件处理程序,这也就意味着用户能够尽早地与页面进行交互。
要处理DOMContentLoaded事件,可以为document或window添加事件,尽管这个时间会冒泡到window,但它的目标实际上是document(其target是document)
EventUtil.addHandler(document, "DOMContentLoaded", function(event){ alert("DOMContentLoaded"); });
IE9+, FF, Chrome, Safari 3.1+, Opera 9+都支持DOMContentLoaded事件。
对于不支持的浏览器,建议加一个0毫秒的超时调用,如下
//在当前js处理完成后立即运行这个函数,为了确保这个方法有效,必须将其作为页面中的第一个超时调用;即便如此,也还是无法保证在所有环境中该超时调用一定会早于load事件被触发。 setTimeout(function(){ //在此添加事件处理程序 },0);
4,readystatechange事件
批注:与XMLHTTPRequest对象的onreadystatechange只差了一个on。
IE支持,支持readystatechange事件的每一个对象都有一个readyState属性,可能包含下面5个值的一个:(未必所有阶段都经历)
uninitialized 未初始化
loading
loaded
interactive 交互。可以操作对象了,但还没有完全加载(如图片,js,css等)
complete 完毕
其中,readyState的interactive状态 与 DOMContentLoaded大致相同时刻触发readystatechange事件。
与load一起使用时,无法预测先后顺序。包含较多或较大外部资源时先于load,否则很难判断
5,pageshow, pagehide事件
6,hashchange事件
由于浏览器支持程度不同,最好还是使用location.hash
hashchange事件会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发.
特点:
冒泡
HTML5
不能取消默认行为
目标:defaultView
更多信息请参看:http://zccst.iteye.com/blog/2169437
八、设备事件
九、触摸与手势事件
发表评论
-
js浏览器端判断当期是否在线
2015-04-17 20:50 2340作者:zccst 纯浏览器端解决办法就是轮询,img轮询和a ... -
scroll时判断向下滚动还是向上滚动
2015-03-30 16:53 38216作者:zccst 有时候需要用到,判断页面是向上还是向下滚动 ... -
[BOM]navigator知识点
2015-03-20 14:42 4820作者:zccst 历史 最早的时候有一个浏览器叫NCSA ... -
[html5]navigator.online属性检测用户是否在线
2015-03-20 14:11 5279作者:zccst navigator.online属性检测用 ... -
document.body、document.documentElement和window获取视窗大小的区别
2015-03-04 15:12 27554作者:zccst 参考网址:http://www.ido32 ... -
Document,Node,Element,HTMLDocument ,HTMLCollection,HTMLElement,NodeList
2015-01-05 15:38 7528作者:zccst 这个问题如 ... -
doctype和compatModel相关
2015-01-04 19:30 681作者:zccst 一、doctype 1,严格模式与混杂模 ... -
window.history
2014-12-23 10:37 10001作者:zccst 旧版: f ... -
js 页面刷新location.reload和location.replace的区别小结
2014-12-02 20:57 129487作者:zccst reload 方法,该方法强迫浏览器刷新当 ... -
又一次掉进encodeURIComponent的坑里了
2014-11-05 18:21 22404作者:zccst 原坑: get请求 ajax.get ( ... -
DOM元素在浏览器中的位置参数,如offset,ownerDocument
2014-10-08 17:07 4214作者:zccst 2014-10-21 区分clientX ... -
js跨域的多种解决办法
2014-09-20 09:41 903作者:zccst 2015-3-11 JavaScript ... -
[Event]事件(高程版)(二)事件处理程序
2014-06-17 18:00 732作者:zccst <input type=" ... -
target与currentTarget的区别(jqueryui方式获取z-Index)
2014-06-17 12:00 15880作者:zccst 2014-6-25 今天看了jQuery ... -
JSONP原理及实现
2014-06-09 16:47 12289作者:zccst 2015-04-30 更新 跨域实现的 ... -
事件基础(高程版)
2014-06-09 16:37 984作者:zccst 2014-5-4 一、事件流 标准:DOM ... -
DOM0-节点关系,节点操作API
2014-06-09 15:29 915作者:zccst 2014-09-20 补 ... -
document操作iframe
2013-12-13 16:26 1225作者:zccst //在iframe内获取父页面节点 win ... -
js-location对象
2013-12-11 17:05 1462zccst总结 2015-04-14 获取location的 ... -
document.body.scrollTop和document.documentElement.scrollTop
2013-09-14 14:44 1331作者:zccst 网页可见区域宽: document.bo ...
相关推荐
资源下载 event事件大全!请支持啊资源下载 event事件大全!请支持啊
mtk中event事件传输及响应事件的分析!
event 事件机制, 游戏或者各种操作行为的事件。
QT 中 QEvent 和 QKeyEvent事件的处理,其中QEvent包含QKeyEvent和QMouseEvent事件处理,在event中处理QKeyEvent事件将影响单独的QKeyEvent的事件处理函数
易语言利用Event事件实现多线程暂停继续源码。@Wlpha。
维多利亚时代event事件代码.doc
Event是Javascript中的重要事件,event代表事件的状态,专门负责对事件的处理,它的属性和方法能帮助我们完成很多和用户交互的操作,下面是对这个对象的简单总结,希望跟大家一起学习
该文档很好的总结了event事件的使用。请学习html的学吧们好好看哦
C# Event Bus Demo C# 事件总线实例 非常简单的事件总线实例,学习入门的基础
详细介绍PB 事件ID 的含义,方便初学者更快了解pb event
一个简单的关于VB的事件处理过程的演示程序,可以通过这种思想处理一些繁琐的过程^_^
《javascript》——event对象与事件
Javascript中的事件--Event对象
Visual Event是一个开源Javascript 书签,能提供绑定在DOM元素上的事件调试信息。Visual Event能显示如下信息: 1、哪一个元素有事件绑定 2、某元素上绑定的事件类型 3、事件触发后运行的代码段 4、定义...
附件包含 list.c list.h event.c 三个测试文件,功能完成简单的事件调用机制,对嵌入式架构来说有一定的优势
介绍mouse_event的用法,简单的例子介绍
非常好的onvif Event汉语资料,文档中详细阐述了onvif 事件处理模块的交互过程,对于做onvif开发有很大的帮助!
Passive Event Listeners - 被动事件监听器在写webapp页面的时候,Chrome 提醒 [Violat
Eventlog Analyzer是用来分析和审计系统及事件日志的管理软件,能够对全网范围内的主机、服务器、网络设备、数据库以及各种应用服务系统等产生的日志,进行全面收集和细致分析,通过统一的控制台进行实时可视化的...