事件代理

使用事件代理时，给父元素添加事件，相当于给子元素和父元素同时绑定了一个事件处理函数，然后子元素的事件冒泡到了父元素身上。我这样理解好像不太对，不知道哪里不对。

慕芸芸 2023-05-30

源自：“仿穷游”商城webapp 4-5 内容组件

4

收起

1回答

好帮手慕久久 2023-05-30 11:46:27

同学你好，理解的不对。“事件代理”是把原本需要绑定在子元素身上的响应事件委托给父元素，让父元素担当事件监听的职务。简单理解就是：把事件监听、事件处理函数，绑定在了父元素身上，子元素上没有绑定这些东西。这样做有一个好处，子元素可能有很多，如果你需要监听这些子元素的事件，那么需要给每个子元素都绑定一次事件、事件处理函数，重复操作太多。此时使用事件代理，可以只给父元素绑定一次事件、事件处理函数，就能监听到所有子元素的事件，并处理。

祝学习愉快！

提问者慕芸芸 #1

为什么说是利用了事件冒泡机制？

2023-05-30 11:54:27
好帮手慕久久回复提问者慕芸芸 #2

如果没有冒泡机制，父元素怎么能监听到子元素的事件呢？比如我们明明点击的是子元素，但是父元素怎么知道我们点击了子元素？由于事件有冒泡机制，点击子元素的时候，事件会像气泡一样往外冒，子元素的外面就是父元素，所以父元素就能知道“奥，子元素被点击了”。可以形象一点理解：点击子元素，子元素就产生一个‘事件气泡’，这个气泡会往外冒（往外走），路过父元素，就被父元素发现、感知到了，就能被父元素进一步处理了。

2023-05-30 13:04:27

相似问题

这里return false可以结束事件不是很理解

不理解冒泡型事件模型和捕获型事件模型，麻烦详细解说下

事件冒泡问题

关于focus和blur事件的传递性

事件代理

登录后可查看更多问答，登录/注册

前端工程师

参与学习人
提交作业 15661 份
解答问题 17891 个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

本课精华内容

问答作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

200 5

老师给点提示。

155 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载