使用javascript中的事件委托, 你可以避免将事件侦听器添加到特定节点;而是将事件侦听器添加到一个父对象。
如果一个父对象中有许多元素, 并且你想处理它们上的事件, 我们将不希望将处理程序绑定到每个元素。相反, 我们将单个处理程序绑定到其父级是一种很好的做法。
动态创建dom对象时, 需要将事件附加到尚不存在但会存在的对象。
通过下面的示例可以很容易地理解它, 一个ajax将被执行并在我们的文档中添加一个带有”
myDivision”
类的div, 我们希望每次用户单击一个myDivision div时都会发生一些事情。如果在文档准备好后以这种方式声明侦听器:
$(".myDivision").click(function(){//Binded event to our .myDivision objects });
【jQuery中的事件委托是什么以及如何使用它】你会注意到, 当执行ajax调用并将div添加到我们的文档中时, click不会发生任何变化!但为什么 ?
很简单, 当执行click函数时, 不存在类myDivision的对象, 因此不会绑定任何侦听器。
你将使用该类创建一个隐藏的div, 并且侦听器将被绑定, 但是当再次执行ajax调用并将更多的myDivision div添加到DOM时, 它们都不起作用!
因此, 我们需要处理事件委托, 以免为我们在文档中动态添加的每个.myDivision对象添加点击侦听器, 如下所示:
$(document).on("click", ".myDivision", function(){//Execute something });
事件委托非常容易理解, 将侦听器添加到对象的父容器中, 它将管理所有子目标项的侦听器。
推荐阅读
- 如何在Laravel 5.4中为Guzzle创建PSR-6文件系统缓存
- 俗话说换个角度理解TCP的三次握手和四次挥手
- 短视频go研发框架实践
- #导入MD文档图片#信息收集这一篇就够了
- 浅谈 Gossipsub
- #导入MD文档图片#金融行业安全体系建设咨询实践-TOPIC 1
- ShardingSphere技术专题ShardingJDBC实现分库分表
- 手把手教你搭建应用的网络诊断模块——Ping与TraceRoute
- Meterpreter入门与精通