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>' } })