jQuery 事件

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

参数含义

• events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "click.hello", 或者 ".hello"
• selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
• data：当一个事件被触发时，要传递给事件处理函数的 event.data
• handler(eventObject)：事件被触发时，执行的函数（回调）。

.one()

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

.off()

移除一个事件处理函数

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

.trigger( eventType [, extraParameters ] )

根据绑定到匹配元素的给定事件类型执行所有处理程序和行为，即通过代码JS使事件触发
.trigger 可自定义事件名称，例如下面例子中自定义名称为 myclick

//例如在下面的 demo 案例中
$('.box ul').one('myclick','li',{name: 'evenyao'}, function(e){
  var str = $(this).text()
  console.log(e.data)
  $('#wrap').text(str)
})

//通过执行完setTimeout之后 触发事件
setTimeout(function(){  
  $('.box li').eq(0).trigger('myclick')
},3000)

jQuery 事件案例

demo 案例

<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>
<script></script>

jQuery 普通事件

$('.box li').on('click', function(){
    console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})

//等同于
$('.box>ul>li').click(function(){
    console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})

命名空间写法

// 命名空间 hello
$('.box li').on('click.hello',function(){
  console.log('hello')
  var str = $(this).text()
  $('#wrap').text(str)
})

$('.box li').on('click.world',function(){
  console.log('world')
  var str = $(this).text()
  $('#wrap').text(str)
})

// 命名空间无特别作用，只是在解绑事件时便于区分绑定事件
$('.box li').off('click.hello')

jQuery 事件代理

即直接在'click'之后指定'li'，即是 jQuery 事件代理的写法

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

等同于 原生JS 事件代理写法

//上面代码相当于原生JS的
document.querySelector('.box ul').addEventListener('click',function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
    //console.log(e.target)
    var str = e.target.innerText
    //console.log(str)
    document.querySelector('#wrap').innerHTML = '<div id="wrap">' + str + '</div>'
  }
})