委托模式
2020/11/26 8:24:35
本文主要是介绍委托模式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
委托模式
如果存在多个对象接收并处理同一请求,可以将请求委托给另一个对象统一处理,就叫做委托模式。
使用场景
在 JavaScript 中,委托模式有着很广泛的应用,最典型的就是“事件委托”。
事件委托就是将子元素的事件委托给父元素,然后通过事件冒泡传递,再通过判断事件来源来执行某种操作的一套逻辑。
比如,当用户点击每个列表项的时候,都将打印出相应的文字:
例子:
<ul> <li onclick="clickFn()">A</li> <li onclick="clickFn()">B</li> <li onclick="clickFn()">C</li> </ul> <script> const clickFn = () => { console.log(event.target.innerText); }; </script>
上例中,将事件直接绑定在 li 元素上,会增加多个事件,内存消耗也相应变大。如果将事件挂载到父元素 ul 上,只需要一个点击事件,就可以起到相同的作用,优化了页面性能。
例子:
<ul onclick="clickFn()"> <li>A</li> <li>B</li> <li>C</li> </ul> <script> const clickFn = () => { if (event.target.nodeName === 'LI') { console.log(event.target.innerText); } }; </script>
事件委托不仅可以优化页面性能,也可以间接实现动态添加事件的功能。
比如我们想为新创建的 p 元素添加点击事件,就可以将事件挂载到其父元素上:
例子:
<button onclick="addCountry()">Add Country</button> <div onclick="bgChange()"></div> <script> const countrys = ['俄罗斯联邦', '越南社会主义共和国']; let i = 0; const addCountry = () => { if (i === countrys.length) { return; } const p = document.createElement('p'); p.innerText = countrys[i++]; document.querySelector('div').appendChild(p); }; const bgChange = () => { if (event.target.nodeName === 'P') { event.target.style.backgroundColor = 'aqua'; } }; </script>
如有错误,欢迎指正,本人不胜感激。
这篇关于委托模式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求