2 eventlistener look the same but act differently [duplicate]

I’m trying to add an eventlistener where the background colour of an element would change if I were to hover over. The first leaveBlock function works fine, but the second doesn’t, even though it looks like exactly the same thing to me. I’m trying to get the first function to work so I can add a remove an eventlistener.

let backgroundBlock = (i) => {
    blocks[i].style.background = 'yellow'
    blocks[i].style.border = '0px solid black'   
}

let leaveBlock = () => {
    for (let i=0; i<blocks.length; i++) {
        blocks[i].addEventListener('mouseleave', () => {
            blocks[i].style.background = 'white'
            blocks[i].style.border = '0px solid black'
            
        })
    }
}

vs
 
let leaveBlock = () => {
    for (let i=0; i<blocks.length; i++) {
        blocks[i].addEventListener('mouseleave', backgroundBlock(i))
    }
}