当我使用参数触发自定义事件时,事件处理程序中的参数未定义

时间:2017-05-29 11:55:45

标签: javascript addeventlistener custom-events

我使用以下代码制作了自定义事件:



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.numberundefined。我做错了什么?我没有使用JQuery。 See this codepen

2 个答案:

答案 0 :(得分:3)

当您创建对象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);

答案 1 :(得分:0)

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

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

引荐-https://javascript.info/dispatch-events