zoukankan      html  css  js  c++  java
  • 事件委托和性能优化

    对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如:

    <ul id="myul">
     <li id="go">go somewhere</li>
     <li id="do">do something</li>
     <li id="del">delete something</li>
    </ul>
    
    <script>
      var myul = document.getElementById('myul');
      EventUtil.addHandler(myul,'click',function(event){
       event = EventUtil.getEvent(event);
       var target = EventUtil.getTarget(event);
       switch(target.id){
        case 'go':doSomething...;break;
        case 'do':doSomething...;break;
        case 'del':doSomething...;break;
       }
      });
    </script>

    如果可行的话,也可以考虑为document对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。这样做与传统做法相比较有如下优点:
    ①document对象很快就可以访问,而且可以在页面生命周期的任何时间点上为他添加事件处理程序。
    ②在页面设置事件处理程序所需时间更少。只添加一个事件处理程序所需的DOM引用更少,所花的时间也更少。
    ③整个页面占用的内存空间更少,能够提升整体性能。
    最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

  • 相关阅读:
    npm总是安装不成功,而且很慢?
    Nginx启动报错:10013: An attempt was made to access a socket in a way forbidden
    firebug如何使用
    video详解 HTML5中的视频:
    树的各种遍历
    SQL语句执行顺序
    vim常用命令
    无监督分类算法—K-Means
    Json字符串和Json对象的简单总结
    List拆分成多个集合
  • 原文地址:https://www.cnblogs.com/login123/p/12243456.html
Copyright © 2011-2022 走看看