帶你深入了解JQuery中Bind()函數
這篇文章主要介紹了JQuery中Bind()事件用法,實例分析了Bind()事件的功能、特點與綁定事件時的使用技巧,需要的朋友可以參考下
本文實例分析了JQuery中Bind()事件用法。分享給大家供大家參考。具體分析如下：
我們先看一下它的定義：
.bind( eventType [, eventData], handler(eventObject))
.Bind()方法的主要功能是在向它綁定的對象上面提供一些事件方法的行為。期中它的三個參數的意義分別如下：
eventType是一個字串類型的事件類型，就是你所需要綁定的事件。這類類型可以包括如下：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, , keyup, error 。這裡要注意的是，這裡用的都是javascript裡面的事件方法，而不是JQuery裡面的，JQuery裡面的事件方法都在JavaScript 前面多了一個“on”，例如onclick,onblur 等等。
eventData參數是一個可選參數，不過它在平常用的比較少。如果提供了這個參數，那麼我們就能把一些附加資訊傳遞給事件處理函數了。這個參數有個很好的用處，就是處理閉包帶來的問題。待會在舉實例給大家。
Handler是用來綁定的處理數，其實也也就是回呼函數，處理完資料之後對應的方法。
1.第一個簡單的bind ()事件---Hello Word
<input id="BtnFirst"type="button"value="Click Me"/>
<script>
$(function () {
$("#BtnFirst").bind("click",function(){
alert("Hello World");
});
})
</script>開啟頁面之後，點選按鈕“Click Me”，就會彈出”Hello World”。這算是我們最簡單的綁定事件吧。很簡單吧。
2.綁定多個事件
我們可以透過bind()來綁定多個事件（其實，這也就是JQuery以及Linq中非常有名的鍊式程式設計）。實現的主要功能就是當我們點擊的時候，彈出“Hello World”，當離開button的時候，顯示出一個p。
<p>
<input id="BtnFirst"type="button"value="Click Me"/></p>
<p id="Testp"style=" width:200px; height:200px; display:none; ">
</p>
<script>
$(function () {
$("#BtnFirst").bind("click", function () {
alert("Hello World");
}).bind("mouseout", function () {
$("#Testp").show("slow");
});
})
</script>這段程式碼頁很容易理解，就是當button被點擊的時候，彈出一個"Hello World"，在離開的時候，在把p給顯示出來。 JQuery裡的動畫，均可以用“slow”、“fast”和“normal”，當然你也可以設定相關的毫秒數。
3.bind()事件的物件
Handler這個回呼函數可以接受一個參數，當這個函數被呼叫時，一個JavaScript事件物件會作為一個參數傳進來。
給一個JQuery官網上面的例子：
<style>
p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
p.over {background:#ccc;}
span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});
</script>這裡的主要功能是為了實現當使用者點擊p這個物件的時候，把目前相對於頁面的座標顯示在span標籤裡面，這裡就用到了event這個事件。把參數傳進去。
4.unbind()事件
unbind([type],[data]，Handler) 是bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。如果沒有參數，則刪除所有綁定的事件。你可以將你用bind()註冊的自訂事件取消綁定 定。如果提供了事件類型作為參數，則只刪除該類型的綁定事件。如果把在綁定時傳遞的處理函數當作第二個參數，則只有這個特定的事件處理函數會被刪除。
<body onclick="MyBodyClick()">
<p onclick="MyClickOut()">
<p onclick="MyClickInner()">
<span id="MySpan">I love JQuery!! </span>
</p>
</p>
<span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
alert("outer p");
}
function MyClickInner() {
alert("Inner p");
}
function MyBodyClick() {
alert("Body Click");
}
var foo = function () {
alert("I'm span.");
}
$(function () {
$("#MySpan").bind("click", foo);
})
$(function () {
$("#LooseFocus").unbind("click", foo);
})
</script>上面的程式碼也很好理解，就是當使用者的滑鼠在span上面停留的時候，然後把span的click事件給取消掉。所以，最後它只會跳出body裡面的alert。
最後，簡單的了解one()事件的使用，其實one和bind是一樣，都是為了綁定事件而產生的。 One與bind基本上差不多，不同的在呼叫 jQuery.event.add時，把註冊的事件處理的函式做了一個小小的調整。 One呼叫了jQuery.event.proxy進行了代理傳入的事 件處理函式。當事件觸發呼叫這個代理的函數時，先把事件從cache中刪除，再執行註冊的事件函數。這裡就是閉包的應用，透過閉包得到fn註冊的事件函數 的引用。
使用規則：
one(type,[data],fn)
為每個符合元素的特定事件（像click）綁定一個一次性的事件處理函數。 在每個物件上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同。這個事件處理函數會接收到一個事件對象，可以透過它來阻止（瀏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函數必須回傳false。
貼一下，bind和one的各自程式碼的實作,看官可以稍微的做一個比較：
Bind()程式碼的實作：
bind : function(type, data, fn) {
return type == "unload" ? this.one(type,data,fn) : this.each(function(){
//fn || data, fn && data实现了data参数可有可无
jQuery.event.add(this, type, fn || data, fn && data);
});
}One()程式碼的實作：
one : function(type, data, fn) {
var one = jQuery.event.proxy(fn || data, function(event) {
jQuery(this).unbind(event, one);
return (fn || data).apply(this, arguments);
//this->当前的元素
});
return this.each(function() {
jQuery.event.add(this, type, one, fn && data);
});
}5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件 有可能会触发外面的事件，所以给大伙一个借鉴吧。
这里可以参考一下javascript事件冒泡的文章：《JavaScript 事件冒泡简介及应用》。
简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。
则 冒泡实例代码：
<body onclick="MyBodyClick()">
<p onclick="MyClickOut()">
<p onclick="MyClickInner()">
<span id="MySpan">
I love JQuery!!
</span>
</p>
</p>
</body>
<script type="text/javascript">
function MyClickOut() {
alert("outer p");
}
function MyClickInner() {
alert("Inner p");
}
function MyBodyClick() {
alert("Body Click");
}
$(function () {
$("#MySpan").bind("click", function (event) {
alert("I'm span");
event.stopPropagation();
});
</script>以上是帶你深入了解JQuery中Bind()函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
MySQL ISNULL 函數詳解及用法介紹
Mar 01, 2024 pm 05:24 PM
MySQL中的ISNULL()函數是用來判斷指定表達式或列是否為NULL的函數。它傳回一個布林值，如果表達式為NULL則回傳1，否則回傳0。 ISNULL()函數可以在SELECT語句中使用，也可以在WHERE子句中進行條件判斷。 1.ISNULL()函數的基本語法：ISNULL(expression)其中，expression是要判斷是否為NULL的表達式或
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
織夢CMS二級目錄打不開的原因分析
Mar 13, 2024 pm 06:24 PM
標題：解析織夢CMS二級目錄打不開的原因及解決方案織夢CMS（DedeCMS）是一款功能強大的開源內容管理系統，被廣泛應用於各類網站建設中。然而，有時在搭建網站過程中可能會遇到二級目錄無法開啟的情況，這給網站的正常運作帶來了困擾。在本文中，我們將分析二級目錄打不開的可能原因，並提供具體的程式碼範例來解決這個問題。一、可能的原因分析：偽靜態規則配置問題：在使用
分析騰訊主要的程式語言是否為Go
Mar 27, 2024 pm 04:21 PM
標題：騰訊主要的程式語言是否為Go:一項深入分析騰訊作為中國領先的科技公司，在程式語言的選擇上一直備受關注。近年來，有人認為騰訊主要採用Go作為主要的程式語言。本文將對騰訊主要的程式語言是否為Go進行深入分析，並給出具體的程式碼範例來支持這一觀點。一、Go語言在騰訊的應用Go是一種由Google開發的開源程式語言，它的高效性、並發性和簡潔性受到眾多開發者的喜
如何判斷jQuery元素是否具有特定屬性？
Feb 29, 2024 am 09:03 AM
如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬
使用jQuery為表格新增一行的方法介紹
Feb 29, 2024 am 08:12 AM
jQuery是一個受歡迎的JavaScript函式庫，廣泛用於網頁開發。在網頁開發過程中，經常需要透過JavaScript動態地在表格中新增一行。本文將介紹如何使用jQuery為表格新增一行，並提供具體的程式碼範例。首先，我們需要在HTML頁面中引入jQuery函式庫。可以透過以下程式碼在標籤中引入jQuery庫：
如何使用 PHP 建立基於事件的應用程式
May 04, 2024 pm 02:24 PM
在PHP中建構基於事件的應用程式的方法包括：使用EventSourceAPI建立事件來源，並在客戶端使用EventSource物件監聽事件。使用伺服器傳送的事件(SSE)傳送事件，並在客戶端使用XMLHttpRequest物件監聽事件。一個實用的例子是在電子商務網站中使用EventSource即時更新庫存計數，在伺服器端透過隨機更改庫存並發送更新來實現，客戶端則透過EventSource監聽庫存更新並即時顯示。
