JQuery 的Bind事件

時間 2019-11-11

標籤 jquery bind 事件欄目 JQuery 简体版

原文原文鏈接

隨着如今JQuery這個javascript的愈來愈強大，在咱們日常的前端UI開發，若是不使用JQuery，說明你已經很out了。今天咱們來學習一下 JQuery的bind事件。雖然，這個話題被不少寫了不少，但我仍是想本身在這裏班門弄斧一下，但願各位看官不要噴。若是有什麼意見，能夠直接進行交流，共同進步。 javascript

JQuery 官網的Bind事件的API吧：地址鏈接。若是各位有興趣看洋文的，但是去看看。 html

剛開始咱們先看一下它的定義：前端

.bind( eventType [, eventData], handler(eventObject)) java

.Bind()方法的主要功能是在向它綁定的對象上面提供一些事件方法的行爲。期中它的三個參數的意義分別以下： node

eventType是一個字符串類型的事件類型，就是你所須要綁定的事件。這類類型能夠包括以下：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。這裏須要注意的是，這裏用的都是javascript裏面的事件方法，而不是JQuery裏面的，JQuery裏面的事件方法均在JavaScript前面多了一個「on」，好比onclick,onblur 等等。 jquery

eventData參數是一個可選參數，不過它在平時用的比較少。若是提供了這個參數，那麼咱們就能把一些附加信息傳遞給事件處理函數了。這個參數有個很好的用處，就是處理閉包帶來的問題。待會在給你們舉實例。編程

Handler是用來綁定的處理函數，其實也也就是回調函數，處理完數據以後相應的方法。 api

圖一： jquery裏的bind參數提示瀏覽器

1.第一個簡單的bind ()事件---Hello Word 閉包

Html Code：

1 <input id="BtnFirst"type="button"value="Click Me"/>

JavaScript Code：

1 $(function () {
2             $("#BtnFirst").bind("click", function () {
3                 alert("Hello World");
4             });
5  })

打開頁面以後，點擊按鈕「Click Me」，就會彈出」Hello World」。這算是咱們最簡單的綁定事件吧。很簡單吧。

2.綁定多個事件

咱們能夠經過bind()來綁定多個事件（其實，這也就是JQuery以及Linq中很是有名的鏈式編程）。實現的主要功能就是當咱們點擊的時候，彈出「Hello World」，當離開button的時候，顯示出一個div。

Html Code：

1 <div>
2    <input id="BtnFirst"type="button"value="Click Me"/></div>
3    <div id="TestDiv"style=" width:200px; height:200px; display:none; background-color:Red;">
4 </div>

JavaScript Code：

1 $(function () {
2             $("#BtnFirst").bind("click", function () {
3                 alert("Hello World");
4             }).bind("mouseout", function () {
5                 $("#TestDiv").show("slow");
6             });
7  })

這段代碼頁很容易理解，就是當button被點擊的時候，彈出一個"Hello World"，在離開的時候，在把div給顯示出來。JQuery裏的動畫，都可以用「slow」、「fast」和「normal」，固然你還能夠設置相關的毫秒數。

3.bind()事件的對象

Handler這個回調函數能夠接受一個參數，當這個函數被調用時，一個JavaScript事件對象會做爲一個參數傳進來。

這個事件對象一般是沒有必要且能夠省略的參數，由於當這個事件處理函數綁定的時候就可以明確知道他在觸發的時候應該作些什麼，一般就已經能夠得到充分的信息了。然而在有些時候，在事件初始化的時候須要獲取更多關於用戶環境的信息。

給一個JQuery官網上面的例子：

Css Code：

1 <style> 2 p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
4 p.over {background:#ccc;}
5 span {color:red;}
6 </style>

Html Code：

1 <p>Click or double click here.</p>
2 <span></span>

JavaScript Code：

1 <script>
2 $("p").bind("click", function(event){
3 var str = "( " + event.pageX + ", " + event.pageY + " )";
4 $("span").text("Click happened! " + str);
5 });
6 $("p").bind("dblclick", function(){
7 $("span").text("Double-click happened in " + this.nodeName);
8 });
9 $("p").bind("mouseenter mouseleave", function(event){
10 $(this).toggleClass("over");
11 });
12 
13 </script>

這裏的主要功能是爲了實現當用戶點擊p這個對象的時候，把當前相對於頁面的座標顯示在span標籤裏面，這裏就用到了event這個事件。把參數傳進去。
4.unbind()事件

unbind([type],[data]，Handler) 是 bind()的反向操做，從每個匹配的元素中刪除綁定的事件。若是沒有參數，則刪除全部綁定的事件。你能夠將你用bind()註冊的自定義事件取消綁定。若是提供了事件類型做爲參數，則只刪除該類型的綁定事件。若是把在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的事件處理函數會被刪除。

Html Code：

1 <body onclick="MyBodyClick()">
2     <div onclick="MyClickOut()">
3         <div onclick="MyClickInner()">
4             <span id="MySpan">I love JQuery!! </span>
5         </div>
6     </div>
7     <span id="LooseFocus">失去焦點</span>
8 </body>

JavaScript Code：

1  function MyClickOut() {
2             alert("outer Div");
3         }
4         function MyClickInner() {
5             alert("Inner Div");
6         }
7         function MyBodyClick() {
8             alert("Body Click");
9         }
10         var foo = function () {
11             alert("I'm span.");
12         }
13         $(function () {
14             $("#MySpan").bind("click", foo);
15         })       
16         $(function () {
17             $("#LooseFocus").unbind("click", foo);
18         })

上面的代碼也很好理解，就是當用戶的鼠標在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()代碼的實現：

1 bind : function(type, data, fn) { 
2 return type == "unload" ? this.one(type, data, fn) : this 
3 .each(function() {//fn || data, fn && data實現了data參數無關緊要 
4 jQuery.event.add(this, type, fn || data, fn && data); 
5 }); },

One() 代碼的實現：

1 one : function(type, data, fn) { 
2 var one = jQuery.event.proxy(fn || data, function(event) { 
3 jQuery(this).unbind(event, one); 
4 return (fn || data).apply(this, arguments);/this->當前的元素 
5 }); 
6 return this.each(function() { 
7 jQuery.event.add(this, type, one, fn && data); 
8 }); 
9 },

5.最後呢，其實想在貼一個冒泡事件，由於在處理綁定事件的時候，若是調用內部的事件有可能會觸發外面的事件，因此給大夥一個借鑑吧。

javascript事件冒泡的文章：http://www.2cto.com/kf/201111/110252.html

簡單的說，何爲冒泡事件？其實，簡單的理解是，也能夠說是事件傳播，它會從內部的控件廣播到父類的元素，而後接着一直往上到祖先級別的元素。

則冒泡實例代碼：

Html Code：

1 <body onclick="MyBodyClick()">
2 <div onclick="MyClickOut()">
3         <div onclick="MyClickInner()">
4             <span id="MySpan">
5                 I love JQuery!!
6             </span>
7        </div>
8 </div>
9 </div>
10 </body>

JavaScript Code：

1 <script type="text/javascript">
2         function MyClickOut() {
3             alert("outer Div");
4         }
5         function MyClickInner() {
6             alert("Inner Div");
7         }
8        function MyBodyClick() {
9             alert("Body Click");
10         }
11 
12         $(function () {
13             $("#MySpan").bind("click", function (event) {
14                 alert("I'm span");
15                 event.stopPropagation();
16             });
17         </script>

因此，當你點擊最裏面的span的時候，外面的div依次的觸發知道body裏。我粗劣的畫了一個圖，以下：

完畢，由於這篇博客寫了整理了好幾天，雖然有些地方很easy，不過若是很差，請你們斧正。就當作一個筆記吧。

編碼常識：

if(0){alert(0)} 始終是假
if(1){alert(1)}

始終是真