Javascript автоматическое выполнение функции

Question

Если я пишу событие таким образом, действие выполняется, когда это необходимо:

document.getElementById('myElem').onmousedown = (e) => { 
    console.log('fired!') 
    } 

Но если я пишу те же вещи по-другому, действие выполняется при загрузке страницы, один раз :

let HandleEvent = (event) => { 
console.log('fired!') 
} 
document.getElementById('myElem').onmousedown = HandleEvent(event) 

UPD: Ofcourse это просто пример, HandleEvent функция будет иметь гораздо более сложную логику.

Мои вопросы:

1. Почему?
2. Как заставить его работать правильно?

Answer 1

document.getElementById('myElem').onmousedown = HandleEvent; 

сделать бы то, что вы хотите; вы не должны выполнять обработчик при его назначении. Вы должны просто назначить ссылку на функцию.

Тогда вы также можете назначить его в качестве обработчика OnLoad, или даже называют его сами (если вы не полагаетесь на объект события)

Answer 2

document.getElementById('myElem').onmousedown = HandleEvent; 

Чтобы передать дополнительные аргументы, которые вы могли бы использовать привязку:

document.getElementById('myElem').onmousedown = HandleEvent.bind(null, argument1, argument2); 

... или вы могли бы использовать фабричную функцию:

document.getElementById('myElem').onmousedown = createHandler(); 

function createHandler() { 
    var a = calculateA(); 
    var b = calculateA(); 
    return function handleEvent() { 
    //use a and/or b 
    }; 
} 

Есть и другие способы тоже. Точный код будет зависеть от вашего варианта использования.

Answer 3

Удалить событие

let HandleEvent = (event) => { 
console.log('fired!') 
} 
document.getElementById('myElem').onmousedown = HandleEvent 

Answer 4

Вам не нужно event.

let HandleEvent = (event) => 'fired!'; 
document.getElementById('myElem').onmousedown = HandleEvent 

Answer 5

Если вы хотите передать атрибут

let HandleEvent = (event) => { 
console.log('fired!') 
} 
document.getElementById('myElem').onmousedown = HandleEvent.bind(attribute) 

Answer 6

Что ты был назначая результат HandleEvent() в случае, вместо этого вы должны назначить функцию к нему.

Правильное утверждение:.

document.getElementById ('myElem') OnMouseDown = HandleEvent;