• 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+" NewURL:"+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时使用

    (续下一篇)

  • 相关阅读:
    PDF文档的合并与拆分.py
    pandas数据预处理
    Python读取PDF文档中的表格数据
    Idea中创建多模块项目
    maven打包报错:Cannot find matching toolchain definitions for the following toolchain types
    什么情况下会用到final?
    运维监控OpenFalcon安装Agent实战篇
    设计模式相关
    JMX笔记整理
    Apache Maven ToolChains的使用
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3787791.html
Copyright © 2020-2023  润新知