Question

所以我一直在使用Head First JavaScript，然后我来到了一个关于使用函数文字的事件处理的部分。该书解释说，您可以在“脚本”标签中连接所有事件处理。但我对如何在一个事件中启动多个功能感到困惑。这是我的代码：

//Event Handling with Function Literals
  window.onload = function(evt) {

//THIS IS BROKEN
    document.body.onresize = resizeImg();reportImgHeight();

//Onload: Functions to Execute -- THESE WORK    
    resizeImg();
    reportImgHeight();
  }

特别针对此示例，如何获取“onresize”事件以执行BOTH resizeImg 和 reportImgHeight （我在代码中的其他位置定义的函数）。谢谢！

Answer 1

最干净的解决方案是使用addEventListener：

window.addEventListener('resize', resizeImg);
window.addEventListener('resize', reportImgHeight);

这样你可以解耦两个绑定。

另请注意，您应将resize事件绑定到窗口，而不是绑定到文档部分。

Answer 2

你必须这样做

document.body.onresize = function(){
    resizeImg();
    reportImgHeight();
};

如果你想打电话给他们，就好像他们是分开的那样，你可以做这样的事情

document.body.onresize = function(){
    resizeImg.apply(this, arguments);
    reportImgHeight.apply(this, arguments);
};

这会传递this，如果它是一个，你将拥有它，并且参数将传递给传递给事件的所有参数。

使用函数文字处理事件

2 个答案: