1. 程式人生 > >JQuery中事件繫結的四種方法及其優缺點

JQuery中事件繫結的四種方法及其優缺點

JQuery中事件繫結的方法有bindlivedelegateon

1、bindbind(type [,data], fn)

.bind監聽器繫結到目標元素上,會將所有匹配的元素都繫結一次事件。因此,當元素很多時,後來動態新增的元素不會被繫結。
例:

$("#foo").bind('click',function(){
    console.log("clicked");
})

簡寫:

$("#foo").click(function(){
    console.log("clicked");
})

2、live

.live,監聽器繫結到document上,利用事件委託,可以像呼叫bind

一樣呼叫live方法,但兩者的底層實現不一樣。.live繫結的事件也會匹配到那些動態新增的元素,而且,被live繫結的事件只會被附加到document元素上一次,因此提高了效能。
例:

$( "#members li a" ).live( "click", function( e ) {} );

注意:該方法在1.7版本後被棄用

3、delegate$(selector).delegate(childSelector,event,data,function)

.delegate與.live類似,不會監聽器繫結到你指定的附加元素上,而不是document
上,也利用了事件委託,因此也提高了效能。但是該方法不能直接由bind過渡
例:

$( "#members" ).delegate( "li a", "click", function( e ) {} );

4、on$(selector).on(event,childSelector,data,function)

1.7版本新新增的,也是推薦使用的事件繫結方法。其實bind、live、delegate都是通過該方法實現的:

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this
.off( types, null, fn ); }, live: function( types, data, fn ) { jQuery( this.context ).on( types, this.selector, data, fn ); return this; }, die: function( types, fn ) { jQuery( this.context ).off( types, this.selector || "**", fn ); return this; }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { return arguments.length == 1 ? this.off( selector, "**" ) : this.off( types, selector, fn );

因此,使用on方法和使用以上個方法的一樣

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

對於只需要觸發一次,隨後就要立即解除繫結的情況,也可以使用one()方法。即在每個物件上,事件處理函式只會被執行一次。

相關推薦

js事件3方法以及事件委託

事件繫結 首先,我先來介紹我們平時繫結事件的三種方法。 1.嵌入dom <button onclick="open()">按鈕</button> <script> function open(){ alert(

JQuery事件方法及其優缺點

JQuery中事件繫結的方法有bind、live、delegate、on 1、bind:bind(type [,data], fn) .bind,監聽器繫結到目標元素上,會將所有匹配的元素都繫結一次事件。因此,當元素很多時,後來動態新增的元素不會被繫結。

JS事件的2方式

    首先,在body裡寫一些內容。                    &nbs

struts2Action資料方法

struts2中的Action接收表單傳遞過來的引數有3種方法: 1>  在Action類中定義表單屬性 如,登陸表單login.jsp:  <form action="login" method="post" name="form">  Us

vue組件的方法總結

end bsp nbsp 四種 temp recommend show -s com 希望對大家有用 全局組件的第一種寫法 html: <div id = "app"> <show></show></div>

Javascript事件的函式加括號和不加括號的區別

今天在學習javascript中的時候遇到了一個問題,我將此問題簡化,抽取部分程式碼,如下: 說明:#fname為一個按鈕,test是一個普通函式 test函式 function test() { alert("執行test函式"); }

Vue事件

1.滑鼠劃過操作hover 2.新增一個滑鼠點選事件v-on:click="aaa(0)" 可以寫成@click="aaa(0)" <div>{{activeindex}}</div> activeIndex=null 設定初始值為空 3.給aaa新增

jQuery基礎事件

學習要點: 1.繫結事件 2.簡寫事件 3.複合事件 JavaScript有一個非常重要的功能,就是事件驅動。當頁面完全載入後,使用者通過滑鼠 或鍵盤觸發頁面中繫結事件的元素即可觸發。jQuery為開發者更有效率的編寫事件行為,封 裝了大量有益的事件方法供我們使用。

CSS及其特點和HTML引入css的方法

CSS 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網

SpringBoot給容器註冊元件的方法(簡易版)

本文介紹的方法比較簡潔,需要有Spring基礎 方法一:包掃描+註解 1.配置類,標明註解掃描的範圍 //告訴Spring這是一個配置類 @Configuration //註解所掃描的範圍,類似於spring配置檔案的 context:component-scan

Python字典合併的方法

字典是Python語言中唯一的對映型別。 對映型別物件裡雜湊值(鍵,key)和指向的物件(值,value)是一對多的的關係,通常被認為是可變的雜湊表。 字典物件是可變的,它是一個容器型別,能儲存任意個數的Python物件,其中也可包括其他容器型別。 字典型別與序列型別

PHP從陣列刪除元素的方法例項

刪除一個元素,且保持原有索引不變 使用 unset 函式,示例如下: <?php   $array = array(0 => "a", 1 => "b", 2 => "c")

jQuery原始碼-事件函式bind/delegate/click...

 前言:我用的jQuery版本為v2.0.1,jQuery繫結事件的介面有bind/delegate/click等其他方法,但是他們最終呼叫的還是this.on作為入口 但是jQuery提供兩種繫結機制 1.普通事件繫結 2.委託繫結事件 這兩中的區別有很大的不同,只是在作

jquery on()事件

$("#test1").on('click', function(e) { $(this).text('觸發事件:' + e.type) }) $("#test2").on('mousedown mouseup', function(e)

JQuery事件事件委託

1、事件委託與事件繫結概念 事件繫結:將普通的事件event繫結在DOM節點上,當DOM節點被選中時,將事件與之繫結,方便使用者提供相應的操作。比如:在button按鈕上繫結click滑鼠事件,在input中繫結focusin焦點事件等等,具體的例如:常常在

jQuery解除事件 unbind

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type=

layui事件

開頭宣告 非原創(下面的選項不知道選哪個,厚著臉皮選個原創)  初入職場的小白 總有太多不懂  寫頁面的時候有一個需求是要  點選按鈕出彈框頁面  layui中有彈框但是沒有符合需求的  翻了大半天的文件 示例都沒法實現想要的結果 終於 在我的不(y

前端事件處理的方法

事件就是使用者或瀏覽器自身執行的某種動作,比如CLICK,LOAD,MOUSEOVER等等,響應事件的函式就是事件處理函式。 1.事件處理可以直接在HTML級別寫,<button onclick="somefunction()"  />這樣就可以呼叫在頁面其他地

js事件和普通事件的區別

簡單來說,普通事件中的onclick只支援單個事件,會被其他onclick事件覆蓋,而事件繫結中的addEventListener可以新增多個事件,而不用擔心被覆蓋。並且普通方式繫結事件後,不可以取消。addEventListener繫結後則可以用removeEvenList

JS事件函式,事件捕獲,事件冒泡

1 事件繫結:事件與函式繫結的方式 1.1 元素.onclick這種形式,如下: 1 <div id="div1">aaa</div> 2 3 <script type="text/javascript">