当前位置: 首页 > news >正文

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);

相关文章:

  • iOS网络-NSURLSession/AFNetworking发送HTTPS网络请求
  • 打印机连接常见故障
  • -----二叉树的遍历-------
  • Highcharts tooltip显示数量和百分比
  • Listen第二个参数的意义
  • 发布mvc报错:403.14-Forbidden Web 服务器被配置为不列出此目录的内容
  • 在Unity中实现一个简单的消息管理器
  • 重要的方法
  • Docker入门最佳实践
  • webpack 4.x 搭建项目脚手架
  • python学习第十二课
  • 用事件修饰符来修改事件
  • PHP慢慢长路之问题与解决方法(2)——用navicat导出数据库出错问题解决
  • DevOps/TestOps概念
  • 高级特性(8)- JavaBean构件
  • 9月CHINA-PUB-OPENDAY技术沙龙——IPHONE
  • .pyc 想到的一些问题
  • 0x05 Python数据分析,Anaconda八斩刀
  • 2017 前端面试准备 - 收藏集 - 掘金
  • github从入门到放弃(1)
  • HTML中设置input等文本框为不可操作
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • Java Agent 学习笔记
  • js中forEach回调同异步问题
  • learning koa2.x
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • Linux快速配置 VIM 实现语法高亮 补全 缩进等功能
  • node入门
  • 山寨一个 Promise
  • 通过获取异步加载JS文件进度实现一个canvas环形loading图
  • 为什么要用IPython/Jupyter?
  • 在weex里面使用chart图表
  • ​第20课 在Android Native开发中加入新的C++类
  • # Panda3d 碰撞检测系统介绍
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • (10)工业界推荐系统-小红书推荐场景及内部实践【排序模型的特征】
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • (C语言)输入一个序列,判断是否为奇偶交叉数
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (pojstep1.1.2)2654(直叙式模拟)
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (完整代码)R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (一)Java算法:二分查找
  • (转载)(官方)UE4--图像编程----着色器开发
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • .NET Core 2.1路线图
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .Net下的签名与混淆
  • .NET值类型变量“活”在哪?
  • /*在DataTable中更新、删除数据*/
  • [ CTF ] WriteUp- 2022年第三届“网鼎杯”网络安全大赛(朱雀组)
  • [ 第一章] JavaScript 简史