phpstudy集成环境

 首页 > js匿名函数执行、<script>代码段放html哪里的问题

js匿名函数执行、<script>代码段放html哪里的问题

页面中
<a href="img/1.jpg" onclick = "a()">1pic</a> //a() 加的有（）

<script>
function a(){
alert(9);
}
</script>

成功执行并弹出9
换一种写法：

<script>
var links = document.getElementsByTagName('a');
    for(var i=0; i<links.length; i++){
        links[i].onclick = function(){
            alert(0);
            return false;
        }
    }
</script>

当我点击a标签成功弹出0.可是仔细看代码只是把一个匿名函数赋给了onclick，如果执行不应该在后面加上（）吗

问题2：
《javascript DOM编程艺术》有这一段话，如果js文件在<head>标签出调用，它将在html文档加载之前运行。如果<script>标签位于</body>之前，也不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。所以脚本加载时文档可能不完整。
那么问题来了，页面到底是同步加载还是异步加载？请举例说明

html页面是顺序加载的（自上而下），但是script标签是异步加载的，即无阻塞并发处理，所以不知道在script中的哪一个文件被先加载，哪一个被后加载~

改成这样可能明显点：

  <a href="javascript:;" id="a">click</a>
  <script>
  var touch = document.getElementById('a');
  touch.onclick = function(){
    alert('aaa');
  }
  </script>

因为你的第一个方式是：

<a href="javascript:;" id="a" onclick = "a()">click</a>

可以理解为

touch.onclick = function a(){}

即将onclick事件指向了一个有名函数

而我上面写的是将touch.onclick指向了一个匿名函数，但本质上都是调用函数，所以会触发。

  1. 都是定义的函数。onclick HTML属性定义的内容是字符串，相当于

    document.getElementsByTagName('a')[0] = new Function("a()");

  2. 严格上讲页面就是一个 HTML 文件，无所谓同步还是异步，因为就一个！页面是顺序解析的，同步和异步加载是相对于页面加载中需要的其它资源文件来说的。一般情况下，CSS 是异步加载的，JS 是同步加载的。当然现代浏览器已经对 JS 同步加载这方面做了优化，可以实现并行加载了，但是执行还是顺序的，具体可参考阮老师的这篇文章内容和评论：http://www.ruanyifeng.com/blog/2011/10/javascript_loading.html。原文的意思可能是说当页面元素有使用 JS 动态生成的情况下代码执行在生成之前无法获取到所有元素吧。

1.元素上的onclick是一个表达式，在你点击的时候会执行这个表达式而已，你在循环中的是赋值，声明onclick的回调函数，这是两个概念。
2.加载可能是不保证顺序的，因为浏览器会并行加载脚本，但是执行一定是顺序执行，并且加载完成之前会阻塞页面渲染HTML代码，至于举例你直接用chrome查看network，查看下timeline就看到了。(defer不讨论)

【热门文章】
【热门文章】