单击EventListener的问题

我找到了一个示例任务，可以在您单击文档中的任何位置时在页面上显示警报。在任务中，您需要仅编辑具有两个参数的display（）函数-MyFunc和MyOBJ，以便显示个人对象的名称。我想出了这样的内容，但是警报只有在页面刷新之后才出现，而不是在每次点击文档之后出现。

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>

此处的问题在该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();

您需要了解display是一个函数，并且通过display(alertName, person)您立即调用它，而不是事件回调。但是，addEventListener需要函数参考作为第二个参数，因此，这意味着当称为display(alertName, person)时，必须返回一个新功能，该功能将从内部调用alertName（这是参考）。

最后，this.name内部alertName表示需要在myObj的上下文中调用它。

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.

相关内容

最新更新

热门标签：