javascript的事件加载

最新推荐文章于 2025-11-08 08:53:20 发布
原创 最新推荐文章于 2025-11-08 08:53:20 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #function #脚本 #js引擎 #jquery #iframe

本文探讨了网页加载时如何处理多个加载事件而不互相覆盖的方法，并逐步优化加载事件处理逻辑，包括使用闭包避免命名冲突、采用DOM2.0事件模型提高性能及实现页面内容快速呈现的技术。

通常来说，window.onload就够用了，如果想加载多个事件，我们可以采取以下方式：


window.onload = function(){
       func1();
       func2();
       func3();
       //更多加载事件………………
}

但如果由于某种特殊需要，我们不能合在一起写吗？如当前区域是面向管理员，后台生成页面时只有当用户是管理员，页面才生成这部分，而这部分也用到一些特殊的脚本，上面的方法就歇菜了！


//后台代码
<script type="text/javascript">
      window.onload = function(){
        func1();
        func2();
        //加载普通用户用到的脚本……
      }
</script>
<%# 以下脚本是为管理员准备的 %>
<% if @user.role == "manager"   %>
      window.onload = function(){
      func1();
      func2();
      //加载机密脚本……
      }
<% end %>

这种情况生成出来的页面拥有两个window.onload代码块，很显然，第二个覆盖掉第一个。这时，轮到loadEvent函数出场了。


var loadEvent = function(fn) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = fn;
    }else {
        window.onload = function() {
            oldonload();
            fn();
        }
    }
}

它非常完美地解决了互相覆盖的问题，用法如下：


loadEvent(func1);
loadEvent(func2);
loadEvent(func3);
//更多加载事件

但现实的问题总是如此出奇不意，也如此刁钻邪门。最近我想把所有的函数放到一个闭包中，以免除命名冲突之苦，比如那个有名的$的DOM选择器。JQuery，Prototype，mootool都用它做选择器的名字，共存成了个严重的问题。


(function(){
    if(!window.JS){
        window['JS'] = {}
    }
    var onReady = function(fn){
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = fn;
        }else {
            window.onload = function() {
                oldonload();
                fn();
            }
        }
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

不过像这个如此有名的函数其实还有一个缺陷，就是新加载的函数被放置于前一个加载函数的作用域之用，加载函数越多，其栈的层次越深，显然性能耗很大。不过像onclick,onload,onmouseout等这样函数，W3C把它们归属于DOM0的事件模型，好处是适用范围广，但签于其性能，于是又提出DOM1.0的事件模型与DOM2.0的事件模型，DOM2就是原微软的事件模型与原网景的事件模型的合璧，既能捕获又能冒泡，而且多绑定多类型事件而不会导致后者覆盖前者。于是人们总搞出了有名的addEvent函数出来，我们用addEvent来改造我们的事件加载。


(function(){
    if(!window.JS){
        window['JS'] = {}
    }
    var addEvent = function( obj, type, fn ) {
        if (obj.addEventListener)
            obj.addEventListener( type, fn, false );
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj.attachEvent( "on"+type, function() {
                obj["e"+type+fn]();
            } );
        }
    };
    var onReady = function(loadEvent,waitForImages) {
        if(waitForImages) {
            return addEvent(window, 'load', loadEvent);
        }
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

OK，没问题。上面的onReady函数有一个可选参数，用于是否待图片加载。我们知道JS引擎会在完成DOM树后才开始处理图片与音频等东西，但如果我们的页面严重依赖于脚本布局呢？！我们想尽快让页面呈现出大体形态，这就用到domReady了。我们在原基础上改进它。


(function(){
    if(!window.JS){
        window['JS'] = {}
    }
    var addEvent = function( obj, type, fn ) {
        if (obj.addEventListener)
            obj.addEventListener( type, fn, false );
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj.attachEvent( "on"+type, function() {
                obj["e"+type+fn]();
            } );
        }
    };
    var onReady = function(loadEvent,waitForImages) {
        if(waitForImages) {
            return addEvent(window, 'load', loadEvent);
        }
        var init = function() {
            if (arguments.callee.done) return;
            arguments.callee.done = true;
            loadEvent.apply(document,arguments);
        };
        if(!+"/v1"){
            (function(){
                try {
                    document.documentElement.doScroll("left");
                } catch(e) {
                    setTimeout( arguments.callee, 0 );
                    return;
                }
                init();
            })();
        }else{
            document.addEventListener( "DOMContentLoaded", function(){
                document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
                init();
            }, false );
        }
        return true;
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

dom标准浏览器用DOMContentLoaded，这是非常正现的W3C论DOM方法，与FF的DOMMouseScroll 不一样，基本上所有非IE内核的浏览器最新版都支持它了。IE下我们可以通过侦听document. documentElement. doScroll()来判断DOM树是否完成，原理是IE下只有当DOM树构建完成后才能doScroll。但它还不是尽善尽美，它在IE下无法判定iframe的内容是否加载完毕。我们继续改进它。


(function(){
    if(!window.JS){
        window['JS'] = {}
    }
    var addEvent = function( obj, type, fn ) {
        if (obj.addEventListener)
            obj.addEventListener( type, fn, false );
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj.attachEvent( "on"+type, function() {
                obj["e"+type+fn]();
            } );
        }
    };
    var onReady = function(loadEvent,waitForImages) {
        if(waitForImages) {
            return addEvent(window, 'load', loadEvent);
        }
        var init = function() {
            if (arguments.callee.done) return;
            arguments.callee.done = true;
            loadEvent.apply(document,arguments);
        };
        if(!+"/v1"){
            if(window.self == window.top){
                (function(){
                    try {
                        document.documentElement.doScroll("left");
                    } catch(e) {
                        setTimeout( arguments.callee, 0 );
                        return;
                    }
                    init();
                })();
            }else{
                document.attachEvent("onreadystatechange", function(){
                    if ( document.readyState === "complete" ) {
                        document.detachEvent( "onreadystatechange", arguments.callee );
                        init();
                    }
                });
            }
        }else{
            document.addEventListener( "DOMContentLoaded", function(){
                document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
                init();
            }, false );
        }
        return true;
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

我们简直是在重新实现jquery的$(document).ready(function(){ })！它功能非常强悍，配合利用闭包做成的命名空间，基本刀枪不入。而且它就只污染一个全局变量“JS”，可以与YUI媲美了（笑）。不过对于一般应用来说，我们用不着做到如此面面俱到。假如我们不需要对图片进行处理，页面也没有iframe，我们可以搞下面这个微缩版出来。


(function(){
    if(!window.JS){
        window['JS'] = {}
    }
    var onReady = function(loadEvent) {
        if(!+"/v1"){
            (function(){
                try {
                    document.documentElement.doScroll("left");
                } catch(e) {
                    setTimeout( arguments.callee, 0 );
                    return;
                }
                loadEvent();
            })();
        }else{
            document.addEventListener( "DOMContentLoaded", loadEvent, false );
        }
    }
    JS.onReady = onReady;
    var $ = function(id){
        return document.getElementById(id);
    }
    JS.$ = $;
})()

一些有用的链接

http://snipplr.com/view/6029/domreadyjs/

cheng5128
关注
JavaScript事件添加定时器
知而好问，然后能才
06-15 2173
舍友喝一杯茶的时间，我偷偷学会了js事件添加定时器
JavaScript事件
Python老吕的博客
05-27 1047
除了浏览器提供的内置事件，JavaScript还允许我们创建并触发自定义事件。通过构造函数，我们可以创建一个带有自定义详细信息和行为的事件对象。自定义事件在处理复杂的交互逻辑、组件间的通信等场景中非常有用。detail: {},bubbles: true, // 是否冒泡cancelable: true // 是否可以取消});// 触发自定义事件在事件监听器中，我们可以通过事件对象的detail// 输出: Hello, custom event!});
JavaScript窗体加载事件
xjdkxnhcoskxbco的博客
08-09 436
在JavaScript中，用于处理窗体加载事件的主要方法是使用 window.onload 属性或者 addEventListener 方法。执行时机: window.onload 在页面所有资源都加载完毕后执行，包括图片和其他媒体资源。window.onload 是一个事件属性，当整个页面（包括所有图像、样式表、脚本等）加载完成后触发。javascript。无论你选择哪种方式，这些方法都是用来确保在页面加载完成后执行特定的JavaScript代码，从而保证你的脚本能够在正确的时间点进行初始化和操作。
JavaScript 事件加载有哪些应用场景？
努力是为了站在万人之中，成为别人的光
06-24 8678
JavaScript是一种常用的脚本语言，具有丰富的事件处理机制。通过在页面加载过程中绑定和触发各种事件，可以实现丰富的交互功能和用户体验改善。本文将介绍JavaScript事件加载的概念和应用场景，并提供一些实例演示，帮助读者深入理解和应用事件加载。JavaScript事件加载是指通过JavaScript代码来绑定和处理网页上发生的各种事件。事件可以是用户交互行为（如点击、悬停、输入等），也可以是页面加载、网络请求等。
javascript事件
bugnotfound的博客
12-03 987
常见事件的概要简绍
JavaScript 事件处理全面指南
2503_91259466的博客
04-14 902
JavaScript允许创建和触发自定义事件：javascript// 创建事件// 监听事件// 触发事件// 带数据的自定义事件});
javascript 窗口加载事件相关问题
bcbobo21cn的专栏
03-02 1041
window.onload是窗口(页面)加载事件；
JavaScript常用事件演示
m0_71002854的博客
01-06 889
文章目录一、在JavaScript中什么是事件？二、什么是JavaScript 常用事件？三、常用JS事件代码示例:四、总结 一、在JavaScript中什么是事件？ JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。 二、什么是JavaScript 常用事件？ JavaScrip
JavaScript 事件监听详解
xycxycooo的博客
07-16 3067
在 JavaScript 编程中，事件监听是一种非常重要的机制，它允许我们在特定的事件发生时执行特定的代码。在这个示例中，点击内层 div 时，会先触发内层 div 的点击事件，然后触发外层 div 的点击事件（冒泡阶段）。在这个示例中，点击内层 div 时，会先触发外层 div 的点击事件，然后触发内层 div 的点击事件（捕获阶段）。事件对象包含有关事件的详细信息，如事件类型、目标元素、鼠标位置等。在这个示例中，点击内层 div 时，只会触发内层 div 的点击事件，不会触发外层 div 的点击事件。
【JavaScript】1.4 事件和DOM操作
Andy0214的专栏
11-13 2935
事件和DOM操作是JavaScript中非常重要的概念。通过理解和使用事件和DOM操作，我们可以创建动态的、交互式的网页。在接下来的章节中，我们将深入学习更多关于JavaScript的知识。希望你在学习的过程中能够找到乐趣，并且通过学习JavaScript，开启你的编程之旅！
javascript事件加载与预加载共9页.pdf.zip
10-30
例如，`addEventListener`是JavaScript中用于添加事件监听器的方法，它允许我们在事件触发时执行特定的代码。事件加载优化主要是关于如何更高效地处理事件，减少不必要的计算，提高页面响应速度。这包括使用事件委托...
javascript 事件加载与预加载
01-19
通常来说，[removed]就够用了，如果想加载多个事件，我们可以采取以下方式： 代码如下: [removed] = function(){ func1(); func2(); func3(); //更多加载事件……………… } 但如果由于某种特殊需要，我们不能合在...
javascript页面加载完执行事件代码
10-26
本文将深入探讨如何在页面加载完成后执行特定的JavaScript事件代码，以及在实现此功能时需要注意的几个关键点。 首先，介绍页面加载状态的判断方法。在JavaScript中，可以通过监听document对象的readyState属性变化...
javascript事件绑定学习要点
10-22
在JavaScript中，事件绑定是前端开发中的一项基础技术，它负责指定当特定事件发生时（如用户点击按钮、加载页面等），应该执行哪些代码。在学习JavaScript事件绑定时，主要涉及以下几个重要知识点。 首先，传统事件...
Sleeping-Cup-Chat：JavaScript驱动的高效公开聊天新选择
最新发布
yangrenrui的博客
11-08 575
JavaScript开源项目Sleeping-Cup-Chat提供高效公开聊天解决方案，基于WebSocket实现实时互动。该项目具备完善管理功能，包括权限设置、IP封禁和敏感词过滤，保障聊天秩序。支持历史记录保存和纯公开交流场景，适配企业、教育、社群等多种需求。GitHub地址：https://github.com/YANGRENRUIYRR/Sleeping-Cup-Chat
阶段性总结
WYyanyufei的博客
11-07 933
本文介绍了一个基于Vue 3和Spring Boot的前后端分离项目架构。前端采用Vue 3+Element Plus实现SPA应用，已完成路由系统、布局组件等基础框架，以及认证模块和文章展示模块。
HIKVISION前端一面面经整理
2301_82101106的博客
11-06 870
常用函数/核心概念：State（存储状态）、Mutation（修改状态的唯一途径，同步）、Action（处理异步，可调用Mutation）、Getter（计算派生状态，类似Vue的computed）、Module（模块化拆分状态）。• Promise：用于处理异步操作的对象，有三种状态：Pending（进行中）、Fulfilled（成功）、Rejected（失败），状态一旦改变不可逆。• 节流：滚动加载（滚动时固定频率请求数据）、高频点击按钮（如“快速点击搜索”）、鼠标移动事件（如拖拽时计算位置）。
jQuery UI 简介
lly202406的博客
11-06 445
jQuery UI 是一个功能强大且易于使用的 UI 库，可以帮助开发者快速创建美观、功能丰富的网页界面。通过掌握 jQuery UI，开发者可以提升网页的用户体验，同时提高开发效率。
vue在获取某一个div的大小，怎么确保div渲染好，内容撑开后才去获取大小
qq_43679365的博客
11-05 240
正常情况下，我们会在mounted钩子中使用document.getElementById(“xxx”).getBoundingClientRect()去获取id为xxx的这个div的大小信息。但有时候div里面是一个表格，还没渲染好，这时候就需要使用。如上所示，使用this.$nextTick包裹的代码会在页面完全渲染完成之后才去执行里面的代码，获取div的大小信息。
JavaScript事件加载与预加载技术详解
- 使用JavaScript为DOM元素添加事件监听是事件加载的一部分。例如，使用`addEventListener`函数来绑定事件处理器。 3. **事件委托**： - 事件委托是一种高效的事件处理方式，它利用了事件冒泡的机制，将事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值