首页 > 代码库 > 简述:js事件代理的7种方法

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

以为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版本,整合了之前几种方式的新的事件绑定方法

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