Javascript中嵌套函数的事件处理答案

【问题标题】：Event Handling with Nested functions in JavascriptJavascript中嵌套函数的事件处理
【发布时间】：2018-06-24 21:49:15
【问题描述】：

下面的代码是改变按钮的背景颜色，它运行良好。

<html>
<head>
    <title>check</title>

    <script type='text/javascript'>

     function checkRun(){
      var obj = {
            client: 'Corporate',
            number: 5541,
            type: 'CL',
            fnct : function (){
                btn.style.backgroundColor='red' ;
             }
        }
      var btn = document.querySelector('button');
      btn.onclick = obj.fnct();

    }
    </script>

</head>

<body>
     <input type='text' name='checkName' id='check1' value='val1' class='class1'/><br><br>
     <button type='button' name='checkName' id='check3' value='val3' class='class3' onclick='checkRun()'>Hello</button>

</body>
</html>

当我如下改变函数调用时，只有当我点击按钮两次时背景颜色才会改变。我不明白这种行为背后的原因。

请解释一下。

btn.onclick = function () {
    obj.fnct();
}

【问题讨论】：

不，第一次点击时颜色会随着原始代码而改变。 @ArunPJohny

标签： javascript event-handling dom-events nested-function

【解决方案1】：

问题是当您尝试第二种格式时，您正在注册一个将在单击时调用的处理程序函数。新的处理程序只会在下次点击时触发

在第一种方法中，您调用fnct 函数并将其返回的值（在这种情况下未定义）分配为点击处理程序

您可以将脚本移动到页面底部并直接注册点击处理程序而不使用checkRun 方法

var obj = {
  client: 'Corporate',
  number: 5541,
  type: 'CL',
  fnct: function() {
    btn.style.backgroundColor = 'red';
  }
}

var btn = document.querySelector('button');
btn.addEventListener('click', obj.fnct);

<input type='text' name='checkName' id='check1' value='val1' class='class1' /><br><br>
<button type='button' name='checkName' id='check3' value='val3' class='class3'>Hello</button>

【讨论】：