jQuery事件綁定.on()簡要概述及應用

PC教程網】關于jQuery事件綁定.on()簡要概述及應用_簡要概述印度哲學史介紹:前幾天在看《jquery基礎教程》,看到事件委托的時候,關于live()方法講的不是很詳細,就去搜了一下關于live()和delegate()的。 然后在一處看到live()已經被移除了,囧,然后去看了最新的,下面小編為您針對jQuery事件綁定.on()簡要概述及應用進行分享:

前幾天在看《jquery基礎教程》,看到事件委托的時候,關于live()方法講的不是很詳細,就去搜了一下關于live()和delegate()的。

然后在一處看到live()已經被移除了,囧,然后去看了最新的jq源碼,果然被移除了,現在是1.9.1版本,不知道live()是在之前哪個版本被移除的,慚愧啊,之前都沒留意。

看源碼發現bind()和delegate()都是由on()實現的。on()的描述如下:

教程實例 代碼如下:

.on( events [, selector ] [, data ], handler(eventObject) )

一個簡單的事件綁定如 $('button').on('click',function(){}); 與bind()無二樣。

在需要為較多的元素綁定事件的時候,優先考慮事件委托,可以帶來性能上的好處。比如:

  

如上圖,將click事件綁定在document對象上,頁面上任何元素發生的click事件都冒泡到document對象上得到處理。

注意到.on()的描述中第二個可選參數:selector。如下圖,添加了第二個參數,選擇符button:


結果:

當事件冒泡到document對象時,檢測事件的target,如果與傳入的選擇符(這里是button)匹配,就觸發事件,否則不觸發。

注意.on()也可以接收一個對象參數,該對象的屬性是事件類型,屬性值為事件處理函數。下面是官方文檔的一個例子:

最后有一點,原先的live()方法,處理函數是默認綁定在document對象上不能變的,如果DOM嵌套結構很深,事件冒泡通過大量祖先元素會導致較大的性能損失。而使用.on()方法,事件只會綁定到$()函數的選擇符表達式匹配的元素上(上面我的例子中,為了簡單綁定到了document),因此可以精確地定位到頁面中的一部分,而事件冒泡的開銷也可以減少。delegate()與on()同理,畢竟是用on()實現的:

相關教程

jQuery事件綁定on()、bind()與delegate() 方法詳解

啃了一段日子的js相關了,學的過程中發現在jQuery中綁定事件時,有人用bind(),有人用on(),有人用delegate(),還有人用live(),看代碼的時候覺得都實現功能了也就掀過去了,只是一直沒完 …

jquery事件綁定解綁機制源碼解析

引子 為什么Jquery能實現不傳回調函數也能解綁事件?如下: $("p").on("click",function(){ alert("The paragraph was clicked.");});$("#box1").off("click"); 事件綁定解綁機制 調用on函數的時候,將生成一份事 …

深入理解jQuery事件綁定

html: a href="#" onclick="addBtn()"addBtn/adiv id="mDiv" button class="cBtn" onclick="alert(11111)"button1/button button class="cBtn"button2/button button class="cBtn"button3/button/div javascript: script type="text/javascript" function add …

jQuery事件綁定與解除綁定實現方法

本文實例講述了jQuery事件綁定與解除綁定實現方法。分享給大家供大家參考。具體如下: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlheadtitle New Docu …

JQuery入門——移除綁定事件unbind方法概述及應用

JQuery入門——移除綁定事件unbind方法概述及應用

1、在DOM對象的實踐操作 中,既然存在用于綁定事件的bind方法,也相應存在用于移出綁定事件的方法,在JQuery中,可以通過unbind方法移除所有綁定的事件或某一個事件。 2、示例代碼 : …

android實現session保持簡要概述及實現

在最近寫的一個Android中需要請求web服務器中的數據,有一個登錄Activity,登錄后會到MainActivity,這中間登錄和MainActivity都需要請求php的jsonapi,所以要在網絡請求中保持session的,研究了好 …

jQuery文本框(input textare)事件綁定方法教程

目前1.7以上,jquery的事件綁定已經用on替換了原來的bind,接下來為大家介紹下bind的使用方法及input textare事件,感興趣的朋友可以參考下 (1)jquery 綁定事件 目前1.7以上,jquery的事件綁定已 …

對jQuery的事件綁定的一些思考(補充)

對jQuery的事件綁定的一些思考(補充)

首先我們看下面的一個很常見的事件綁定代碼: 教程實例 代碼如下: //example $('#dom').click(function(e){ //do something }); $('#dom2').click(function(e){ //do something }); 這段代碼在事件綁定處理上有一些 …

關于jquery input textare 事件綁定及用法學習

(1)jquery 綁定事件 目前1.7以上,jquery的事件綁定已經用on替換了原來的bind; 區別:(個人理解)bind是一次綁定事件到每一個子節點;on是只綁定到父節點,然后冒泡到各個子節點; 用法: …

内蒙古十一选五任五推荐号