简述：js事件代理的7种方法

Posted 2020-08-08

以为buttton元素绑定单击事件，来探讨事件绑定的几种方式：

1.最原始的方法：在button元素里面添加onclick事件,代码如下：

<button onclick=function(){}></button>

   这种方法虽然使用简单，但是有一个缺点就是：页面显示和事件处理混在一起，不符合网页开发设计的理念。

 

2.事件监听（addEventListener)

   获取button元素，绑定事件监听 .addEventListener(‘click‘,fn,[true/false]);

  注：最后一个参数表示是否使用事件捕获，默认为false

 

3.jQuery的四种办法

      3.1 直接绑定.click()事件，代码如下：

           $("button") .click( function() {
                $("p").slideToggle();
              })
  
    3.2 使用.bind()方法
             $(‘button‘).bind(‘click‘,  [data],  function(){});
           注：此方法可为button元素绑定一个或多个事件处理程序，以及当事件发生时运行的函数。

    3.3  事件代理的3种方法

       当一个元素的多个子元素发生click事件或者有新生成的子元素发生click事件时，可以用事件代理方法，目前用的比较多的有.live(), .delegate()和.on()方法   

                   3.31  .live()为当前或未来的匹配元素添加一个或多个事件处理器        

                                $("button").live(‘click‘,  [data],  function(){})

                .live()为button元素附加一个事件处理函数，即使这个元素是以后再添加进来的

                注：.live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

                    3.32    .delegate(ChildSelector‘,  event,  [data], fn ) 
            
                              注：与.live()相比较，.delegate()
   
                    3.33    .on(‘click‘,  selector,  [data],  fn)
                                    .on()方法是最新1.9版本，整合了之前几种方式的新的事件绑定方法