html事件中写js,JS—HTML5事件

添加load事件，当页面加载完毕后，执行该事件。

当右键单击时，触发contextmenu事件，

由于该事件为鼠标事件，所以可以获得鼠标的位置信息。

添加click事件，当鼠标单击其他地方时，隐藏该菜单。

注意该事件冒泡

beforeunload事件

为了让开发人员有可能在页面卸载之前阻止这一操作。这个事件会在浏览器卸载页面之前触发(包括跳转页面以及刷新页面)，可以通过它来取消卸载并继续使用原有页面。

EventUtil.addHandler(window,'beforeunload',function(event){

event=EventUtil.getEvent(event);

var message="im really going to miss you if you go.";

event.returnValue=message;

return message;

})

【困惑】

event.returnValue不是IE的事件对象中用于取消默认行为的属性么？

这里需要将返回的确认信息赋给这个属性。

奇怪的是，当我不写return message时，完全没有问题，在最新版的各浏览器内。

书上说，event.returnValue=message; 这样写是对ie与火狐而言，return message这样写是对webkit内核而言。

DOMContentLoaded事件

与window的load事件相比，该事件会在页面中的一切都加载完毕时触发，但这个过程可能因为要加载的外部资源过多而颇费周折。

DOMContentLoaded事件这个事件则在形成完整的dom树之后就触发。不理会图像，js，css文件。

EventUtil.addHandler(document,'DOMContentLoaded',function(event){

alert('content loaded')

})

IE9以前版本的IE浏览器不支持这个事件，书中建议在页面加载期间设置一个时间为0毫秒的超时调用。

setTimeout(function(){

//添加事件处理程序

},0)

readystatechange事件

这个事件的目的是提供与文档或元素的加载状态有关的信息。

支持这个事件的每个对象都有一个readyState属性，可能包括下列五个值中的一个。

uninitialized：对象存在，但尚未初始化

loading：对象正在加载数据

loaded：对象加载数据完成

interactive：可以操作对象了，但还没有完全加载完成。

complete 对象已经加载完毕

虽然这些状态看起来很直观，很有顺序，但是，并非所有对象都会经历这四个阶段。

对一般的dom对象，在包含较多外部资源时，交互阶段可能早于完成阶段，但是当页面中包含较少的外部资源时，完成阶段先于交互阶段的可能性更大。

EventUtil.addHandler(document,'readystatechange',function(event){

if(document.readyState=='interactive'||document.readyState=='complete'){

alert('content load');

EventUtil.removeHandler(document,'readystatechange',arguments.callee);

}

})

【解释】

document对象，只要可以操作该对象，我们便可以使用。所以还要满足后两个状态的任意一个就可以。

为了避免该dom对象在满足条件后重复执行事件内容，可以在执行一次后，便移除该对象。

通过这种方法，也可以判断，动态添加的外部文件js与css文件是否已经加载完成。

不过由于外部文件较大，有时候会停在loaded阶段，而永远不会完成，有时候又会跳过loaded阶段而直接完成。

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

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

EventUtil.addHandler(script,'readystatechange',function(event){

event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

if(target.readyState=='loaded'||target.readyState=='complete'){

alert('content load');

EventUtil.removeHandler(target,'readystatechange',arguments.callee);

}

});

script.src='../test.js';

document.body.appendChild(script);

})

测试后，不知道为什么，没有显示 alert('content load');,求解释。

pageshow和pagehide事件

在浏览器导航栏上，会有一对前进与后退的按钮，浏览器支持一个名叫往返缓存的特性。当我们打开一个网页，通过这个网页，又打开一个网页，此时可以按住当前网页浏览器的后退按钮，在不重新加载的条件下，回到上一个页面，也就是该页面已经存到这个往返缓存中去啦。

这两个事件，可以更好的理解往返缓存。

pageshow事件在页面显示时触发，会在load事件触发后触发，无论该页面是否来自往返缓存，都会触发这个事件。当来自往返缓存时，自然就不会触发load事件啦。该事件对象有一个属性，persisted，该属性是一个布尔值，表示该页面是否保存在了往返缓存中。

pagehide事件，在浏览器卸载页面之前触发，而且在unload事件之前触发。如果页面在卸载之后保存在了往返缓存中，那么persisted的值会被设为true。所以第一次触发pageshow事件时，该属性的值一定为false。

【注意】这两个事件的处理程序必须添加到window对象上。

haschange事件

方便程序员知道在URL列表发生变化时，触发这个事件，

这个事件的处理程序应该添加到window对象上。

之所以新增这个事件，是因为在ajax应用中，开发人员经常利用URL参数列表来保存或导航i信息。

该事件对象，包含两个额外的属性 oldURL与newURL，分别保存变换前后的url。