问题描述
我正在尝试创建一个名为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')
有解决方案吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)