当我使用参数触发自定义事件时，来自事件处理程序的参数未定义答案

【问题标题】：When I trigger custom event with parameters, parameters from event handler is undefined当我使用参数触发自定义事件时，来自事件处理程序的参数未定义
【发布时间】：2017-05-29 11:55:45
【问题描述】：

我使用以下代码创建了一个自定义事件：

function DataLoader() {
  let el = document.createElement('section');

  setTimeout(function() {
    el.dispatchEvent(new CustomEvent('myevent', {
      number: 123
    }));
  }, 3000);

  return el;
}

// With code below I add my event listener.

let loader = new DataLoader();

loader.addEventListener('myevent', function(e) {
  console.log(e.number); // ← `e.number` is `undefined` when event is triggered.
});

document.body.appendChild(loader);

触发事件时，变量e.number为undefined。我做错了什么？我没有使用 JQuery。 See this codepen

【问题讨论】：

@Mr_Perfect：我按照this article中的指导进行操作
告诉我你到底想做什么？
@Mr_Perfect：如果触发事件，则必须将数字123 发送到处理程序以继续初始化过程，并且该过程需要在DataLoader 函数中加载的数据。
要将事件附加到哪个元素？正文还是部分？
@Mr_Perfect：到section-元素。如果不清楚，我的借口。

标签： javascript addeventlistener custom-events

【解决方案1】：

当您创建对象new DataLoader() 并声明let el 时，el 始终未定义。

因此，您必须为此分配一些价值。你必须这样做

function DataLoader(elem) {
    let el = elem;

    //When data is loaded {
        el.dispatchEvent(new CustomEvent('myevent', { number: 123 }));
    //}

    return el;
}

然后像这样创建对象

loader = new DataLoader(document.body);

欲了解更多信息CustomEvent MDN

您的代码不清楚。根据您的要求这样做。

var obj = document.createElement('section')
obj.addEventListener("cat", function(e) { console.log(e.detail)});

// create and dispatch the event
var event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);

【讨论】：

哦，这是我提出问题时的一个问题。我已经更改了我的代码，所以不清楚我在做什么。但你说的很好。我已经更新了我的问题。
我前段时间也发现了它，确实是这个。谢谢:)

【解决方案2】：

在键名为“detail”的对象中发送参数。

el.dispatchEvent(new CustomEvent('myevent', { detail :{number: 123} }));

参考 - https://javascript.info/dispatch-events

【讨论】：