首頁 web前端 js教程 jquery中bind與on的差別是什麼

jquery中bind與on的差別是什麼

Nov 26, 2020 pm 01:46 PM
bind jquery on

jquery中bind與on的差異是:on綁定比bind綁定多了一個childSelector參數。 bind只能為符合條件的元素本身添加事件,on可以將子元素的事件委託給父元素進行處理。

jquery中bind與on的差別是什麼

環境:

本文適用於所有品牌的電腦。

(推薦教學:jquery影片教學

區別分析:

bind和on都是給元素綁定事件用的,其最大的差別就是事件冒泡。

事件冒泡也是委託事件的原型,事件委託就是子類別的事情委託給父類的去做。最直觀的差別就是on綁定比bind綁定多一個參數 'childSelector'。

語法:

$(selector).on(event,childSelector,data,function)
登入後複製

參數:

jquery中bind與on的差別是什麼

#
$(selector).bind(event,data,function,map)
登入後複製

參數:

jquery中bind與on的差別是什麼


################################################################################################################################################################### # bind只能為符合條件的元素本身添加事件,on可以將子元素的事件委託給父元素進行處理,而且可以給動態添加的元素加上綁定事件######也就是對於新添加的元素如果是on綁定,符合條件的新元素也會綁定事件,如果是bind則不影響新元素。 ######舉例:######
<ul>
    <li>第一个子元素<li/>
    <li>第二个子元素<li/>
    <li>第三个子元素<li/>
</ul>
登入後複製
###我們想為所有li新增click事件,可以用on:###
 $(&#39;ul&#39;).on(&#39;click&#39;,&#39;li&#39;, function () {   
        console.log($(this).text());
});
登入後複製
###也可以用bind:###
 $(&#39;ul li&#39;).bind(&#39;click&#39;, function () { 
        console.log($(this).text());
});
登入後複製
###區別:######第一用on綁定實際上是委託給了父級ul,也就是只給一個元素綁定了事件######第二個是用選擇器選擇了ul下的所有li元素依次綁定了事件######假如有很多很多子元素區別就很大了, bind會嚴重影響性能!######假如這時候新添一個li:## #
$(&#39;ul&#39;).append(&#39;<li>第四个子元素<li>&#39;);
登入後複製
###如果是on綁定則這個li也會有點擊事件;如果是bind則沒有。 ######相關推薦:###js教學######

以上是jquery中bind與on的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

jQuery引用方法詳解:快速上手指南 jQuery引用方法詳解:快速上手指南 Feb 27, 2024 pm 06:45 PM

jQuery引用方法詳解:快速上手指南

jQuery中如何使用PUT請求方式? jQuery中如何使用PUT請求方式? Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式?

jQuery如何移除元素的height屬性? jQuery如何移除元素的height屬性? Feb 28, 2024 am 08:39 AM

jQuery如何移除元素的height屬性?

jQuery小技巧:快速修改頁面所有a標籤的文本 jQuery小技巧:快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

jQuery小技巧:快速修改頁面所有a標籤的文本

使用jQuery修改所有a標籤的文字內容 使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

使用jQuery修改所有a標籤的文字內容

深度剖析:jQuery的優勢與劣勢 深度剖析:jQuery的優勢與劣勢 Feb 27, 2024 pm 05:18 PM

深度剖析:jQuery的優勢與劣勢

了解jQuery中eq的作用及應用場景 了解jQuery中eq的作用及應用場景 Feb 28, 2024 pm 01:15 PM

了解jQuery中eq的作用及應用場景

如何判斷jQuery元素是否具有特定屬性? 如何判斷jQuery元素是否具有特定屬性? Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性?

See all articles