When I trigger custom event with parameters, parameters from event handler is undefined

Question

I've made a custom event using code below:

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);

When the event is triggered, the variable e.number is undefined. What I've done wrong? I'm not using JQuery. See this codepen

Answer 1

When you create object new DataLoader() and declaring let el, the el is always undefined.

So you must assign some value to that. You must do something like this

function DataLoader(elem) {
    let el = elem;

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

    return el;
}

and then create object like

loader = new DataLoader(document.body);

For more info CustomEvent MDN

Your code is unclear. Do like this based on your requirement.

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);