美文网首页
HTML5事件

HTML5事件

作者: Mika_I | 来源:发表于2018-11-01 18:55 被阅读0次

    1. contextmenu事件

        显示上下文菜单的,以便开发人员取消默认的上下文菜单而提供自己的菜单。
    contextmenu事件是冒泡的,属于鼠标事件。

    2.beforeunload事件

            beforeunload事件发生在window上,是为了让开发人员在页面卸载前有可能阻止这一事件。这个事件会在浏览器写在页面之前触发。(这个事件的意图是将控制权交给用户)。
            returnValue赋值用户要显示的字符串(IE 、Firefx),会弹出对话框显示该信息,同时作为函数返回值(Safari、Chrome)。

    window.addEventListener("beforeunload", function(event){//IE兼容没做
        var message = "I'm realy going to miss you if you go.";
        event.returnVaule = message;
        return message;
    });
    

    3.DOMContentloaded事件

            load事件会在页面中的一切都加载完毕时触发,MODContentLoaded事件则在形成完整的DOM树之后就会触发,不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载完毕。可在document或window上添加事件 处理程序(这个事件会冒泡到window,其目标是document)。
            IE9+、Firefox、Chrome、Safari3.1+、和Opera 9+支持该事件。

    4.readystatechange事件

            提供与文档或元素加载状态有关的信息。支持该事件的对象都有一个readyState属性。
    · uninitialized(未初始化):对象存在但尚未初始化。
    · loading(正在加载):对象正在加载数据。
    ·loaded(加载完毕):对象加载数据完成。
    ·interactive(交互):可以操作对象了,但还没有完全加载。
    ·complete(完成):对象已经加载完毕。
    并非所有对象都会经历readyState这几个阶段,readyState属性的值也不总是连续的。
    这个事件的event对象不会提供任何信息,也没有目标对象。

    5. pageshow和pagehide事件

            Firefox和Opera有一个特性,“往返缓存”(back-forward cache, bfcache),为了浏览器前进和后退时加快页面的转换,整个页面都保存在内存里面,包括页面的数据,DOM和JavaScript的状态。如果页面保存在bfcache中,再次打开页面就不会触发load事件。
            无论页面是否来自bfcache,pageshow事件会在页面显示的时候触发。在重新加载的页面中,pageshow会在load事件触发后触发。bfcache中的页面会在完全恢复的那一刻触发。虽然这个事件的目标是document,但必须将事件处理程序添加到window上。pageshow事件的event对象包含一个persisted属性。如果页面被保存在bfcache中,值为true,否则为false。
            pagehide事件会在页面卸载的时候触发,在unload事件触发之前触发,事件在document上触发,事件处理程序要添加到window上。对于pagehide,如果页面卸载之后保存在bfcache中,persisted的值为true。
            支持改时间的浏览器有Firefox、Safari 5+、Chrome、Opera。IE9及之前版本不支持这两个事件。

    6.hashchange事件

            在ajax应用中,开发人员经常要利用URL参数列表来保存状态或导航信息。
            hashchange事件出力程序必须添加给window对象,只要URL残花列表发生变化就会调用它。此时event对象额外包含两个属性:oldURL和newURL,分别保存着参数列表变化前后完整的URL。
            支持hashchange的事件浏览器有IE8+、 Firefox3.6+、Safari5+、Chrome和Opera10.6+。其中支持oldURL和newURL的有Firefox6、Chrome和Opera。所以最好使用location对象来确定当前的参数列表。(location.hash)

    相关文章

      网友评论

          本文标题:HTML5事件

          本文链接:https://www.haomeiwen.com/subject/qnyxxqtx.html