zoukankan      html  css  js  c++  java
  • 事件的委托处理(Event Delegation)

    javascript的事件模型,采用”冒泡”模式,也就是说,子元素的事件会逐级向上”冒泡”,成为父元素的事件。

    利用这一点,可以大大简化事件的绑定。比如,有一个表格(table元素),里面有100个格子(td元素),现在要求在每个格子上面绑定一个点击事件(click),请问是否需要将下面的命令执行100次?

    $(“td”).bind(“click”, function(){

    $(this).toggleClass(“click”);

    });

    回答是不需要,我们只要把这个事件绑定在table元素上面就可以了,因为td元素发生点击事件之后,这个事件会”冒泡”到父元素table上面,从而被监听到。

    因此,这个事件只需要在父元素绑定1次即可,而不需要在子元素上绑定100次,从而大大提高性能。这就叫事件的”委托处理”,也就是子元素”委托”父元素处理这个事件。

    具体的写法有两种。第一种是采用.delegate()方法:

    $(“table”).delegate(“td”, “click”, function(){

    $(this).toggleClass(“click”);

    });

    第二种是采用.live()方法:

    $(“table”).each(function(){

    $(“td”, this).live(“click”, function(){

    $(this).toggleClass(“click”);
    });
    });

    这两种写法基本等价。唯一的区别在于,.delegate()是当事件冒泡到指定的父元素时触发,.live()则是当事件冒泡到文档的根元素后触发,因此.delegate()比.live()稍快一点。此外,这两种方法相比传统的.bind()方法还有一个好处,那就是对动态插入的元素也有效,.bind()只对已经存在的DOM元素有效,对动态插入的元素无效。

    根据测试,委托处理比不委托处理,快了几十倍。在委托处理的情况下,.delegate()又比.live()大约快26%。

  • 相关阅读:
    基于 Spring Cloud 的微服务架构实践指南(上)
    1分钟,带你上手“Markdown”语法
    Spring Cloud 理论篇
    如何设计一个优雅的RESTFUL的接口
    简简单单之Linux命令入门
    SpringBoot基础架构篇3(Redis)
    SpringBoot基础架构篇1(SpringBoot、MyBatis-Plus与Thymeleaf)
    基础之Lambda和Stream的邂逅
    浏览器如何执行JS
    渲染进程里的线程
  • 原文地址:https://www.cnblogs.com/bluers/p/3448427.html
Copyright © 2011-2022 走看看