Question

我无法理解执行顺序在这里：

 <script>
  $(function(){
    function f(id){
       document.body.innerHTML  += "<p>executing handler for div " + id + "</p>";
    }

    document.getElementById("div1").onclick = function(){
      f("1");
    }

    document.getElementById("div2").onclick = function(){
      f("2");
    }

    document.getElementById("div3").onclick = function(){ 
      f("3");
    }
  });
</script>

我想知道的是＆＃39;功能＆＃39;和＆＃39; f＆＃39;叫做？是否有人点击“div”＆＃39; div然后函数被调用？如果是这样，为什么功能在＆＃34; =＆＃34;的右侧？运营商？

Answer 1

当有人点击div1时，onclick方法会触发函数f，其值为1。单击div2 / 3时同样，使用这些值调用f。

所有f都会更改页面内容以显示消息。

我不确定为什么这会使用document.body.innerHTML，但我通常希望看到显示消息的div，例如document.getElementById('message').innerHTML。

我有一种感觉（没有检查）document.body.innerHTML会将页面的整个内容更改为f输出的值。我怀疑这是理想的结果。

Answer 2

在评论中逐行解释：

 <script>

  // this is a jQuery shorthand for $(document).ready. That means, that this function is executed automatically, when the DOM is ready
  $(function(){

    // declaration of a function that will be executed when it's called from somewhere. 'id' is an argument that can be passed
    function f(id){
       document.body.innerHTML  += "<p>executing handler for div " + id + "</p>";
    }

    // 'onclick' is an event handler. When you click the div container with the id 'div1', then the function, set after '=', gets executed
    document.getElementById("div1").onclick = function(){

      // call the function that you declared above with the argument "1"
      f("1");
    }

    document.getElementById("div2").onclick = function(){
      f("2");
    }

    document.getElementById("div3").onclick = function(){ 
      f("3");
    }
  });
</script>

Answer 3

如果我根据您的“为什么功能位于=运营商右侧？”的问题正确理解您，则您的问题与以下代码中的= function(){确实相关。< / p>

document.getElementById("div1").onclick = function(){
  f("1");
}

此代码正在执行的操作是将匿名函数分配给onclick元素的div1属性。

当用户点击div1元素时，将执行此匿名函数。在匿名函数中，调用函数f传递字符串"1"。

需要匿名功能的原因是因为如果你要排除这个并且只是这个：

document.getElementById("div1").onclick = f("1");

不是在单击元素时调用f函数，而是立即调用f函数并将返回值（未定义）设置为onclick属性。通过将其包装在匿名函数中，您可以获得在单击元素时使用给定参数调用f所需的效果。

Answer 4

根据你的要求

$(function(){

});

在页面加载时执行

如果你想调用函数f（），你需要调用

$(function(){
f();
});

Answer 5

$(function(){...}是jQuery function for document.ready。所有DOM准备就绪后立即执行此功能。这是jQuery的一个特性。你没有明确地调用它--jQuery会为你处理它。

f()函数附加到为三个div元素定义的单击处理程序（onclick）。单击它们后，它们会触发f()功能。

该函数位于赋值的右侧，因为代码实际上说的是将默认的onclick函数替换为已定义的函数。

如何在此代码中调用函数？

5 个答案: