Question

基本上我想问你什么，当我使用具有参数的函数的事件监听器为什么我不能在函数中使用word时，这是一个例子，因为我无法正确解释它。

    var elUsername = document.getElementById('username');
    var elMsg = document.getElementById('feedback');

    function checkUsername(minLength){
        if (elUsername.value.length < minLength){
            elMsg.textContent = 'ur username must contain at least 5 chars';
        }else {
            elMsg = "";
        }
    }
    elUsername.addEventListener('blur', function(){checkUsername(5)}, false);
------------------------------------------------------------
 function checkUsername(){
      var elMsg = document.getElementById('feedback');
      if (this.value.length <5){
          elMsg.textContent = 'usename must be 5 chars or more';
      }else {
          elMsg.textContent='';
      }

  }
    var elUsername = document.getElementById('username');
    elUsername.onblur = checkUsername;

所以函数中的第二个例子if语句中没有参数我可以使用它，但在第一个例子中，我无法解释为什么会这样？

Answer 1

这是因为你在事件监听器中的匿名函数内调用checkUsername方法，如果你改变了

elUsername.addEventListener('blur', function(){checkUsername(5)}, false);

到

elUsername.addEventListener('blur', checkUsername, false);

并在函数内部进行值检查（如第二个代码示例），它将起作用。

这是因为＆＃39;这个＆＃39;调用checkUsername时不会传递，这是可能的，但您必须使用.call()方法调用它。像这样：

elUsername.addEventListener('blur', function(){checkUsername.call(elUsername, 5)}, false);

现在elUsername已作为this传递给checkUsername函数。

虽然我更愿意直接调用checkUsername函数并从那里进行计算。

Answer 2

简化说明：它们可用于对象拥有的任何函数。

通过做：

elUsername.onblur = checkUsername;

您已将功能附加到对象elUsername。因此this将引用对象elUsername，但仅限于使用onblur字段调用函数时：elUsername.onblur()。

如果你想在第一种情况下做同样的事情，你可以使用函数call来强制参数this的值：

elUsername.addEventListener('blur', function(){
    checkUsername.call(elUsername,  5)
}, false);

请参阅https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call

事件听众为什么我不能用这个词

2 个答案: