資訊專欄INFORMATION COLUMN
摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點(diǎn)擊事件被的事件覆蓋。分析不同的綁定方式執(zhí)行順序?qū)傩栽厥录录Ｔ亟壎ㄊ录h除按鈕。屬性綁定事件動(dòng)態(tài)綁定事件方法的方法的屬性綁定。
一、動(dòng)態(tài)監(jiān)聽加載對象
當(dāng)使用js或jQuery動(dòng)態(tài)創(chuàng)建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監(jiān)聽事件時(shí)，事件并不會(huì)觸發(fā)，因?yàn)閭鹘y(tǒng)的$(".selector").click()只能監(jiān)聽html初始的對象，對于動(dòng)態(tài)加載的操作，需要在加載后給他的操作行為綁定方法。
??所以，我們可以使用jQuery的on()事件來獲取未加載頁面的內(nèi)容，并為它添加一個(gè)或多個(gè)事件處理程序。
二、jQuery.on()用法 1、定義和用法（1）on() 方法在被選元素及子元素上添加一個(gè)或多個(gè)事件處理程序。
（2）自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 代碼庫。
（3）注意：使用 on() 方法添加的事件處理程序適用于當(dāng)前及未來的元素（比如由腳本創(chuàng)建的新元素）。
（4）提示：如需移除事件處理程序，請使用 off() 方法。
（5）提示：如需添加只運(yùn)行一次的事件然后移除，請使用 one() 方法。
2、語法$(selector).on(event,childSelector,data,function)
三、事件綁定方式執(zhí)行順序：html屬性 > dom元素（onclick方法）先看例子1
點(diǎn)擊這個(gè)段落。
輸出結(jié)果：
7、段落被點(diǎn)擊了。
說明：4和6綁定的點(diǎn)擊事件被7的事件覆蓋。
分析：
（1）不同綁定事件方式的執(zhí)行順序：html屬性 > dom元素屬性
（2）同一種綁定事件方式順序：寫在前面 > 寫在后面
說明：實(shí)際項(xiàng)目中，jq和原生js不要混著用。
四、事件綁定方式執(zhí)行順序：html屬性 > dom元素（onclick方法） > DOM level 2 事件我們看個(gè)栗子
點(diǎn)擊這個(gè)段落。
輸出結(jié)果：
7、段落被點(diǎn)擊了。 1、段落被點(diǎn)擊了。 2、段落被點(diǎn)擊了。 3、段落被點(diǎn)擊了。 5、段落被點(diǎn)擊了。 8、段落被點(diǎn)擊了。 9、段落被點(diǎn)擊了。
說明：通過addEventListener方式綁定事件（jq的on方法，js的click方法）是可以綁定多個(gè)事件。
分析：
（1）不同的綁定方式執(zhí)行順序：html屬性 > dom元素（DOM level 0 事件） > DOM level 2 事件。
（2）DOM level 2 事件中：誰先綁定誰先執(zhí)行。
（3）jq的on，js的click，addEventListener，可以綁定多個(gè)事件。
說明：實(shí)際項(xiàng)目中，jq和原生js不要混著用。
五、動(dòng)態(tài)綁定：jq的on方法+html的屬性onclick方法實(shí)用jq或者原生js創(chuàng)建元素（比如：append，appendChild，insertBefoe等），實(shí)用on(event, fun)或者addEventListener等傳統(tǒng)的監(jiān)聽事件，事件不會(huì)觸發(fā)。原因：不能這些方法只能監(jiān)聽到html初始化的對象，后續(xù)動(dòng)態(tài)添加的方法需要尋找其他綁定方法。jq的on()方法+html的屬性onclick方法。
我們發(fā)現(xiàn)，點(diǎn)擊刪除的時(shí)候，輸出
5、刪除按鈕。
4、刪除按鈕。
說明：
1、執(zhí)行順序：html的屬性綁定比jq的on方法快。（html屬性綁定>DOM level 2 事件）
2、動(dòng)態(tài)綁定事件方法：（1）jq的on方法；（2）html的屬性綁定。
說明：實(shí)際項(xiàng)目中，jq和原生js不要混著用。
六、總結(jié)上面例子的jq是1.10的版本。
1、事件的綁定方法：（1）html屬性綁定（比如：onclick），（2）dom元素屬性（比如onclick），也叫DOM level 0 事件，（3）原生的addEventListener和jq的on和jq的click（DOM level 2 事件）。
2、綁定方法的執(zhí)行順序：html屬性 > dom元素屬性 > DOM level 2 事件
3、同一種綁定事件方式順序：寫在前面 > 寫在后面。
4、html屬性和dom元素屬性綁定方法最終只有最后一個(gè)事件會(huì)執(zhí)行。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105999.html
摘要：獲取元素距離的位置返回值為對象獲取相對于其最近的有定位的父元素的位置。不僅提供了更加優(yōu)雅的事件處理語法，而且極大的增強(qiáng)了事件的處理能力。注冊簡單事件表示給綁定事件，并且由自己觸發(fā)，不支持動(dòng)態(tài)綁定。 jQuery特殊屬性操作 val方法 val方法用于設(shè)置和獲取表單元素的值，例如input、textarea的值 //設(shè)置值 $(#name).val(張三); //獲取值 $(#name)...
摘要：希望在做所有事情之前，操作文檔。不受層級限制子選擇器在給定的父元素下匹配所有子元素。相鄰選擇器匹配所有緊接在元素后的元素。判斷當(dāng)前對象中的某個(gè)元素是否包含指定類名，包含返回，不包含返回下標(biāo)過濾器精確選出指定下標(biāo)元素獲取第個(gè)元素。 原文鏈接 http://blog.poetries.top/2016... 首先，來了解一下jQuery學(xué)習(xí)的整體思路 showImg(https://seg...
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽用戶單擊操作，另一個(gè)方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要：目錄第章事件介紹第章鼠標(biāo)事件第章表單事件第章鍵盤事件第章事件的綁定和解綁第章事件對象的使用第章自定義事件與事件用交互操作中，最簡單直接就是點(diǎn)擊操作。提供了兩個(gè)方法一個(gè)是方法用于監(jiān)聽用戶單擊操作，另一個(gè)方法是方法用于監(jiān)聽用戶雙擊操作。 目錄 第1章 事件介紹 第2章 鼠標(biāo)事件 第3章 表單事件 第4章 鍵盤事件 第5章 事件的綁定和解綁 第6章 事件對象的使用 第7章 自定義事件 cli...
摘要：可以傳遞三個(gè)參數(shù)表示一個(gè)或多個(gè)事件類型，比如。表示綁定到指定元素的處理函數(shù)。我們稱它為簡寫事件。必須在中，并且使用作為事件觸發(fā)元素，不然無效。和表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。按下返回按下返回和分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。 轉(zhuǎn)自個(gè)人博客 在JavaScript 有一個(gè)非常重要的功能，就是事件驅(qū)動(dòng)。如果你的網(wǎng)頁需要與用戶進(jìn)行交互的話，就不可能不用到事件。它在頁面完全加...
閱讀 1258·2021-11-19 09:40
閱讀 3117·2021-11-02 14:47
閱讀 3050·2021-10-11 10:58
閱讀 3216·2019-08-30 15:54
閱讀 2666·2019-08-30 12:50
閱讀 1721·2019-08-29 16:54
閱讀 462·2019-08-29 15:38
閱讀 1237·2019-08-29 15:19
