欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

这两个js有冲突吗？

程序员文章站 2022-04-11 08:15:23
...

回复内容：

a = 1;
a = 2;

你说运行完 a 是多少？ N首先，你这能用CSS完成绝大部分工作
其次，你可以组织一个高一点层次的入口函数去管理你onload到底执行什么，怎么执行，可以通过传入回调函数去扩展你的函数逻辑。
这语言太灵活了，快去感受感受 Window 的 onload 被第二个覆盖掉了。可以尝试 window.addEventListener('load', func...) 通过封装一个通用函数，可以避免这个问题，只要添加事件处理程序的时候使用该函数，window.onload就不会被覆盖。
function addLoadHandler(handler) {
    var old = window.onload;
    if (typeof window.onload === 'function') {
       window.onload = function () {
          old();
          handler(); 
       }     
    } else {
       window.onload = handler;
    }
}
多补点基础知识，多搜索，不要随便提问。你给 onload 赋值了 2 次，前次的值怎么可能还在？

var a = 1;
a = 2;
alert(a);
window.onload = Fun1;
window.onload = Fun2;

很明显，把对象指向了新函数Fun2

utility.js
 function addOnloader(newFunc) {
        if (typeof window.onload !== 'function') {
            window.onload = newFunc;
        } else {
            var previousOnload = window.onload;
            window.onload = function() {
                previousOnload();
                newFunc();
            };
        }
    }

window.util.addOnloader = addOnloader;
只能有一个onload 我也来回答一下吧。问题很小白，但是我也是刚从小白出来的（想到自己的痛处，心软了...）。前面的如 @顾轶灵 和@Boring（@不到）说的很明白也很清楚，但是对于小白还是费解了一点。

这个还是基本功的原因，还是希望楼主多看一些基础的书籍，这种问题在论坛里或者QQ群里是基本不会有人回答而且还会被调侃小白或者说你不愿意去学习并且还是不会回答你问题的。我当时却会为这样的问题郁闷上两天。然后再去慢慢的找原因。

所以我想还是补充一下这个问题的答案。

以下是我的理解，不是专业书籍也不是专业语言。望轻喷。

原因：是因为同样的函数你赋值（或者叫做绑定函数）了两次，而这个函数是唯一的（在你这种写法的情况下），所以会后面的赋值覆盖了前面，自然只会执行后面的函数而且不会报错。

也就是说window.onload这个函数你赋值了两次。

这个东西大神也说过了，现成的如： 这两个js有冲突吗？
（截图源于《锋利的jQuery》第二版，如有侵权，请在评论中说明。）

问题回答完了。

现在解释一下 @learnshare 的说法：
概念：页面上任何一个元素的事件都是已经存在的，只是我们用的时候，拿来给我们想调用的事件赋值了一个函数（你上面贴出来的代码）或者绑定了一个函数（就是我现在解释的）。

这两张方式同样可以达到目的，但是还是有一些区别的。比如window.onload事件，如果用绑定的方式写，就不会冲突或者覆盖。

具体到写法上，还有兼容问题，这个我就不写了，你找本书看看吧。 
window.onload =  function(){
   a();
   b();
}

function a(){
alert('a');
}
function b(){
alert('b')
}
你可以看下事件。直接使用onload，on等等的话后面定义会将前面覆盖，就像顾轶灵说的一样：a=1;a=2。所以事件绑定一般使用事件监听addeventlisten函数，这样就不会被覆盖。这两个js有冲突吗？

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • 这两个js有冲突吗？

    • 专题推荐

    作者信息
    这两个js有冲突吗？

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • 这两个js有冲突吗？javascript初级视频教程
  • 这两个js有冲突吗？jquery 基础视频教程
    • 视频教程分类

    上一篇： input file自定义按钮美化(演示)_HTML/Xhtml_网页制作

    下一篇： 基于javascript编写简单日历_javascript技巧

    推荐阅读