1. 程式人生 > >jquery的事件委託-bind,live,delegate,on的區別

jquery的事件委託-bind,live,delegate,on的區別

事件委託:讓利用事件冒泡的原理,讓自己的所觸發的事件,讓他的父元素代替執行!

一、bind()方法 (只能給已經存在的元素上繫結事件)

只能給呼叫它的時候已經存在的元素繫結事件,不能給未來新增的元素繫結事件。

二、live()方法(繫結到document DOM節點上。和.bind()的優勢是支援動態資料

新增的.live()方法代替.bind()方法。live()方法會把click事件繫結到$(document)物件,但是生成了不必要的jQuery物件,導致效能損失;

(function($){$("#info_table td").live("click",function(){

/*顯示更多資訊*/}); })(jQuery);使用叫做早委託hack,在整個dom元素載入之前呼叫live可以減少jquery物件的生成,解決上述缺點。(function($){...})(jQuery)是一個立即執行的匿名函式這時候剛好document元素可用,而整個DOM還遠未生成。

為解決事件傳播鏈過長的問題,jQuery1.4開始支援在使用.live()方法時配合使用一個上下文引數:

$("td",$("#info_table")[0]).live("click",function(){/ 顯示更多資訊/});

受託方就從預設的$(document)變成了$("#info_table")[0]

,節省了冒泡的旅程。只能放在直接選擇的元素後面,不支援連結使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;

三、delegate()方法(更精確的小範圍使用事件代理,效能優於.live()

為了解決無謂生成元素集合的問題,jQuery 1.4.2乾脆直接引入了一個新方法.delegate()

$("#info_table").delegate("td","click",function(){/*顯示更多資訊*/});

優點:(或者說解決了.live()方法的如下問題):

直接將目標元素選擇符(

"td")、事件("click")及處理程式與“受拖方”$("#info_table")繫結,不額外收集元素、事件傳播路徑縮短、語義明確;

支援在連綴的DOM遍歷方法後面呼叫,即支援$("table").find("#info").delegate...,支援精確控制;

四、on()方法-1.9版本整合了之前的三種方式的新事件繫結機制

$("#info_table").on("click","td",function(){/*顯示更多資訊*/});引數的位置寫法與delegate不一樣

jQuery 1.7為了解決.bind().live().delegate()並存造成的不一致性問題,將會增加一對新的事件方法:.on().off()

$(elems).on(events, selector, data, fn);

$(elems).off(events, selector, fn);//相反的方法

說明:

on方法是當前JQuery推薦使用的事件繫結方法,附加只執行一次就刪除函式的方法是one()

相關推薦

jQuery事件委託方法bindlivedelegateon之間有什麼區別

(1)、bind 【jQuery 1.3之前】 定義和用法:主要用於給選擇到的元素上繫結特定事件型別的監聽函式; 語法:bind(type,[data],function(eventObject)); 特點:   (1)、適用於頁面元素靜態繫結。只能給呼叫它的時候已經

Jquery中.bind()、.live()、.delegate()和.on()之間的區別詳解

簡介 最近了解到很多網頁開發者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關於它們之間真正的區別是什麼啊,什麼時候該使用它們啊。下面本文將給大家詳細介紹這四個方法之間的區別,分別對每個方法都進

jQuery中的.bind()、.live()和.delegate()之間區別分析

現在我們可以較容易地說明.bind()、.live()和.delegate()的不同之處了。 .bind() 程式碼如下: $('a').bind('click',function(){alert('That tickles!');}) 這是最簡單的繫結方法了。JQuery掃描文件找出所有的$(‘a')元素

jquery事件委託-bindlivedelegateon區別

事件委託:讓利用事件冒泡的原理,讓自己的所觸發的事件,讓他的父元素代替執行! 一、bind()方法 (只能給已經存在的元素上繫結事件) 只能給呼叫它的時候已經存在的元素繫結事件,不能給未來新增的元素繫結事件。 二、live()方法(繫結到document DOM節點

jquery中的bind()、live()的區別與使用(事件處理)

綁定 HA 我們 doc dso 目標 code span ive 原文:jquery中的bind()、live()的區別與使用(事件處理)使用jquery有一段時間了,剛開始看別人的源代碼的時候對事件的綁定方法有疑惑。比如: var btn=$("#button")

jQuerybindlivedelegate區別

DOM樹 首先,視覺化一個HMTL文件的DOM樹是很有幫助的。一個簡單的HTML頁面看起來就像是這個樣子: 事件冒泡(又稱事件傳播) 當我們點選一個連結時,其觸發了連結元素的單擊事件,該事件則引發任何我們已繫結到該元素的單擊事件上的函

Jquery繫結事件bindlive區別

Jquery中繫結事件有三種方法:以click事件為例    (1)target.click(function(){});    (2)target.bind("click",function(){}

one、bind、unbind、livedelegateon、trigger、triggerHandler區別

類型 函數 區別 瀏覽器 添加 defined 把他 委托 IT one:為每一個匹配元素的特定事件綁定一個一次性的事件處理函數,這個事件處理函數只會被執行一次,其他的規則與bind()相同,這個事件函數會接受到一個事件對象,可以通過他來阻止瀏覽器默認行為,如果想取消默認的

jquery事件委託

不使用事件委託會有以下四個問題 第一:大量的事件繫結,效能消耗,而且還需要解綁(IE會洩漏) 第二:繫結的元素必須要存在 第三: 後期生成HTML會沒有事件繫結,需要重新繫結 第四: 語法過於繁雜 事件委託利用事件冒泡原理,自己

javascript事件委託jquery事件委託

元旦過後,新年第一篇。 初衷:很多的面試都會涉及到事件委託,前前後後也看過好多博文,寫的都很不錯,寫的各有千秋,自己思前想後,為了以後自己的檢視,也同時為現在找工作的前端小夥伴提供一個看似更全方位的解讀事件委託的地方來認識瞭解他的原理,本篇文章彙總了兩個版本的事件委託:javascript、jquery;

JavaScript原生事件委託以及JQuery事件委託on()的程式碼片段

<!DOCTYPE html> <html> <head><title></title>   <style type="text/css">     .container{       width:10

jQuery事件-委託機制、事件物件

委託機制 語法:.on( events ,[ selector ] ,[ data ], handler(eventObject) ) 原理:如果提供了第二引數,那麼事件在往上冒泡的過程中遇到了選擇

jQuerybindlivedelegateon繫結事件的方式與區別

jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函式分別是unbind、die、undelegate、off。 已知有4個列表元素:   列表元素1   列表元素2   列表元素3   列表元素4

jQuerybind()one()on()live()這幾個繫結事件函式的區別

1、bind()方法 為每個匹配元素的特定事件繫結事件處理函式。bind()方法的底層邏輯是on()方法。 .bind() 方法是用於往文件上附加行為的主要方式。所有JavaScript事件物件,比如focus, mouseover, 和 resize,都是可以作為type引數傳遞進來

Jquery中的bind(),live(),delegate(),on()綁定事件方式 前言

文章 let com 多說 空格 code html event 進行 前言   因為項目中經常會有利用jquery操作dom元素的增刪操作,所以會涉及到dom元素的綁定事件方式,簡單的歸納一下bind,live,delegate,on的區別,以便以後查閱,也希望該文章日後

開發過程中用Zepto/jquery給未來元素新增事件live()無法使用解決方法

 通過 live() 方法附加的事件處理程式適用於匹配選擇器的當前及未來的元素(比如由指令碼建立的新元素)。 live() 方法為被選元素附加一個或多個事件處理程式,並規定當這些事件發生時執行的函式。 $("button").live("click",function(){ $

javascript事件委託理解jQuery on 方法一步到位實現事件委託

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

JQuery事件繫結函式中的bind,live,delegate,on的差別?

bind:把事件繫結到每一個匹配的元素上,主要特點 1.相容性比較好 2.繫結事件到所有選出來的元素上 3.不會繫結事件到動態新增的那些元素上 4.當元素很多時,會出現效率問題,特別是巢狀層次比較深的元素。 html程式碼 <ul id="ul">

jquery live() delegate() on() 事件委託的一些區別

隨著DOM結構的複雜化和Ajax等動態指令碼技術的運用,有了較多的動態新增進來的元素,直接用JQ新增click事件會發現新新增進來的元素並不能直接選取到,在這裡就需要用到事件委託方法,JQ為事件委託提供了live()、dalegate()和on()方法。    事件委託 我們知道,DOM在為頁面中的

javascript事件委託理解jQuery .on()方法一步到位實現事件委託

本篇文章借鑑自:部落格園文章,只為自己鞏固下事件委託方面的知識 概述: 什麼叫事件委託?他還有一個名字叫做事件代理,(時間代理 === 事件委託,現在才知道這兩個是一個意思) 高程3上講:事件委託即是利用事件冒泡,只指定一個事件處理程式,就可以管理某