事件委托(时间冒泡)

事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

jQuery事件delegate()实现事件委托

　　delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

　　格式：$(selector).delegate(childSelector, event, data, function)

 

参数描述
childSelector 必需，规定要附加事件处理程序的一个或多个子元素。
event

必需，规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选，规定传递到函数的额外数据。
function 必需，规定当事件发生时运行的函数。 
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
 
<body>
  <ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
  </ul>
 
  <script>
    $(document).ready(function () {
      $("#myLinks").delegate("#goSomewhere", "click", function () {
        location.href = "http://www.baidu.com";
      });
    });
  </script>
 
</body>
 

原文链接：https://blog.csdn.net/qq_38128179/article/details/86293394

 

 

优点：

　　1、可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒

　　2、可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

 

 

Vue里边实现阻止时间冒泡:

用修饰符<a  @click.stop="doThis"></a>

posted @ 2021-07-30 10:03  飞扬*  阅读(75)  评论(0)    收藏  举报