全球主机交流论坛

标题: 有会JS的大神吗。。。求解答！ [打印本页]
作者: veryxe    时间: 2017-10-18 21:21
标题: 有会JS的大神吗。。。求解答！
在研究addLoadEvent函数,课本上面写的使用方法是
addLoadEvent(function1);
addLoadEvent(function2);
但是在我实际测试中，发现需要这么使用
addLoadEvent(function1());
addLoadEvent(function1());
否则，将只会执行function1。
我查询了相关的资料 发现有的说要加()有的说不要加。请问到底要不要加呢 有标准吗？
为什么window.onload就不用加呢？我测试了window.onload=func() 加了括号的也无错啊 。
一些问题 希望各位大神予以解答 万分感谢！

附上我测试的代码：

  1. function showPic(){
  2. var whichPic = document.getElementsByTagName("a");
  3. var i = 0;
  4.     for (; i < whichPic.length; i++) {
  5.         if(whichPic[i].getAttribute("class")=="pict"){
  6.             whichPic[i].onclick=function(){

  8.                 document.getElementById("ig").setAttribute("src",this.getAttribute("href"));
  9.                 document.getElementById("i1").firstChild.nodeValue=this.getAttribute("title");
  10.                 document.getElementById("i2").innerHTML=this.getAttribute("title");
  11.                 return false;

  13.             }
  14.         }

  16.     }
  17. }
  18. function createYuanSu(){
  19.     var tp = document.createElement("p");
  20.     var tt = document.createTextNode("你好世界！");
  21.     tp.appendChild(tt);
  22.     var bd = document.getElementsByTagName("body")[0];
  23.     bd.appendChild(tp);
  24. }

  26. function addLoadEvent(func){
  27.     var oldonLoad = window.onload;
  28.     if(typeof window.onload != 'function'){
  29.         window.onload=func;
  30.     }
  31.     else {
  32.         oldonload();
  33.         func();
  34.     }
  35. }

  37. addLoadEvent(createYuanSu());
  38. addLoadEvent(showPic());
复制代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <body>
  7. <img src="logo.png" id="ig" alt="图片占位符"> <br />
  8. <a href="赞美太阳.png" title ="赞美太阳！" class = "pict">赞美太阳吧！</a><br />
  9. <a href="logo.png" title ="这是logo！！"class="pict">LOGO!</a> <br />
  10. <p>下面两条是由两种方法修改的</p><br />
  11. <p id = "i1" title ="这是logo">a1</p><br />
  12. <p id = "i2" >a2</p>
  13. <p>下面是由元素创建实现的</p>
  14. <script type="text/javascript" src="sc.js"></script>
  15. </body>
  16. </html>
复制代码
作者: byss    时间: 2017-10-18 21:21
本帖最后由 byss 于 2017-10-18 21:49 编辑

不要括号，因为括号表示立即执行，因为执行了，所以看起来好像没有错，但就和你的事件绑定无关了。出现困惑的原因是你大小写写错了：

  1. function addLoadEvent(func){
  2.     var oldonLoad = window.onload;
  3.     if(typeof window.onload != 'function'){
  4.         window.onload=func;
  5.     }
  6.     else {
  7.         oldonload();
  8.         func();
  9.     }
  10. }
复制代码


第二个oldonload应该是oldonLoad，或者都命名成oldOnLoad
作者: veryxe    时间: 2017-10-19 15:41
byss 发表于 2017-10-18 21:48
不要括号，因为括号表示立即执行，因为执行了，所以看起来好像没有错，但就和你的事件绑定无关了。出现困惑 ...

感谢解答 解决了 是我少写了 window.onload=function(){}

作者: byss    时间: 2017-10-19 15:56
veryxe 发表于 2017-10-19 15:41
感谢解答 解决了 是我少写了 window.onload=function(){}

对，现在这样可以实现真正的addLoadEvent功能，之前的写法onload事件队列只能有两个函数
作者: veryxe    时间: 2017-10-19 16:03
byss 发表于 2017-10-19 15:56
对，现在这样可以实现真正的addLoadEvent功能，之前的写法onload事件队列只能有两个函数 ...

再请教一下。
window.onload=func();
window.onload=func
二者有区别吗？
作者: byss    时间: 2017-10-19 16:15
veryxe 发表于 2017-10-19 16:03
再请教一下。
window.onload=func();
window.onload=func

有。
第一个表示func先立即执行，执行以后func函数的返回值作为onload的回调函数，如果func的返回值不是函数类型，那么这个赋值其实是无效的。
第二个表示func作为页面加载完成的回调函数，在页面加载完成后，才会执行func函数。
作者: veryxe    时间: 2017-10-19 16:29
byss 发表于 2017-10-19 16:15
有。
第一个表示func先立即执行，执行以后func函数的返回值作为onload的回调函数，如果func的返回值不是 ...

万分感谢！



欢迎光临 全球主机交流论坛 (https://mjj.022333.xyz/) Powered by Discuz! X3.4