Question

我找到了一个示例任务，当您单击文档中的任意位置时，该任务将在页面上显示警报。在任务中，您只需要编辑display（）函数，该函数有两个参数 - myFunc和myObj，以便显示person对象的名称。我想出了类似的东西，但只有在页面刷新后才会出现警报，而不是在每次点击文档后都出现。

function start() {
    var person = {
        name : "John"
    };
    function alertName() {
        alert(""+this.name.toUpperCase() + "");
    }
    document.addEventListener('click', display(alertName, person));
}
function display(myFunc, myObj) {
  name = myObj.name;
  myFunc();

}
start();

这里是小提琴：

function start() {
    var person = {
        name : "John"
    };
    function alertName() {
        alert(""+this.name.toUpperCase() + "");
    }
    document.addEventListener('click', start(alertName, person));
}
function display(myFunc, myObj) {
  name = myObj.name;
  myFunc();

}
start();

body {
  background-color:yellow;
}

  <body>

  </body>

Answer 1

此处的问题是，addEventListener第二个参数需要是触发事件时要调用的函数。

在你的例子中，你传递的是指令，而不是函数。你可以做的是在函数体内添加display（）调用，并将该函数作为第二个参数传递：

function start() {
    var person = {
        name : "John"
    };
    function alertName() {
        alert(""+this.name.toUpperCase() + "");
    }
    document.addEventListener('click', function() {
    display(alertName, person)
    });
}
function display(myFunc, myObj) {
  name = myObj.name;
  myFunc();

}
start();

Answer 2

您需要了解display是一个函数，而display(alertName, person)是您立即调用它，而不是作为事件回调。但是addEventListener需要函数引用作为第二个参数，这意味着当被调用时display(alertName, person)必须返回一个新函数，它将从内部调用alertName（这是一个引用）。

最后，this.name内的alertName表示需要在myObj的上下文中调用它，使用Function.prototype.call来执行此操作。

function start() {
  var person = {        
    name: "John"    
  }
  
  function alertName() {        
    alert("" + this.name.toUpperCase() + "");    
  }
  
  document.addEventListener('click', display(alertName, person));
}

function display(myFunc, myObj) {
  return function () {
    myFunc.call(myObj)
  }
}
start();

Click somewhere.

单击eventListener的问题

2 个答案: