Do you prefer variables like "event" instead of "e", or "index" instead of "i"?

Although it's very common to use shortened variables, I think code should be as readable as possible and reduce any factor for confusion.

For example:

function handleAction (e) {
    // what is e?
}

In this case, e probably means event or error, but why not just name it as such to remove confusion?

function handleAction (event) {
    // oh ok, so now we can do this:
    event.preventDefault();
}

Granted we could give the function a better name, like handleLinkClick() or something similar, but this is a simplified example and there are many other cases where being exact with variable names could clear any confusion. I try to do this everywhere else to stay consistent, such as loops:

books.forEach((book, index) => {
    // do something with book and index...
});

In more complex code, I might name it bookIndex to make it even clearer.

What do you think about this approach? I really would love to know how many other developers do this, or is shorter code still preferred?