日日行,不怕千万里

javascript--事件委托

1、事件委托利用事件冒泡,就是外层一个事件的处理程序,就可以管理一类型的所有事件。

  例子:

     <ul id = "box">

      <li id="1" >序列1</li>

         <li id="2" >序列2</li>

      <li id="3" >序列3</li>

     </ul>

  处理方式1: 给每个<li></li>加上一个onclick事件。

  处理方式2: 给<li></li>的相对外层加上一个事件,由于<ul></ul>的点击事件,<li></li>属于<ul></ul>所以没有必要所有的都加上onclick事件。

      const box = document.querySelector('#box');

      box.onclick = () => { alert(“123”) };

2、事件委托好处: 

  1.   每个函数声明需要占用内存,事件委托节约内存。
  2.     内存多了性能差,所以事件委托节约性能。
  3.   减少Dom的访问次数,会加快页面的交互时间。

3、事件委托常用事件:

  click、mousedown、mouseup、keydown、keypress、mouseover、mouseout

 

posted @ 2017-10-29 20:53  GongXiaoZhu  阅读(116)  评论(0编辑  收藏  举报