如何将参数传递给 eventListener 函数？

Question

我正在练习将我的代码分成模块以提高可读性。

我想弄清楚为什么我的事件处理函数没有接收到我绑定到它的参数。

import domElements from "./domElements.js";
import Gifs from "./gifModel.js";
import * as view from "./viewController.js";

//state 
let state = {
    imagesLoaded: 0,         //number of images rendered to DOM so far
    page : 0,                //keep track of offset of data from api
    gifs : new Gifs(),       //request data from API
    dom : new domElements(), //definition of dom elements
    view : view
} 

//initialize app
async function init () {

    //fetch initial data
    await state.gifs.fetchQuery('candy', state.page * 50);
    
    /***Here is where I try to bind the code***/
    window.addEventListener('scroll', state.view.findEndOfPage.bind(state)); 
 
    //...
}

//run code
init(); 

/*****How findEndOfPage is defined in a separate file: ****/
export async function findEndOfPage(){
    
    const bottomOfPage = document.body.offsetHeight;
    if(window.innerHeight + window.pageYOffset >= bottomOfPage){
        //if current images can still be retrieved from state
        if(state.imagesLoaded < state.gifs.imgUrl.length){
        
            generateImages();
        
        //otherwise, load more images
        } else{
            state.page++;
            await state.gifs.fetchQuery('cartoon', state.page * 50);
            generateImages();
        }
    }
}

//Error Message
viewController.js:27 Uncaught (in promise) ReferenceError: state is not defined
    at _callee$ (viewController.js:27)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (gifModel.js:26)
    at _next (gifModel.js:26)
    at gifModel.js:26
    at new Promise (<anonymous>)
    at Event.<anonymous> (gifModel.js:26)
    at Event.findEndOfPage (viewController.js:27)

Answer 1

bind 方法将第一个参数“绑定”到“this”关键字，在您的代码中您可以使用“this”访问 findEndOfPage 中的“state”。

所有其他参数（第二个、第三个...）都传递给函数，但您仍然需要将它们添加到函数参数中。

要在函数内使用“state”变量，您必须将 null 作为第一个参数传递，将 state 作为第二个参数传递，并将“state”作为参数添加到 findEndOfPage。

window.addEventListener('scroll', state.view.findEndOfPage.bind(null, state));

export async function findEndOfPage(state) {
    //...
}

更新

调用函数时使用的所有其他参数将在绑定中使用的参数之后传递，在您的情况下，事件将在状态之后传递。

要将事件作为第一个参数，您可以使用闭包

window.addEventListener('scroll', state.view.findEndOfPage(state));

export function findEndOfPage(state) {
    return async function(event) {
        // your code goes here
    }
}

如何将参数传递给 eventListener 函数？

How do you pass parameters to eventListener functions?

javascript

bind

event-listener