jQuery之on

来源:http://www.cnblogs.com/giggle/archive/2016/04/08/5365421.html
-Advertisement-
Play Games

在jQuery1.9版本中，已經去掉了live和delegate方法，從而將on方法的地位進一步提升。 jQuery如此推崇on方法，必有其牛逼的地方。那麼我們就有必要瞭解這個on，併在代碼中利用它，從而優化代碼和提高性能。 註：在jQuery1.7後，on方法就可以全面綁定任何事件了。 .on( ...


在jQuery1.9版本中，已經去掉了live和delegate方法，從而將on方法的地位進一步提升。

jQuery如此推崇on方法，必有其牛逼的地方。那麼我們就有必要瞭解這個on，併在代碼中利用它，從而優化代碼和提高性能。

一、on之基本使用方法

註：在jQuery1.7後，on方法就可以全面綁定任何事件了。

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

　　event:為事件類型，可以有多個事件類型。

　　selector:可選，過濾綁定在on方法上的後代元素。註：如果有selector，on方法是採用事件代理，這樣可以提升代碼性能。

　　data:可選，當事件被觸發時，它會傳給event.data，從而可以加以利用

　　handler:當事件被觸發時，執行的方法。

下麵寫個demo，看看on的使用：

//當p元素的click事件，被觸發時，彈出p元素的文本信息
$('p').on('click',function(){
    alert( $(this).text() );
});
//在上面的基礎上，傳值給p元素
$('p').on('click',{foo:"bar"},function(event){
    alert( event.data.foo );
});
二、on之事件代理

標準瀏覽器中都有事件冒泡(bubble)或捕獲(propagate)機制(除IE)。

如下圖：

--當目標元素被觸發時，它的流程是，先從它祖先元素一層一層，跋山涉水將事件傳達給目標函數，如上圖中P的父元素 à target的父元素P à target，此為事件捕獲；

--當目標函數被觸發後，又將事件一層一層傳遞到根節點，即老祖宗，此為事件冒泡。

所有瀏覽器都有事件冒泡機制。所以，我們可以利用這一特性，優化代碼，減少事件綁定。

on方法也利用了這一特性。當‘selector’被提供時，就是事件委托，事件觸發時，直接綁定在on方法上的元素是不會觸發該事件，而它指定的後代元素‘selector’就會利用冒泡機制，到直接綁定在on方法上的元素，給予處理。

舉個例子，我們在寫導航欄時，經常用到ul+li這種方式，當點擊每一個li時，頁面相應切換，沒有經驗的做法嘛，就是將每個li綁定一個click嘛。

那麼，問題來了。沒過幾天，突然我發現有幾個li的模塊其實可以整合到一起的，怎麼辦呢？刪除原來為li添加的事件，再重新寫過？

沒過幾天，假設有新需求來，我要加兩個模塊呢？

假如你用的是jQuery框架，完全可以在最開始用on方法嘛，利用事件委托其特性，一鍵搞定。

如下：

function doSomething(){
    console.log(this);
}
$('ul').on('click','li',doSomething/*在這裡，doSomething方法中this指向的是li*/);

註：on方法中當selector有值時，雖然採用的冒泡機制，但this指向的是目標元素對象。

如：

function doSomething(event,name){
    //結果為true
    console.log( event.target === this );
}
$('ul').on('click','li',doSomething);
三、on之false

在on方法中，如果你想阻止事件冒泡又想阻止預設事件行為，你可以採用快捷方式，直接false。

如表單提交：

$('form').on('submit',false);
四、on之data

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

當data有值且不為null或者undefined，事件被觸發時，它會被傳給event.data。

但，請註意，當你傳入data的值後，它是恆定不變的。什麼意思？

看看下麵的demo：

<!DOCTYPE html> 
    <head>
        <title>on</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            ul{
                overflow:hidden;
            }
            ul li{
                float:left;
                margin-left:10px;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>item1</li>
            <li>item2</li>
        </ul>
        <!--需要自行引入jquery-->
        <script src="jquery-1.12.0.js"></script>
        <script>
            var name = 'monkey';
            /*5秒後將name的值變成'dorie'*/
            setTimeout(function(){
                name = 'dorie';
                console.log('after setTimeout: ' + name);
            },5000);
            //列印event.data.msg
            function doSomething(event){
                console.log(event.data.msg);
            };
            //msg:name，即msg:'monkey'
            $('ul').on('click','li',{msg:name},doSomething);
        </script>
    </body>
</html>

運行代碼後的結果：

我們不但可以這樣在綁定元素事件的時候賦予data值，我們還可以用.trigger()或者.triggerHandler()來傳遞值哦，只需要在觸發方法（如下的doSomething）中再加入一個參數哈。

如下：

/*第一個參數當然是用來接收event的哈*/
function doSomething(event,name){
    console.log(name);
}
$('ul').on('click','li',doSomething);
/*here trigger*/
$('li').trigger('click','monkey');

那如果我想利用trigger傳入兩個或者多個值呢？是不是再加入幾個參數呢？

不太對，我們先看看下麵的代碼:

<!DOCTYPE html> 
    <head>
        <title>on</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            ul{
                overflow:hidden;
            }
            ul li{
                float:left;
                margin-left:10px;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>item1</li>
        </ul>
        <script src="jquery-1.12.0.js"></script>
        <script>
            /*傳入兩個參數name、age*/
            function doSomething(event,name,age){
                console.log(name);
                console.log(age);
            }
            $('ul').on('click','li',doSomething);
            $('li').trigger('click','monkey',100);
        </script>
    </body>
</html>

運行代碼結果如下：

so，那怎麼辦呢？

有兩個方法，可以達到你的目的。

方法一，參數不變，trigger傳入值時，傳入一個數組，數組中的值與參數一一對應就好了。

function doSomething(event,name,age){
    console.log(name);
    console.log(age);
}
$('ul').on('click','li',doSomething);
//trigger傳入對應數組
$('li').trigger('click',['monkey',100]);

方法二，參數和trigger傳入方式皆改變。都傳入對象嘛，不就只需要一個參數了麽。

function doSomething(event,obj){
    console.log(obj.name);
    console.log(obj.age);
}
$('ul').on('click','li',doSomething);
$('li').trigger('click',{name:'monkey',age:100});
五、其他

‘hover’在jQuery1.9中被移除了(註意是’hover’，而不是.hover())，所以on方法是無法調用hover的，

如下：

那如果我想利用on方法來實現hover的‘事件代理’呢？

怎麼辦呢？‘hover’都不存在了!!!

其實它一直都不在，只是’mouseenter’和’mouseleave’的快照(shorthand)而已。

所以，我們可以利用event.type來處理。

如下：

$('ul').on('mouseenter mouseleave','li',function(event){
    if( event.type == 'mouseenter' ){
        //相應處理    
    }
    else if(event.type == 'mouseleave'){
        //相應處理    
    }
});

另外，當我利用on為同一個事件，綁定了多個執行方法時，它會依次執行，如下：

<!DOCTYPE html> 
    <head>
        <title>on</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style>
            ul{
                overflow:hidden;
            }
            ul li{
                float:left;
                margin-left:10px;
                list-style-type:none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>item1</li>
        </ul>
        <script src="jquery-1.12.0.js"></script>
        <script>
            $('li').on('click',function(){
                console.log('1');
            });
            $('li').on('click',function(event){
                console.log('2');
            });
            $('li').on('click',function(){
                console.log('3');
            });
        </script>
    </body>
</html>

運行後的結果：

倘若，我只想執行1、2，但是不想執行第三個click，輸出‘3’呢？

我們可以利用event.stopImmediatePropagation()

作用：阻止剩餘的事件處理函數的執行，並阻止當前事件冒泡。

$('li').on('click',function(){
    console.log('1');
});
$('li').on('click',function(event){
    console.log('2');
    event.stopImmediatePropagation();
});
$('li').on('click',function(){
    console.log('3');
});

在上面大家也看見了，用on為同一個元素添加同一個事件時，事件是不會被覆蓋掉的，所以，為了避免代碼干擾，我們可以這樣綁定事件：

$('li').off('click').on('click',doSomething);

我們利用.off()還可以取消掉指定函數名的事件哦，而不是同一事件一切清空，前提是我們使用的是函數名。

如下：

像上面那樣，我們就可以清除方法名為one的click事件。

由於$(obj).click(dosomething)是$(obj).on(‘click’,dosomething)的快照(shorthand)，所以.()off同樣適用於它.click()。

好了，時間也不早了。晚安，everyone~

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 5個最好用AngularJS構建應用程式框架
    如果你打算建立自己的Web應用與AngularJS，那麼現在是時候開始了。如果這個想法嚇到你了，刪除所有的恐慌，從你的頭腦中有一些框架，AngularJS提供方便的支持。有一些預先的框架，使用框架可以如果你想建立一個Web應用程式的快速跑的是完美的你安裝的網路組件。這裡是一個名單，五個這樣的框架，可 ...
  • 關於浮動的知識總結
    關於浮動，最主要的就是解決浮動在IE6、7下要做的相容問題。例如：雙邊距bug，圖片下的空隙問題等等。後面要和定位帶來的相容問題一起總結一下好了~~~ 塊的特征 1、預設獨占一行 2、沒有寬度時，預設撐滿一排（即父元素有多寬它就是多寬） 3、支持所有css命令 行內元素的特征 1、同排可以繼續跟同類 ...
  • h5嵌入視頻遇到的bug及總結
    最近做的一個h5活動因為嵌入視頻而發現了好多以前從未發現的問題，在測試的時候不同系統不同版本不同環境等多多少少都出現了些問題，搞得我也是焦頭爛額的，不過好在最終問題都解決了，自己也學到了好多東西，為了方便以後用到參考，所以就記下來咯。現在有一個感悟就是當問題來臨的時候不要覺得沮喪不要抱怨而要積極面對 ...
  • jquery 中多條件選擇器,相對選擇器,層次選擇器的區別
    一、Jquery常用的過濾選擇器如下所示： 1、:first，選取第一個元素，比如$("div:first")選取第一個div元素 2、:last，選取最後一個元素，比如$("div:last")選取最後一個div元素 3、:not(選擇器)，選取不滿足“選擇器”條件的元素,比如$("div:not ...
  • 一些常用的表單驗證的代碼
    一些常用的表單驗證的代碼 註冊驗證： <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //驗證表單 function vailForm(){ var form = ...
  • CSS3常用功能的寫法
    隨著瀏覽器的升級，CSS3已經可以投入實際應用了。 <!-- /div --><!-- div id="more" class="asset-more" --> 但是，不同的瀏覽器有不同的CSS3實現，相容性是一個大問題。上周的YDN介紹了CSS3 Please網站，該網站總結了一些常用功能的寫法。 ...
  • JavaScript的寫類方式（6）
    時間到了2015年6月18日，ES6正式發佈了，到了ES6，前面的各種模擬類寫法都可以丟掉了，它帶來了關鍵字 class，extends，super。 ES6的寫類方式 以上定義了一個類，constructor 是構造器，這點和 Java 不同，Java的構造器名和類名相同。 和 Java 多象啊， ...
  • CSS之Position詳解
    大家可以通過谷歌瀏覽器以網易網站做為範例,通過網站頂部的導航菜單欄來查看relative和aboulute的區別 CSS的很多其他屬性大多容易理解，比如字體，文本，背景等。有些CSS書籍也會對 這些簡單的屬性進行大張旗鼓的介紹，而偏偏忽略了對一些難纏的屬性講解，有避重就輕的嫌疑。CSS中主要難以理解 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類