如何基于内置事件创建新的事件字符串？

如何解决如何基于内置事件创建新的事件字符串？

我正在尝试创建一个名为clickButton的自定义事件，该事件基于上载事件click来更具体地处理元素。

根据this MDN article，似乎不可避免地要使用.dispatchEvent()进行注册。因此，我使用了另一个.addEventListener()来掩盖clickButton事件行，如下所示：

this.elem = document.querySelector(elem);
this.elem.addEventListener(this.clickButton.type,(e) => {
  console.log(e);
},false)
this.elem.addEventListener('click',(e) => e.target.dispatchEvent(this.clickButton));

但是我认为这是多余的，因为我仍然可以通过每个元素的callbacks给每个元素不同的e.target.nodeName：

function eventBus(string) {
  const elem = document.querySelector(string);
  elem.addEventListener('click',(e) => {
    let isNodeName = (e.target.nodeName),ternary = isNodeName === 'P' ? foo(e) : bar(e); 
  })
}
function foo(e) {
  console.log(e,'This is foo function');
}
function bar(e) {
  console.log(e,'This is bar function');
}

let div = eventBus('div')
let p = eventBus('p')

我的期望是独立于内置事件，但是clickButton仍然可以基于click事件立即单独工作，如下所示：

this.elem.addEventListener('clickButton',callback)

完整代码：

class EventBus {
  constructor(elem) {
    this.clickButton = new CustomEvent('clickButton');
  }
}
class Menu extends EventBus {
  constructor(elem,clickButton) {
    super(clickButton)
    this.elem = document.querySelector(elem);
    this.elem.addEventListener(this.clickButton.type,(e) => {
      console.log(e);
    },false)
    this.elem.addEventListener('click',(e) => e.target.dispatchEvent(this.clickButton));
  }
  foo(e) {
    console.log(e,'This is foo function');
  }
  bar(e) {
    console.log(e,'This is bar function');
  }
}

let classDiv = new Menu('div')
let classp = new Menu('p')

有解决方案吗？