jQuery绑定事件与事件代理

在1.7之前的版本中jQuery处理事件有多个方法：live、bind、degelate（作用各不相同)。后来统一的使用on/off方法

.on()

.on( events [,selector ] [,data ], handler(eventObject) )

• events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"

• selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件

• data：当一个事件被触发时，要传递给事件处理函数的event.data

• handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

  

    
1
    
2
    
3
    
4
  

 添加

绑定事件：

  $('ul li').on('click',function(){
    console.log($(this).text())    //点击输出
  })  

on

新增元素

$('#btn').on('click', function(){
  var value = $('#ipt').val()      //获取input值
  $('.box>ul').append('
'+value+'
')      //ul新增li，value为input值
})

新增

查看绑定事件对新增元素是否生效

未生效

可以清楚的看到我们直接给li添加事件，会导致后来新增的DOMli点击没有效果，这个和javaScript的点击事件和事件代理是一样，可以使用事件代理来处理这个点击事件

//事件代理
$('.box ul').on('click', 'li', function(){
  console.log($(this).text());
})
//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        //do something
    }
})

事件代理

.off()

.off( events [, selector ] [, handler ] )

移除一个事件处理函数

$('.box li').off('click')