JQuery中事件繫結的四種方法及其優缺點
JQuery中事件繫結的方法有bind
、live
、delegate
、on
1、bind
:bind(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
struts2中Action資料繫結幾種方法
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">