Javascript类和Customevents

Question

我想知道如何将自定义事件添加到类的实例并为该实例调用它。

我的代码现在：

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未捕获的DOMException：无法在'EventTarget'上执行'dispatchEvent'：事件已被调度。       在新创作者（http://localhost/eventtest.html:24:25）       在window.onload（http://localhost/eventtest.html:44:16）

我想在普通的javascript no jquery中这样做。感谢您花时间阅读本文并希望能帮到我。

Answer 1

您正在声明全局"{{ ti.xcom_pull(task_ids='find-paths') }}".split(';')变量。但是大多数浏览器（IE，Edge，Chrome）已经都有一个全局event变量（当前正在调度的事件）。因此，您最终会尝试重新发送正在处理的event事件。

这是不将代码置于全局范围的众多原因之一。相反，将其包装在作用域函数中：

load

现在，您的(function() { // Your code here... })(); 变量与全局event不存在冲突。

直播示例：

＆＃13;

＆＃13;

event

＆＃13;

＆＃13;

＆＃13;

另外：您可能希望每次发送事件时都创建一个新的事件对象，而不是使用单个全局到您的代码(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); } })();变量。