Javascript классы и клиенты

Question

Javascript классы и клиенты

1

Я хочу знать, как добавить настраиваемое событие в экземпляр класса и вызвать его для этого экземпляра.

Мой код прямо сейчас:

var event = document.createEvent('event');
event.initEvent('build', true, true);
class link {
    constructor(Href, Text = "Click me", Target = "__blank") {
        this.href = Href;
        this.text = Text
        this.target = Target;
        this.eventElm = document.createElement("event");
        //this.event = document.createEvent('event');
        //this.event.initEvent('build', true, true);
    }

}

class creator {
    constructor(Objs) {
        for(var i in Objs) {
            window.document.body.innerHTML += "<a href="+Objs[i].href+">"+Objs[i].text+"</a><br>";
            if(Objs[i].href == "#") {
                Objs[i].eventElm.dispatchEvent(event);
            }
        }
    }
}

var l = new link("#");
var lo = new link("#");
var ar = [];
ar.push(l);
ar.push(lo);


l.eventElm.addEventListener('build', function(e) {
    console.log(e);
}, false);
//l.eventElm.dispatchEvent(event);


window.onload = function () {
    var crea = new creator(ar);
    console.log(l.href);
}

Этот код возвращает ошибку

eventtest.html: 24 Uncaught DOMException: Не удалось выполнить 'dispatchEvent' в 'EventTarget': событие уже отправлено. у нового создателя (http://localhost/eventtest.html: 24: 25) в окне window.onload(http://localhost/eventtest.html: 44: 16)

Я хочу сделать это в простом javascript без jquery. Спасибо, что нашли время, чтобы прочитать это и, надеюсь, мне помочь.

Ian.V 01 нояб. 2017, в 11:22

Источник

Теги:

javascript

class

addeventlistener

events

constructor

1 ответ

Ещё вопросы

T.J. Crowder · Accepted Answer · 2017-11-01T07-23-00.000Z

Вы объявляете глобальную переменную event. Но в большинстве браузеров (IE, Edge, Chrome) уже есть глобальная переменная event (событие, отправленное в настоящее время). Таким образом, вы пытаетесь повторно отправить событие load, которое обрабатывается.

Это одна из многих причин не помещать ваш код в глобальную область. Вместо этого оберните его в функцию определения области видимости:

(function() {
    // Your code here...
})();

Теперь ваша переменная event не конфликтует с глобальным event.

Живой пример:

(function() {
    var event = document.createEvent('event');
    event.initEvent('build', true, true);
    class link {
        constructor(Href, Text = "Click me", Target = "__blank") {
            this.href = Href;
            this.text = Text
            this.target = Target;
            this.eventElm = document.createElement("event");
            //this.event = document.createEvent('event');
            //this.event.initEvent('build', true, true);
        }

    }

    class creator {
        constructor(Objs) {
            for(var i in Objs) {
                window.document.body.innerHTML += "<a href="+Objs[i].href+">"+Objs[i].text+"</a><br>";
                if(Objs[i].href == "#") {
                    Objs[i].eventElm.dispatchEvent(event);
                }
            }
        }
    }

    var l = new link("#");
    var lo = new link("#");
    var ar = [];
    ar.push(l);
    ar.push(lo);


    l.eventElm.addEventListener('build', function(e) {
        console.log(e);
    }, false);
    //l.eventElm.dispatchEvent(event);


    window.onload = function () {
        var crea = new creator(ar);
        console.log(l.href);
    }
})();

Отдельно: вы, вероятно, захотите создать новый объект события каждый раз, когда вы отправляете свое событие, вместо того, чтобы иметь эту единственную переменную event глобального для вашего кода.