我有以下代码重复了一些模式
document.querySelector("form").addEventListener("submit",function(event){
event.preventDefault();
myFn.eventActionTrigger();
myFn.spinner("on");
});
document.querySelector("button").addEventListener("click",function(event){
event.preventDefault();
myFn.eventActionTrigger();
myFn.spinner("on");
});
document.querySelector(".seeMore").addEventListener("click",function(event){
event.preventDefault();
myFn.eventActionTrigger("seeMore");
myFn.spinner("on");
});
我如何重构侦听事件函数，使其具有一个接受参数的泛型函数，并根据该泛函来侦听权限事件并触发内部函数。
您可以创建带有选择器，事件和回调函数的函数。
function action1() {alert('Form submited')}
function action2() {alert('Button clicked')}
function eventFunc(selector, event, callback) {
document.querySelector(selector).addEventListener(event, function(e) {
e.preventDefault();
callback()
})
}
eventFunc('form', 'submit', action1)
eventFunc('button', 'click', action2)<form action=""><input type="submit" value="Submit"></form>
<button>click</button>如果要传递多个回调函数，则可以在回调函数上使用rest参数，并使用forEach循环运行每个参数
function action1() {alert('Form')}
function another() {alert('Another function')}
function action2() {alert('Button')}
function eventFunc(selector, event, ...callback) {
document.querySelector(selector).addEventListener(event, function(e) {
e.preventDefault();
callback.forEach(c => c())
})
}
eventFunc('form', 'submit', action1, another)
eventFunc('button', 'click', action2)<form action=""><input type="submit" value="Submit"></form>
<button>click</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句