如何訪問事件中的 object

Question

我有這個帶有一些功能的 object。 在某個時候，我想舉辦一個活動並在該活動中調用這個 object，但前提是你使用這個調用這個 object，沒有這個有什么方法可以調用它？

我還沒有嘗試過任何東西，因為我找不到任何幫助。

const cantaVideoModal = {
    click: null,
    target: null,
    urlVideo: null,
    config: function (c) {
        this.click = c.click;
        this.target = c.target;
        this.urlVideo = c.urlVideo;

        this.init();
    },
    init: function () {
        this.click = (this.click) ? document.querySelector(this.click) : null;
        this.target = (this.target) ? document.querySelector(this.target) : null;

        let btnCloseVideo = document.querySelector('[data-close-modal]');
        if(btnCloseVideo){
            btnCloseVideo.addEventListener('click', function(){
                //call modalAction object here using this
            })
        }
    },
    modalAction: function (act) {
        let elementClick = this.click;
        let elementtarget = this.target;

        if (elementClick) {
            elementClick.addEventListener('click', function (e) {
                e.preventDefault();

                if (elementtarget) {

                    if(act === "toggle")
                        elementtarget.classList.toggle('in');

                    if(act === "show")
                        elementtarget.classList.add('in');

                    if(act === "hide")
                        elementtarget.classList.remove('in');
                }
            })
        }
    }
}

Answer 1

您不能使用this的原因是因為您在addEventListener內的 function 中。 我不知道為什么，但你可以創建一個新的 object 引用當前的 object，它可以在匿名函數中使用。 有關為什么不能在addEventListener中使用this的更多信息，請參閱此答案

 const cantaVideoModal = { click: null, target: null, urlVideo: null, config: function (c) { this.click = c.click; this.target = c.target; this.urlVideo = c.urlVideo; this.init(); }, init: function () { this.click = (this.click)? document.querySelector(this.click): null; this.target = (this.target)? document.querySelector(this.target): null; let btnCloseVideo = document.querySelector('[data-close-modal]'); if(btnCloseVideo){ // we create a new variable that refer to the current content. var self = this btnCloseVideo.addEventListener('click', function() { //call modalAction object here using self. self.modalAction(/* some parameters */); }) } }, modalAction: function (act) { let elementClick = this.click; let elementtarget = this.target; if (elementClick) { elementClick.addEventListener('click', function (e) { e.preventDefault(); if (elementtarget) { if(act === "toggle") elementtarget.classList.toggle('in'); if(act === "show") elementtarget.classList.add('in'); if(act === "hide") elementtarget.classList.remove('in'); } }) } } }

PS我嘗試使用箭頭 function 但無法使代碼正常工作。