Передача этого и переменных в импортированную функцию onclick

Question

Я совершенно сбит с толку этим кусочком кода, который, похоже, никак не работает. Просто это так:

// in app.js
import {layoutItemButtonClick} from '/blablaWrappeur.js'
document.addEventListener('DOMContentLoaded', function () {


    var element = document.querySelector('.qq-element') //this is a html element obj

    $('.layout-item-button').click(layoutItemButtonClick)
})

//in blablaWrappeur.js
export const layoutItemButtonClick = function () {
    const selectedLayout = this.dataset.layout.split("")
    doQqthing(element) // element is not defined

}

function doQqthing(element) {
    alert(element) /// not defined
}

Мне нужно передать элемент и контекст this нажатой кнопки в функцию layoutItemButtonClick, а затем внутри нее - в функцию doQqthing.

Однако это не работает так.

1) Если я позволю подобному коду и нажму кнопку, ничего не произойдет.

2) Теперь, если я изменю функцию щелчка на эту (добавив парантез к вызову функции:

$('.layout-item-button').click(function () {
        layoutItemButtonClick()
    })

Я получаю dataset is not defined ошибку.

3) Если я изменю это на:

 $('.layout-item-button').click(layoutItemButtonClick())

Я получаю ту же ошибку.

4) Для этого:

$('.layout-item-button').click(layoutItemButtonClick)

Я получаю element is not defined ошибку.

Я знаю, что если я вызову функцию внутри функции, this будет текущим элементом, а если в скобках щелкнуть мышью, как в 3) и 4), это будет локальная область this. Итак, как мне передать элемент и элемент this из функции click.

И почему / как использование скобок имеет значение при вызове функции, определенной как константа?

Заранее спасибо.

Answer 1

И почему / как использование скобок имеет значение при вызове функции, определенной как константа?

layoutItemButtonClick аналогичен любой другой переменной доступа.Он преобразуется в значение переменной, которая является объектом функции.

layoutItemButtonClick() otoh вызывает функцию и преобразуется в ее возвращаемое значение.

Следовательно,

 $('.layout-item-button').click(layoutItemButtonClick())

передает возвращаемое значение из layoutItemButtonClick (что составляет undefined) в .click, тогда как

 $('.layout-item-button').click(layoutItemButtonClick())

передает сам объект функции в .click.

---

Я получаю ошибку element is not defined.

И правильно, потому что element не определено в области, доступной для layoutItemButtonClick.Он определяется только внутри DOMContentLoaded обработчика событий.

Вам нужно будет передать element в качестве аргумента layoutItemButtonClick.Таким образом, функция должна быть объявлена ​​как

export const layoutItemButtonClick = function(element) { ... }

Теперь нам нужно вызвать layoutItemButtonClick, чтобы this ссылался на элемент, по которому щелкнули, и мы передали element в качестве аргумента.Мы можем сделать это, используя .call:

$('.layout-item-button').click(function() {
    layoutItemButtonClick.call(this, element);
});

---

Однако нет необходимости использовать this внутри layoutItemButtonClick.Мы можем просто сделать элемент, который вызвал событие, явным аргументом:

 export const layoutItemButtonClick = function(trigger, element) {
   const selectedLayout = trigger.dataset.layout.split("")
   doQqthing(element);
 };

и вызвать его как

$('.layout-item-button').click(function() {
    layoutItemButtonClick(this, element);
});