JavaScript高级程序设计50.pdf

hashchange事件

HTML5新增了hashchange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员，之所以新增这个事件，是因为在Ajax应用中，开发人员经常要利用URL参数列来保存状态或导航信息

将hashchange事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它。此时的event对象额外包含两个属性：oldURL和newURL，分别保存着参数列表变化前后的完整URL

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

　　　　　　　　alert("OldURL:"+event.oldURL+"\nNewURL:"+event.newURL);

　　　　　　});

支持hashchange事件的浏览器有IE8+、Firefox3.6+、Safari5+、Chrome和Opera10.6+，这些浏览器中，只有Firefox6+、Chrome和Opera支持oldURL和newURL属性

为此，最好使用location对象来确定当前的参数列表

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

　　　　　　alert("Current hash:"+location.hash);

　　　　});

使用以下代码检测浏览器是否支持hashchange事件：

var isSupported=("onhashchange" in window);　　//这里有BUG

如果IE8是在IE7文档模式下运行，即使功能无效它也会返回true，更为稳妥的检测

var isSupported=("onhashchange" in window) &&(document.documentMode===undefined||document.documentMode>7);

设备事件

略

内存与性能

对于Javascript，添加到页面上的事件处理程序数量直接影响到页面的整体运行性能，利用好事件处理程序能够在一定程度上提示性能

事件委托

用于“事件处理程序过多”，利用事件冒泡，指定一个事件处理程序就可以管理某一类型的所有事件

var list=document.getElementById("myLink");

EventUtil.addHandler(list,"click",function(event){

　　　　　　event=EventUtil.getEvent(event);

　　　　　　var target=EventUtil.getTarget(event);

　　　　　　switch(target.id){

　　　　　　　　case "doSomething":

　　　　　　　　　　document.title="I changed the document's title";

　　　　　　　　　　break;

　　　　　　　　case "goSomewhere":

　　　　　　　　　　location.href="http://www.wrox.com";

　　　　　　　　　　break;

　　　　　　　　case "sayHi":

　　　　　　　　　　alert("hi");

　　　　　　　　　　break;

　　　　　　}

　　　　});

多数的鼠标事件和键盘事件可以使用事件委托

移除事件处理程序

内存中留有过时不用的“空事件处理程序”，也会造成web应用程序内存与性能问题

使用removeChild()、replaceChild()以及innerHTML前，尽可能手工移除事件处理程序

btn.onclick=null;

另一种情况是卸载页面的时候没有清理干净事件处理程序，最好是在页面卸载前通过onunload事件处理程序移除所有事件处理程序

模拟事件

开发人员可以在任意时刻触发特定的事件，就如同浏览器创建的事件一样，可以正常冒泡

DOM中事件模拟

可以在document对象上使用createEvent()方法创建event对象，接收一个表示要创建的事件类型的字符串，在DOM2级中，这些字符串都使用英文复数形式，在DOM3级中变成了单数

UIEvents（UIEvent）：一般化的UI事件，鼠标事件和键盘事件都继承自UI事件

MouseEvents（MouseEvent）：一般化的鼠标事件

MutationEvents（MutationEvent）：一般化的DOM变动事件

HTMLEvents：一般化的HTML事件，没有对应的DOM3级事件（HTML事件被分散到其他类别中）

“DOM2级事件”没有规定键盘事件，“DOM3级事件”给出了规定，IE9是目前唯一支持DOM3级键盘事件的浏览器

创建event对象后，每种类型的event对象都有一个特殊的方法，需要给这个方法传入适当的数据初始化该event对象，不同类型的event对象方法名称也不一样

最后一步是触发事件，使用dispatchEvent()方法，它需要传入一个参数，即表示要触发事件的event对象

模拟鼠标事件

createEvent()传入字符串“MouseEvents”，返回的对象有一个initMouseEvent()方法，接收15个参数

type（字符串）要触发的事件类型，click

bubbles（布尔值）是否可以冒泡

cancelable（布尔值）是否可以取消

view（AbstractView）与事件关联的视图，几乎总是设置为document.defaultView

detail（整数）与事件有关的详细信息，这个值一般只有事件处理程序使用，通常为0

screenX（整数）事件相对于屏幕的X坐标

screenY（整数）事件相对于屏幕的Y坐标

clientX（整数）事件相对于视口的X坐标

clientY（整数）事件相对于视口的Y坐标

ctrlKey（布尔值）是否按下了Ctrl键，默认为false

altKey（布尔值）是否按下了Alt键，默认为false

shiftKey（布尔值）是否按下了Shift键，默认为false

metaKey（布尔值）是否按下了Meta键，默认为false

button（整数）按下了哪一个鼠标键，默认为0

relatedTarget（对象）与事件相关的对象，只在模拟mouseover或mouseout时使用

（续下一篇）