首页 » 文章 » 文档 » js web api问题 » 编写一个通用的事件监听函数

编写一个通用的事件监听函数

首先一个 html 结构代码

<button id="btn1">按钮</button>

实现事件绑定

// 事件绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', event => {
    console.log(event.target) // <button id="btn1">按钮</button>
    event.preventDefault() // 阻止默认行为
    alert('clicked')
})

通用的事件监听函数

// 通用的事件绑定函数
function bindEvent(elem, type, selector, fn) {
if (fn == null) {
fn = selector
selector = null
}

elem.addEventListener(type, event => {
const target = event.target
if (selector) {
// 代理绑定
if (target.matches(selector)) {
fn.call(target, event)
}
} else {
// 普通绑定
fn.call(target, event)
}
})
}

const btn1 = document.getElementById('btn1')
bindEvent(btn1, 'click', function(event){ //
console.log(this.innerHTML) // 按钮
})

需要注意的是 this.innerHTML 的指向,此时不能是 event=>{} , 而需要使用 function(event){}

»js web api问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top