在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用 on / off 方法

一、绑定事件

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

A、参数

• events：事件类型和可选的命名空间，比如"click", "keydown.myPlugin"

  注：如有多个事件类型，用空格分隔

• selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。

  注：选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件

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

• handler(eventObject)：事件被触发时，执行的函数。

  注：若该函数只是执行return false，那么该参数位置可以直接简写成 false

B、实例

html部分

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

Js 部分

• 场景一、点击li，wrap里展示li里内容

$('.box li').on('click', function(){
  var str = $(this).text()//所点击的元素的内容 即li元素里面的1,2,3,4
  $('#wrap').text(str)
})
// .on事件 其实类似于原生js 的addEventListener

也可以简写为事件后边直接回调

$('.box>ul>li').click(function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

如果需要解绑对应的事件，此时需要给事件加一个命名空间

$('.box li').on('click.hello', function(){
    console.log(3)
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

执行结果

image.png

上图我们可以发现，click.hello 解绑事件了，但是没有影响到click.world事件

注：解绑事件只会解绑对应的事件，其他事件不受影响

• 场景二、点击button ,把 input 的值变成 li 添加到ul

  $('#btn').on('click', function(){
    var value = $('#ipt').val()
    $('.box>ul').append('<li>'+value+'</li>')
  })

image.png

绑定事件只对页面已有元素的绑定，新增的元素没有绑定事件，可以用事件代理解决这个问题

$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})//这里的 this 是你所点击的元素

$('.box ul').on('click', 'li', function(){
  var str = $(this).text()//这里的this也是代表所点击的元素li
  $('#wrap').text(str)
})

image.png

• 场景三 绑定事件时，给回调函数传递数据

$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

image.png

(2) .one( events [, selector ][, data ], handler(eventObject) )

同 on，绑定事件，但只执行一次

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

移除(解绑)一个事件处理函数

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

(4) .trigger( eventType [, extraParameters ] )

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('.box li').on('click', function() {
  console.log($(this).text())
});
$('.box li').trigger('click')

其实就是不需要手动操作，代码自已去触发事件

二、其他常见事件

image.png