事件代理总结

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

1
2
3

<button onclick=function(){}></button>
   这种方法虽然使用简单，但是有一个缺点就是：页面显示和事件处理混在一起，不符合网页开发设计的理念。

2.事件监听（addEventListener)

1
2
3

 获取button元素，绑定事件监听 .addEventListener('click',fn,[true/false]);
注：最后一个参数表示是否使用事件捕获，默认为false

3.jQuery的四种办法

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

1
2
3

$("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版本，整合了之前几种方式的新的事件绑定方法

2017-06-14