• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
123
博客园    首页    新随笔    联系   管理    订阅  订阅
事件委托和性能优化

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

<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。

posted on 2020-01-24 18:47  login123  阅读(310)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3