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 + "\nNew URL: " + event.newURL);
});

检测:

假如IE8是在IE7文档形式下运转,纵然功用无效也会返回true:

var isSupported = ("onhashchange" in window) && (document.documentMode === undefined || document.documentMode > 7);
    原文作者:JS菌
    原文地址: https://segmentfault.com/a/1190000004329656
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞