如何访问事件中的 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 但无法使代码正常工作。