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

我试图创建一个名为

clickButton

的自定义事件，它基于bulit-in事件

click

，用于更具体地处理元素

根据，似乎使用

.dispatchEvent（）

进行注册是不可避免的。因此，我使用另一个

.addEventListener（）

来掩盖

单击按钮

事件行，如下所示：

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

但我认为这是多余的，因为我仍然可以通过元素的

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

我的期望是独立于内置事件，但
单击按钮仍然可以根据
单击事件单独立即工作，如下所示：

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

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

有什么解决办法吗