Как понять данную строчку кода?

Question

[VegasChickiChicki]

Изучаю JS и наткнулся на это:

document.addEventListener("mousemove", function (e) {
    move (e.clientX, e.clientY);
});

Что-то понятно , document.addEventListener - когда на нашем документе происходить какое либо событие , "mousemove" - наше событие (движение мышки). А вот дальше начинается магия ,появилась функция ,которая принимает аргумент "e" ,внутри функции вызов другой функции ,которая принимает 2 аргумента : e.clientX ("e" + координата мыши X ,"e" + координата мыши Y). Так вот ,поясните пожалуйста от куда функция берет "e"? Ни как не могу понять логику данного куска кода...

Comments

[iks_so]

поясните пожалуйста от куда функция берет "e"

Какая именно? Если анонимная, в строчке 1, то его ей передает браузер. Вам доступна переменная e, потому что вы ее и обьявили, мол первое значение, переданное при вызове, будет называтся 'e' в пределах функции.
Если move, то внутри нее, переменная с именем 'e' видна не будет.

Answer 1

[Никита Егоров]

Почитайте про коллбеки и анонимные функции.

function addEventListener(string, callback) {
    // code...
    const event = 5;
    callback(event);
}

addEventListener('mouseover', function(e) {
    console.log(e); // 5
})

Comments

[VegasChickiChicki]

Я просто изучаю JS и некоторые вещи для меня еще очень сложны ,к примеру я нашел вот такой кусочек кода,для моих целей :

document.addEventListener("mousemove", function (e) {
  move (e.clientX, e.clientY);
});

function move (x, y) {
  document.body.style.setProperty('--mouseX', (x - ww) / 30 + "deg");
  document.body.style.setProperty('--mouseY', (y - wh) / 30 + "deg");
}

и не смог в нем разобраться ,хотя он и работает.
Поменял ,использую то что знаю и получилось вот так :

document.addEventListener("mousemove", function () {
    move();
});

function move () {
    let x = event.clientX,
         y = event.clientY;
    img.style.setProperty('--mX', x / 30 + "deg");
    img.style.setProperty('--mY', y / 30 + "deg");
}

И тоже точно так же работает )
Спасибо за совет ,пойду изучать данную тему!

[iks_so]

VegasChickiChicki, Ваш второй пример работает потому, что некоторые браузеры(хром, например) создают на время обработки события глобальную(то есть, доступную из всех областей видимости/функций) переменную event. Попробуйте запустить его в Firefox, например.