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

eechen 发布于2019-08-02 18:29 / 995人阅读

摘要：因为该事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。事件和属性该事件在页面显示时触发，虽然这个事件的目标是，但是必须将其事件处理程序添加到。事件该事件以便在的参数列表及中号后面的所有字符串发生变化时通知开发人员。

contextmenu事件

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

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


    
        item1
        item2
        item3

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  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)事件

pageshow和pagehide事件

“往返缓存（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对象中有两个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整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);

私有云 idc机房托管 js事件类型 html5事件推送 vps日常维护中的一些要点总结 javascript的事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/55391.html

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

摘要：因为该事件属于鼠标事件，所以其事件对象中包含与光标位置有关的所有属性。事件和属性该事件在页面显示时触发，虽然这个事件的目标是，但是必须将其事件处理程序添加到。事件该事件以便在的参数列表及中号后面的所有字符串发生变化时通知开发人员。 contextmenu事件该事件用以表示何时应该显示上下文菜单，以便开发者取消默认的上下文菜单，转而提供自定义的菜单。因为该事件属于鼠标事件，所以其事...

rozbo 2019-08-22 11:00 评论0 收藏0
JavaScript DOM 事件初探

摘要：级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。对象只存在于事件处理程序执行期间，一旦执行完毕，立即被销毁。焦点事件焦点事件会在页面元素获得或失去焦点时触发。 JavaScript DOM 事件初探原文链接事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间，比如单击、双击、鼠标悬浮等。事件流事件流描述的是从页面中接收事件的顺序，或者说是事件在页面中传播...

Moxmi 2019-08-20 11:14 评论0 收藏0
JavaScript 事件——“事件类型”中“UI事件”的注意要点

摘要：事件这个事件在文档被完全卸载后触发。事件当浏览器窗口被调整到一个新的高度或宽度，就会触发该事件。事件该事件虽然在对象上发生的，但实际表示的是页面中响应元素的变化。事件关于等事件以后再讨论事件关于等事件以后再讨论事件关于等事件以后再讨论 DOM3级事件规定了一下几类事件 UI事件，当用户与页面上的元素交互时除法；焦点事件，元素获得或失去焦点；鼠标事件，通过鼠标在页面上执行操作；滚...

sushi 2019-08-19 17:22 评论0 收藏0
JavaScript 事件——“模拟事件”的注意要点

DOM中的事件模拟三个步骤：首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串： UIEvents（DOM3中的UIEvent）鼠标和键盘事件； MouseEvents（DOM3中的MouseEvent）鼠标事件； MutationEvents（DOM3中的MutationEvent）变动事件； HTMLEvents（没有...

BakerJ 2019-08-19 17:26 评论0 收藏0
JavaScript 事件——“事件类型”中“复合事件”和“变动事件”的注意要点

摘要：复合事件复合事件是级事件中心添加的一类事件，用于处理的输入序列。这个事件在之后触发在一个节点被直接从文档中移除，或通过子树间接从文档中移除之前触发。最后一个触发的事件是，触发于新插入节点的父节点。复合事件复合事件是DOM3级事件中心添加的一类事件，用于处理IME的输入序列。 compositionstart、compositionupdate、compositionend 复合...

Meathill 2019-08-19 17:24 评论0 收藏0