写代码啦
事件委托
回复数(0) 浏览数(30)
{{topic.upvote_count || 0}} 编辑 回复

之前我们学习了DOM的事件模型,了解到了捕获和冒泡。但是并不知道有什么用途。今天我们要讲它的一个用途,就是可以实现事件委托。
试想一下,如果我们需要对一批元素进行相同的处理。我们就不必要为他们每一个都写程序,我们可以只写一个程序,然后将它绑定在我们需要处理的元素的祖先元素上。
1. 假设,我们有100个按钮,我们需要为监听他们,我们不可能写100个绑定时间然后分别绑定在这些按钮上。我们可以在按钮的祖先元素上绑定一个事件,然后对其进行监听即可。

div.addEventListener('click', (e)=>{
const t = e.target
if(t.tagName.toLowerCase() === 'button'){
console.log('button 被点击了')
console.log('button data-id 是'+t.dataset.id)
}
})

  1. 再比如,我们如果要监听一个目前还不存在的元素,怎么办。那我们只能监听它的祖先,然后在执行的时候看看是不是我要的那个元素。

setTimeout(()=>{
const button = document.createElement('button')
button.textContent = 'click 1'
div1.appendChild(button)
}, 1000)

div1.addEventListener('click', (e)=>{
const t = e.target
if(t.tagName.toLowerCase() === 'button'){
console.log('button 被 click 了')
}
})

这就是事件委托。它有很多优点。
1. 它可以简化初始化,并节省很多的内存。
2. 它可以监听一些动态元素。
3. 代码可以变得更少,添加移除的时候不需要添加移除程序。

大致的概念就是这样,之后还有对事件委托进行封装或者其他处理,之后我有成果了会继续展示。

{{topic.upvote_count || 0}}

之前我们学习了DOM的事件模型,了解到了捕获和冒泡。但是并不知道有什么用途。今天我们要讲它的一个用途,就是可以实现事件委托。
试想一下,如果我们需要对一批元素进行相同的处理。我们就不必要为他们每一个都写程序,我们可以只写一个程序,然后将它绑定在我们需要处理的元素的祖先元素上。
1. 假设,我们有100个按钮,我们需要为监听他们,我们不可能写100个绑定时间然后分别绑定在这些按钮上。我们可以在按钮的祖先元素上绑定一个事件,然后对其进行监听即可。

div.addEventListener('click', (e)=>{
const t = e.target
if(t.tagName.toLowerCase() === 'button'){
console.log('button 被点击了')
console.log('button data-id 是'+t.dataset.id)
}
})

  1. 再比如,我们如果要监听一个目前还不存在的元素,怎么办。那我们只能监听它的祖先,然后在执行的时候看看是不是我要的那个元素。

setTimeout(()=>{
const button = document.createElement('button')
button.textContent = 'click 1'
div1.appendChild(button)
}, 1000)

div1.addEventListener('click', (e)=>{
const t = e.target
if(t.tagName.toLowerCase() === 'button'){
console.log('button 被 click 了')
}
})

这就是事件委托。它有很多优点。
1. 它可以简化初始化,并节省很多的内存。
2. 它可以监听一些动态元素。
3. 代码可以变得更少,添加移除的时候不需要添加移除程序。

大致的概念就是这样,之后还有对事件委托进行封装或者其他处理,之后我有成果了会继续展示。

30
回复 编辑