• JavaScript 事件——“事件类型”中“HTML5事件”的注意要点


    contextmenu事件

    该事件用以表示何时应该显示上下文菜单,以便开发者取消默认的上下文菜单,转而提供自定义的菜单。

    因为该事件属于鼠标事件,所以其事件对象中包含与光标位置有关的所有属性。如:

    <body>
        <ul id="menu" >
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <script type="text/javascript">
        window.addEventListener("contextmenu", function () {
            event.preventDefault();
            var menu = document.getElementById("menu");
            menu.style.top = event.clientY + "px";
            menu.style.left = event.clientX + "px";
            menu.style.visibility = "visible";
        });
        window.addEventListener("click", function () {
            var menu = document.getElementById("menu");
            menu.style.visibility = "hidden";
        })
        </script>
    </body>
    

    chrome现在支持该事件,部分浏览器都支持。

    beforeunload事件

    该事件是为了让开发者有可能在页面卸载前阻止这一操作。event.returnValue设置的值是显示给用户的字符串(对于IE以及Firefox而言),同时作为函数的值返回(对safari和chrome而言),如:

    window.addEventListener("beforeunload", function () {
        var message = "do you realy want to leave?";
        event.returnValue = message;
        return message;
    }); //当离开时会显示信息和两个按钮;当刷新时也会提示;
    

    DOMContentLoaded事件

    该事件在形成完整的DOM树之后就会触发,不理会图像、js文件、css文件等其他资源下载完毕。

    readystatechange事件

    IE提供的事件,支持该事件的每个对象都有一个readyState属性,可能包含下列5个值中的一个:

    • uninitialized(未初始化):对象存在但尚未初始化;

    • loading(正在加载):对象正在加载数据;

    • loaded(加载完毕):对象加载数据完成;

    • interactive(交互):可以操作对象,但还没有完全加载;

    • complete(完成):对象已经加载完毕;

    并非每个对象都会经历这些阶段;值为interactive的readyState会在与DOMContentLoaded大致相同的时刻触发readystatechange事件。事件的event对象不会提供任何信息。

    switch (document.readyState) {
        case "loading":
            // 正在加载
            console.log("loading");
        case "interactive":
            // 交互阶段 可以操作对象了
            var span = document.createElement("span");
            span.textContent = "A <span> element.";
            document.body.appendChild(span);
            console.log("The document has finished loading. We can now access the DOM elements.")
        case "complete":
            // 完成阶段 完全加载完毕了
            console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
            console.log("The page is fully loaded.")
            break;
    }
    

    如:

    document.addEventListener("readystatechange", function () {
        if (document.readyState == "loading") {
            var newP = document.createElement("p");
            newP.appendChild(document.createTextNode("data1"));
            document.body.appendChild(newP);
        }
        if (document.readyState == "interactive") {
            var newP = document.createElement("p");
            newP.appendChild(document.createTextNode("data2"));
            document.body.appendChild(newP);
        }
    });
    //上述代码的第一段并没有在document.body下创建一个新的p,因为readyState为loading的时候并不能操作对象;
    

    又如:

    document.addEventListener("readystatechange", function () {
        if (document.readyState == "loading") {
            var newP = document.createElement("p");
            newP.appendChild(document.createTextNode("data1"));
            document.body.appendChild(newP);
    
            console.log(document.styleSheets[0].cssRules[0].cssText); //无效,因为loading的时候,对象没有加载完全加载完毕(complete)
        }
        if (document.readyState == "interactive") {
            var newP = document.createElement("p");
            newP.appendChild(document.createTextNode("data2"));
            document.body.appendChild(newP);
    
            console.log(document.styleSheets[0].cssRules[0].cssText); //可能有效,外部资源少的情况下完成阶段很可能在交互阶段之前出现;而在外部资源较多的情况下完成阶段很可能在交互阶段之后出现。
        }
        
    });
    //上述代码的第一段并没有在document.body下创建一个新的p,因为readyState为loading的时候并不能操作对象;
    

    交互阶段可能早于或晚于完成阶段出现,无法确保顺序。在包含较多外部资源的页面中,交互阶段更有可能出现的早;在包含较少外部资源的页面中,完成阶段更有可能出现的早。因此,为了尽可能抢到先机,有必要同时检测交互和完成阶段,如:

    document.addEventListener("readystatechange", function ready () {
        if (document.readyState == "interactive" || document.readyState == "complete") {
            document.removeEventListener("readystatechange", ready;
            console.log("Content loaded");
        }
    });
    

    见《js高级程序设计》第十三章事件类型html5事件中readystatechange事件,第二版391页

    这样编写的代码,可以达到与使用DOMContentLoaded十分接近的效果。

    另外,关于script元素和link元素的加载情况参考:

    就绪状态(readystatechange)事件

    pageshowpagehide事件

    “往返缓存(back-forward cache或bfcache)”——可以在用户使用浏览器的“前进”、“后退”按钮时加快页面的转换速度。如果页面位于bgcache中,那么再次打开该页面时就不会触发load事件。

    pageshow事件和event.persisted属性

    该事件在页面显示时触发,虽然这个事件的目标是document,但是必须将其事件处理程序添加到window。如:

    window.addEventListener('pageshow', function(event) {
        console.log('pageshow:');
        console.log(event); //PageTransitionEvent
    });
    

    属性是一个布尔值,如果页面保存在了bfcache中,则这个属性的值为true;否则为false。

    hashchange事件

    该事件以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员。必须把这个事件的事件处理程序添加给window对象。event对象中有两个属性:oldURLnewURL。这两个属性分别保存着参数列表变化前后的完整URL:

    window.addEventListener("hashchange", function () {
        console.log("Old URL:" + event.oldURL + "
    New URL: " + event.newURL);
    });
    

    检测:

    如果IE8是在IE7文档模式下运行,即使功能无效也会返回true:

    var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);
  • 相关阅读:
    p1012拼数题解
    LeetCode OJ :Unique Binary Search Trees II(唯一二叉搜索树)
    UVA 11827 Maximum GCD
    LightOJ1336 Sigma Function(约数和为偶数的个数)
    LightOJ 1197 Help Hanzo(区间素数筛选)
    LightOJ 1236
    BZOJ3339 Rmq Problem
    COJ983 WZJ的数据结构(负十七)
    LCA的五种解法
    hdu4223(dp)
  • 原文地址:https://www.cnblogs.com/leolovexx/p/7026584.html
Copyright © 2020-2023  润新知