这两个js有冲突吗？-H5教程-PHP中文网

这两个js有冲突吗？

php中文网

发布： 2016-06-07 08:42:56

原创

1723人浏览过

回复内容：

a = 1;
a = 2;

你说运行完 a 是多少？ N首先，你这能用CSS完成绝大部分工作
其次，你可以组织一个高一点层次的入口函数去管理你onload到底执行什么，怎么执行，可以通过传入回调函数去扩展你的函数逻辑。
这语言太灵活了，快去感受感受 Window 的 onload 被第二个覆盖掉了。可以尝试 window.addEventListener('load', func...) 通过封装一个通用函数，可以避免这个问题，只要添加事件处理程序的时候使用该函数，window.onload就不会被覆盖。

<span class="kd">function</span> <span class="nx">addLoadHandler</span><span class="p">(</span><span class="nx">handler</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">old</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">===</span> <span class="s1">'function'</span><span class="p">)</span> <span class="p">{</span>
       <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
          <span class="nx">old</span><span class="p">();</span>
          <span class="nx">handler</span><span class="p">();</span> 
       <span class="p">}</span>     
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
       <span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="nx">handler</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>

登录后复制

多补点基础知识，多搜索，不要随便提问。你给 onload 赋值了 2 次，前次的值怎么可能还在？

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="nx">a</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
<span class="nx">alert</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>

登录后复制

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这个函数你赋值了两次。

这个东西大神也说过了，现成的如：

（截图源于《锋利的jQuery》第二版，如有侵权，请在评论中说明。）

问题回答完了。

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

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

具体到写法上，还有兼容问题，这个我就不写了，你找本书看看吧。

<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span>  <span class="kd">function</span><span class="p">(){</span>
   <span class="nx">a</span><span class="p">();</span>
   <span class="nx">b</span><span class="p">();</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">a</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'a'</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">b</span><span class="p">(){</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'b'</span><span class="p">)</span>
<span class="p">}</span>
登录后复制

你可以看下事件。直接使用onload，on等等的话后面定义会将前面覆盖，就像顾轶灵说的一样：a=1;a=2。所以事件绑定一般使用事件监听addeventlisten函数，这样就不会被覆盖。