javascript中beforeunload事件及DOMContentLoaded事件怎么用

本篇内容介绍了“javascript中beforeunload事件及DOMContentLoaded事件怎么用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了沧州免费建站欢迎大家使用！

1.beforeunload 事件

之所以有发生在 window 对象上的 beforeunload 事件，是为了让开发人员有可能在页面卸载前 阻止这一操作。这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。 但是，不能彻底取消这个事件，因为那就相当于让用户无法离开当前页面了。为此，这个事件的意图是 将控制权交给用户。显示的消息会告知用户页面行将被卸载(正因为如此才会显示这个消息)，询问用 户是否真的要关闭页面，还是希望继续留下来如图所示。 为了显示这个弹出对话框，必须将 event.returnValue 的值设置为要显示给用户的字符串(对 IE及 Fiefox而言)，同时作为函数的值返回(对 Safari和 Chrome而言)，如下面的例子所示。

EventUtil.addHandler(window, "beforeunload", function(event){

event = EventUtil.getEvent(event);

var message = "I'm really going to miss you if you go.";

event.returnValue = message;

return message;

});

IE和 Firefox、Safari和 Chrome都支持 beforeunload 事件，也都会弹出这个对话框询问用户是否 真想离开。Opera 11及之前的版本不支持 beforeunload 事件。

DOMContentLoaded 事件 如前所述，window 的 load 事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要 加载的外部资源过多而颇费周折。而 DOMContentLoaded 事件则在形成完整的 DOM树之后就会触发， 不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。与 load 事件不同， DOMContentLoaded 支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面 进行交互。 要处理 DOMContentLoaded 事件，可以为 document 或 window 添加相应的事件处理程序(尽管 这个事件会冒泡到 window，但它的目标实际上是 document)。来看下面的例子。

EventUtil.addHandler(window, "DOMContentLoaded", function(event){

alert("Content loaded.");

});

2.DOMContentLoaded 事件

对象不会提供任何额外的信息(其 target 属性是 document)。 IE9+、Firefox、Chrome、Safari 3.1+和 Opera 9+都支持 DOMContentLoaded 事件，通常这个事件 既可以添加事件处理程序，也可以执行其他 DOM操作。这个事件始终都会在 load 事件之前触发。 对于不支持 DOMContentLoaded 的浏览器，我们建议在页面加载期间设置一个时间为 0毫秒的超 时调用，如下面的例子所示。

setTimeout(function(){

//在此添加事件处理程序

}, 0);

这段代码的实际意思就是：“在当前 JavaScript 处理完成后立即运行这个函数。”在页面下载和构建 期间，只有一个 JavaScript 处理过程，因此超时调用会在该过程结束时立即触发。至于这个时间与 DOMContentLoaded 被触发的时间能否同步，主要还是取决于用户使用的浏览器和页面中的其他代码。 为了确保这个方法有效，必须将其作为页面中的第一个超时调用;即便如此，也还是无法保证在所有环 境中该超时调用一定会早于 load 事件被触发。

“javascript中beforeunload事件及DOMContentLoaded事件怎么用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

本文标题：javascript中beforeunload事件及DOMContentLoaded事件怎么用
网站链接：https://www.cdcxhl.com/article38/jsspsp.html

成都网站建设公司_创新互联，为您提供微信小程序、建站公司、移动网站建设、自适应网站、外贸网站建设、外贸建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联