`
zccst
  • 浏览: 3287171 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

[Event]事件(高程版)(一)事件类型

阅读更多
作者: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)
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




八、设备事件

九、触摸与手势事件
  • 大小: 16.9 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics