Javascript 中嵌套函数的事件处理

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

<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();
}

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

在第一种方法中，您调用 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>

相关内容

最新更新

热门标签：