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