Question

<div id='dependent'>
<input type="button" value="Add" id='btn' onclick='addfunction()' />
</div>

<script type="text/javascript">

    var a = 1;
    var b = 1;
    var c = 1;

    function addfunction() {

        var c1 = document.createElement('input');
        c1.type = "checkbox";
        c1.id = "a" + a++;
        var c2 = document.createElement('input');
        c2.type = "checkbox";
        c2.id = "b" + b++;
        var c3 = document.createElement('input');
        c3.type = "checkbox";
        c3.id = "c" + c++;
        var c4 = document.createElement('br');


        document.getElementById("dependent").appendChild(c1);
        document.getElementById("dependent").appendChild(c2);
        document.getElementById("dependent").appendChild(c3);
        document.getElementById("dependent").appendChild(c4);
        // c1.onclick = dep();
        // function dep() { alert(this.id); }
        c1.onclick = function () { alert(this.id); };

    }
</script>

当我调用这样的函数时，

c1.onclick = function () { alert(this.id); };

它按预期工作。即，当我点击复选框时，警报会显示其ID。

但是如果我以这种方式调用函数，

c1.onclick = dep();
function dep() { alert(this.id); }

当我点击“添加”按钮时（在调用addfunction（）时）会出现警报。为什么呢？

Answer 1

因为您正在执行dep()并将返回值分配给c1.onclick。

如果要分配功能本身，不要调用它：

c1.onclick = dep;

Answer 2

原因是dep()是一个函数调用表达式。所以你在这里做的是调用函数dep()，然后将结果（undefined）分配给c1.onclick。您应该执行以下操作：

function dep() { alert(this.id); }
c1.onclick = dep;

Answer 3

您正在传递函数调用的结果，而不是对该函数的引用，您需要在点击事件的异步调用中调用它。

所以改变这个

c1.onclick = dep();

到

c1.onclick = dep;

Answer 4

您不希望将调用dep()（未定义）的结果分配给onclick。你应该自己分配函数

 c1.onclick = dep;

Answer 5

代码

   c1.onclick = dep();

实际上是呼叫dep。见括号???。这就是他们所做的，他们实际执行代码。匿名函数似乎是要走的路。请注意这个这个词。在

   c1.onclick = function () { alert(this.id); };

如果你“命名”它，可以参考函数本身。既然你已经提到了c1，c2和c3，你可以做各种解决方案，如：

c1.onclick=function() {alert(c1.id);}

或

function click_handler(v_param) {alert(v_param.id);}
c1.onclick=function() {click_handler(c1);}

如果您尝试将其视为C或C ++语言，那么JS中的范围可能会非常棘手。

希望有所帮助！

Javascript - 调用函数

5 个答案: