【JavaScript系列】動態綁定事件方法：(1)jquery的on方法；(2)html元素綁定

young.li 發布于2019-08-26 10:20 / 3379人閱讀

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執行順序屬性元素事件事件。元素綁定事件刪除按鈕。屬性綁定事件動態綁定事件方法的方法的屬性綁定。

一、動態監聽加載對象

當使用js或jQuery動態創建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監聽事件時，事件并不會觸發，因為傳統的$(".selector").click()只能監聽html初始的對象，對于動態加載的操作，需要在加載后給他的操作行為綁定方法。

??所以，我們可以使用jQuery的on()事件來獲取未加載頁面的內容，并為它添加一個或多個事件處理程序。

二、jQuery.on()用法 1、定義和用法

（1）on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

（2）自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。

（3）注意：使用 on() 方法添加的事件處理程序適用于當前及未來的元素（比如由腳本創建的新元素）。

（4）提示：如需移除事件處理程序，請使用 off() 方法。

（5）提示：如需添加只運行一次的事件然后移除，請使用 one() 方法。

2、語法

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

三、事件綁定方式執行順序：html屬性 > dom元素（onclick方法）

先看例子1

點擊這個段落。

輸出結果：

7、段落被點擊了。

說明：4和6綁定的點擊事件被7的事件覆蓋。

分析：

（1）不同綁定事件方式的執行順序：html屬性 > dom元素屬性

（2）同一種綁定事件方式順序：寫在前面 > 寫在后面

說明：實際項目中，jq和原生js不要混著用。

四、事件綁定方式執行順序：html屬性 > dom元素（onclick方法） > DOM level 2 事件

我們看個栗子

點擊這個段落。

輸出結果：

7、段落被點擊了。
1、段落被點擊了。
2、段落被點擊了。
3、段落被點擊了。
5、段落被點擊了。
8、段落被點擊了。
9、段落被點擊了。

說明：通過addEventListener方式綁定事件（jq的on方法，js的click方法）是可以綁定多個事件。

分析：

（1）不同的綁定方式執行順序：html屬性 > dom元素（DOM level 0 事件） > DOM level 2 事件。

（2）DOM level 2 事件中：誰先綁定誰先執行。

（3）jq的on，js的click，addEventListener，可以綁定多個事件。

說明：實際項目中，jq和原生js不要混著用。

五、動態綁定：jq的on方法+html的屬性onclick方法

實用jq或者原生js創建元素（比如：append，appendChild，insertBefoe等），實用on(event, fun)或者addEventListener等傳統的監聽事件，事件不會觸發。原因：不能這些方法只能監聽到html初始化的對象，后續動態添加的方法需要尋找其他綁定方法。jq的on()方法+html的屬性onclick方法。

我們發現，點擊刪除的時候，輸出

5、刪除按鈕。
4、刪除按鈕。
說明：

1、執行順序：html的屬性綁定比jq的on方法快。（html屬性綁定>DOM level 2 事件）

2、動態綁定事件方法：（1）jq的on方法；（2）html的屬性綁定。

說明：實際項目中，jq和原生js不要混著用。

六、總結

上面例子的jq是1.10的版本。

1、事件的綁定方法：（1）html屬性綁定（比如：onclick），（2）dom元素屬性（比如onclick），也叫DOM level 0 事件，（3）原生的addEventListener和jq的on和jq的click（DOM level 2 事件）。

2、綁定方法的執行順序：html屬性 > dom元素屬性 > DOM level 2 事件

3、同一種綁定事件方式順序：寫在前面 > 寫在后面。

4、html屬性和dom元素屬性綁定方法最終只有最后一個事件會執行。

GPU云服務器云服務器 jquery綁定事件on jquery_on()方法 jquery預綁定事件 jquery綁定hover事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105999.html

前端基礎入門六(JQuery進階)

摘要：獲取元素距離的位置返回值為對象獲取相對于其最近的有定位的父元素的位置。不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。注冊簡單事件表示給綁定事件，并且由自己觸發，不支持動態綁定。 jQuery特殊屬性操作 val方法 val方法用于設置和獲取表單元素的值，例如input、textarea的值 //設置值 $(#name).val(張三); //獲取值 $(#name)...

fnngj 2019-08-23 14:53 評論0 收藏0
jQuery筆記總結篇

摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當前對象中的某個元素是否包含指定類名，包含返回，不包含返回下標過濾器精確選出指定下標元素獲取第個元素。原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學習的整體思路 showImg(https://seg...

NoraXie 2019-08-22 10:39 評論0 收藏0
JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

yy13818512006 2019-08-02 15:55 評論0 收藏0
JQuery基礎修煉-事件篇

摘要：目錄第章事件介紹第章鼠標事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點擊操作。提供了兩個方法一個是方法用于監聽用戶單擊操作，另一個方法是方法用于監聽用戶雙擊操作。目錄第1章事件介紹第2章鼠標事件第3章表單事件第4章鍵盤事件第5章事件的綁定和解綁第6章事件對象的使用第7章自定義事件 cli...

hikui 2019-08-19 18:25 評論0 收藏0
jQuery入門筆記之（三）事件詳解

摘要：可以傳遞三個參數表示一個或多個事件類型，比如。表示綁定到指定元素的處理函數。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發元素，不然無效。和表示鼠標移入和移出的時候觸發。按下返回按下返回和分別表示光標激活和丟失，事件觸發時機是當前元素。轉自個人博客在JavaScript 有一個非常重要的功能，就是事件驅動。如果你的網頁需要與用戶進行交互的話，就不可能不用到事件。它在頁面完全加...

GitCafe 2019-08-19 17:17 評論0 收藏0