我们大家都知道,一个dom的事件流程是先经过事件捕获,然后到事件本身,最后是事件冒泡 事件捕获是从父级到子级 事件冒泡是从子级到父级 现在有个需求,页面有个按钮,本身已经有点击事件的处理逻辑了,内部逻辑我们也不知道...现在的需求是 我们需要在点击按钮后执行原有的业务逻辑之前,先执行另一个函数 我们可以使用事件捕获来进行操作 具体操作如下 我们使用事件代理加事件捕获的方式,来实现 <div id="child" style="...,需要在原有业务逻辑之前执行') } }
所以简单来说，就是把一个写好的函数通过事件委托到按钮上，当用户点击按钮后，就会调用那个函数，函数里的代码就会执行。...例如：我把一段打印Hello World的函数，通过事件委托到按钮上，当我点击这个按钮的时候就会调用这个函数，函数执行完之后就会打印Hello World。...在介绍如何委托事件前，先介绍一下如何控制元素对象（标签对象），因为有些委托事件的方式需要去获得元素对象来进行事件的委托： 第一种获得方式是通过id去获得，这种方式需要用document对象去调用getElementById...当鼠标的光标移动进按钮时会触发mouseover事件，移动出按钮时会触发mousseout事件，然后就会调用委托到事件中的函数代码，函数被调用执行就会在控制台中输出这些信息。...第二种方式，通过id获取元素对象，然后通过该对象调用事件属性，使用函数表达式的方式把函数委托给事件： 代码示例： ? 运行结果： ?
当按钮被点击时，回调函数内的代码就会执行，弹出一个提示框。 标准方式：事件代理 有时候，我们需要在动态生成的元素上绑定事件，这时候事件代理就派上用场了。...当鼠标悬停或按钮被点击时，都会触发相应的回调函数。 标准方式：解绑事件 除了绑定事件，有时我们也需要在之后解绑事件，以避免不必要的执行。...off 方法就是用于解绑事件的工具，它可以根据事件类型、选择器、回调函数等信息来进行解绑。 <!...这样一来，点击链接时不会跳转到指定的网站，而是触发了我们定义的回调函数。 标准方式：事件委托的应用 事件委托是一种优化性能的方式，特别适用于需要大量事件绑定的情况。...; }); 在这个例子中，我们使用了事件委托，将点击事件绑定到了 ul 元素上，但指定了只有 li 元素被点击时才触发回调函数
如何根据当前节点的id，获得其子节点呢?这是一个SQL问题。...加入传入的id为1（即根节点），使用自连+SUBSTRING_INDEX函数得到其子节点： 示例： id name type url 1 大树 RT root...tree_branche3/tree_leaf3 | +----+---------+------+-----------------------------------------------+ 加入传入的id...为1（即根节点），使用自连+SUBSTRING_INDEX函数得到其子节点： mysql> select tree1.* from tree_node as tree1 -> join tree_node...= 1; ##返回"树干1"的父节点的url select SUBSTRING_INDEX('root/tree_main_line1','/',1) ##将"/"替换为"" mysql> select
真正做事情的是乙，即被委托人，而委托人甲 则是把相应的信息传递给被委托人乙，自己本该做的事情交给了乙来做，如下图这个例子： ? 那么在我们javascript 里，什么是事件委托呢？...解决方法： 利用 事件冒泡传递的机制，将本来本元素要完成的事件处理逻辑，委托给 父类节点，父类节点根据触发事件的节点信息，执行对应的事件处理逻辑。...元素作为一个冒泡事件处理的被委托者。...data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。...算法： 将事件处理函数绑定到容器上， 在事件处理函数内获取 event.target， 根据不同的event.target作相应的处理 应用场景： 需要为子元素用一个事件处理函数 处理相同的动作； 简化不同动作间的结构
（根据事件流，在不阻止事件流的前提下他会传递至父元素，导致父元素的事件处理函数执行），这时候currentTarget指向的是父元素，因为他是绑定事件的对象，而target指向了子元素，因为他是触发事件的那个具体对象...阻止事件冒泡和捕获 默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。...7.3 事件委托的原理： 事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？...7.4 事件委托如何实现： 终于到了本文的核心部分了。...上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？
，那是16版本及之前）；事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数；图片 盗用一张官方图，按官方解释，之所以会将事件委托从document中移到id...事件派发上面提到，事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数。...那问题来了，React是如何得知我们给事件绑定了回调函数并触发对应的回调函数的？带着这个问题我们来研究下事件派发。...以click为例，当我们点击页面的某个元素时，React会根据原生事件nativeEvent找到触发事件的DOM元素和对应的fiber节点。...，所有的事件通过addEventListener委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数
，那是16版本及之前）；事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数；图片 盗用一张官方图，按官方解释，之所以会将事件委托从document中移到id...事件派发上面提到，事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数。...那问题来了，React是如何得知我们给事件绑定了回调函数并触发对应的回调函数的？带着这个问题我们来研究下事件派发。...合成事件在合成事件中，会根据domEventName来决定使用哪种类型的合成事件。...，所有的事件通过addEventListener委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数
id = root的DOM元素中触发； React自身实现了一套事件冒泡捕获机制； React实现了合成事件SyntheticEvent； React在17版本不再使用事件池了（网上很多说使用了对象池来管理合成事件对象的创建销毁...，那是16版本及之前）； 事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数； 图片 盗用一张官方图，按官方解释，之所以会将事件委托从document中移到id...事件派发 上面提到，事件一旦在id = root的DOM元素中委托，其实是一直在触发的，只是没有绑定对应的回调函数。...那问题来了，React是如何得知我们给事件绑定了回调函数并触发对应的回调函数的？ 带着这个问题我们来研究下事件派发。...遍历listeners执行上面的listener。 合成事件 在合成事件中，会根据domEventName来决定使用哪种类型的合成事件。
我们可以通过监听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。...这个元素预定了点击 在点击发生时 执行函数中的代码 tg.onclick=function(){ alert('点了我'); } </html...在最初，是使用HTML事件处理程序的，也就是说，某个元素（如div），支持的每一种事件，都可以使用一个与相应事件处理程序同名的HTML特性来制定（也就是标签的一个属性），这个特性的值就是能够执行的JavaScript...谈一谈事件方面如何优化性能——事件委托和事件处理程序的移除 在JavaScript代码当中，添加到页面中的事件越多，页面的性能也就越差。...效果：点击不同的元素执行不同的操作。 不使用事件委托： <!
通过事件委托，你可以在父元素上监听事件，并根据事件发生的目标元素（子元素）来执行相应的操作。这样做的好处有：减少事件处理程序的数量：使用事件委托可以减少需要绑定事件处理程序的元素数量。...相对于为每个子元素绑定事件处理程序，只需在父元素上绑定一个事件处理程序即可。动态绑定和增加灵活性：当新的子元素被添加到父元素中时，它们会自动继承来自父元素的事件处理程序，无需再次手动绑定事件。...使用事件委托的典型示例是在一个列表或表格中根据用户点击的目标元素来执行相应的操作，例如处理点击列表项展开/收起详情、按钮点击事件等。请注意，事件委托并不适用于所有场景。...当事件发生时，委托对象将事件转发给代理对象，并由代理对象执行相应的回调函数。通过使用事件委托，可以实现以下优势：解耦：委托对象不需要了解具体的事件处理逻辑，只需负责触发和传递事件。...代码示例以下是一个简单的示例，演示了如何在JavaScript中使用事件委托：// 定义事件处理函数function eventHandler1() { console.log("EventSubscriber1
") }) $("#A").on("click" ,"#C",function (event) { console.log(event,"点击了C，即C委托A的click事件被点击了"...()来绑定事件 注意： （1）绑定常用的事件（如:click、focus），使用handleObj保存 handleObj = jQuery.extend( { //click,mouseout...handler: handler, //索引，用于关联元素和事件 guid: handler.guid, //事件委托的标志，也是委托的对象选择器...所以需要将这一百个同类型的事件保存到一个click事件集合中，然后在这一大个click事件集合内，根据guid来执行某一次的click处理代码 同一事件的处理： $('body').on('click'...十、trigger的触发机制 $("#A").on("click" ,function (event) { console.log(event,"A被点击了") }) 元素#A本身绑定了一个
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个...-- 更多列表项 --> 如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素...如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的...，新添加的列表项也会有点击事件 addItem(); 三、实战案例解析 假设我们有一个图片库，用户点击任何图片时，需要显示图片的描述： <img src="...<em>事件</em><em>委托</em>链：避免在多个<em>元素</em>上设置相同类型<em>的</em><em>事件</em>代理，这可能导致<em>事件</em>处理逻辑混乱。 <em>事件</em>对象：正确<em>使用</em> event.target 或 event.currentTarget <em>来</em>区分<em>事件</em><em>的</em>来源。
这些都是计算属性无法做到的。 如何根据设计稿进行移动端适配？...因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件时再去匹配判断目标元素，所以事件委托可以减少大量的内存消耗，节约效率。...；如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的，所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的...#list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #list li 元素之上； （3）局限性 当然，事件委托也是有局限的...当然事件委托不是只有优点，它也是有缺点的，事件委托会影响页面性能，主要影响因素有： 元素中，绑定事件委托的次数； 点击的最底层元素，到绑定事件元素之间的DOM层数； 在必须使用事件委托的地方，可以进行如下的处理
，用了事件委托，把事件绑在了ul上，没有给每个 li 都去绑定事件，看上去也是实现效果了，但是如果 li 里面还有子元素，那么这么去绑定事件就不行了，当点击 li 里面的子元素时，就出现问题了。...看图，当点击 蓝色 span 的时候，没有打印 li 被点击了 ，当点击 红色 li 的时候，才都打印出来，这是因为当点击 span 的时候，事件源是 span，虽然也能触发事件，但是并没有走 if判断...，所以就不会打印 li 被点击了 ，当点击 li 的时候，事件源是 li ，所以就可以了，但是我们往往需要的是，不管是点击li，还是点击 了 li 的子元素，都需要执行操作。...好的，我们来改改代码。...jQuery中的事件委托 jQuery中事件委托主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明 on( ) 方法主要有以下两种形式的用法 用法一 jQueryObject.on
通过事件委托，我们可以避免为每个子元素都绑定事件处理程序，而是将事件处理集中在父级元素上，从而减少了事件处理函数的数量，提高了性能和代码的可维护性。为什么使用事件委托？...使用事件委托有以下几个好处：减少事件处理函数的数量：通过将事件处理程序绑定到父级元素上，我们无需为每个子元素都绑定事件处理程序，从而减少了事件处理函数的数量，使代码更加简洁和可维护。...提高性能：由于事件委托将事件处理程序绑定到父级元素上，避免了为每个子元素都绑定事件处理程序的开销，从而提高了性能。如何使用事件委托？在jQuery中，我们可以使用on()方法结合选择器来实现事件委托。...元素作为父级元素，然后使用on()方法绑定了一个点击事件处理程序。...当元素被点击时，事件会冒泡到父级元素上触发事件处理程序，通过$(this)可以获取当前点击的元素，并输出其文本内容。
用document元素来处理按钮的点击行为就是事件委托的一个例子，另一种常见情况是，用ul元素来处理其子元素li的事件。 有多种方法来处理事件委托。标准方法来源于原生浏览器的功能。...然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。 还有第三个可以控制元素如何对事件作出回应的方法。...然而，当我们不希望链接跟普通被激活的链接一样会在新标签页打开一个新页面，就可以使用preventDefault方法来阻止这个默认行为。...使用事件委托能减少监听器数量，在元素的容器上绑定事件意味着只需要一个监听器。这种方法的缺点是,父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。...父容器层次的监听器能处理多种不同的事件操作，这是一种简单的方法来管理相关的事件操作，这些事件通常需要执行相关功能或需要共享数据。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
