4、jquery中的事件與應用

時間 2019-11-17

標籤 jquery 事件應用欄目 JQuery 简体版

原文原文鏈接

　　當用戶瀏覽頁面時，瀏覽器會對頁面代碼進行解釋或編譯--這個過程實質上是經過時間來驅動的，即頁面在加載時，執行一個Load事件，在這個事件中實現瀏覽器編譯頁面代碼的過程。時間不管在頁面元素自己仍是在元素與人機交互中，都佔有十分重要的地位。javascript

1.事件中的冒泡現象：html

時間在出發後分爲兩個階段，一個是捕獲（capture），另外一個則是冒泡（bubbling）；大多數瀏覽器不支持捕獲階段，jquery也不支持。所以時間出發後每每執行冒泡過程。java

冒泡jquery

<script type="text/javascript">
        $(function() {
            var intI = 0; //記錄執行次數
            $("body,div,#btnShow").click(function(event) {//點擊事件
                intI++; //次數累加
                $(".clsShow")
                .show()//顯示
                .html("您好，歡迎來到jQuery世界!")//設置內容
                .append("<div>執行次數 <b>" + intI + "</b> </div>"); //追加文本
            })
        })
    </script>

時間在執行過程當中純在冒泡現象，即雖然單機的是按鈕，但按鈕的外圍<div>元素的時間也被出發，同時<div>元素的外圍<body>元素的時間也隨之被處罰，其整個事件波及的過程就像水泡同樣向外冒，故稱之爲冒泡過程。數組

阻止冒泡的發生瀏覽器

在實際在實際的，咱們並不但願時間的冒泡現象發生，即單機按鈕就執行單一的單機時間，並不出發其餘外圍的時間。在jquery中經過stopProgragation（）方法能夠組織冒泡過程的發生。在上述代碼中加入以下代碼便可緩存

event.stopPropagation();//阻止冒泡過程

另外還能夠經過語句retrun false實現挺值時間的冒泡過程。app

2.頁面載入事件函數

ready()方法是jquery中的頁面載入時間方法，該方法相似於傳統的javascript中的onload()方法this

二者區別就是方法的執行時間的不一樣，onload()：頁面中的所有元素加載徹底才觸發，ready():加載前就觸發。

ready()的工做原理

在jquery腳本加載到頁面時，會設置一個isReady的標記，用於監聽頁面加載的進度。遇到執行ready()，經過查看isReady是否被設置，若是未被設置，那麼就說明頁面並未加載完成，在次琴光下，將未完成的部分用一個數組緩存起來，當所有家在完成後，再將未完成的部分經過緩存一一執行。

ready()方法的寫法

寫法一：

$(document).ready(function(){
      //代碼部分     
})

寫法二：

$(function(){
        //代碼部分
})

3.綁定事件

使用bind()方法綁定事件：

　　bind()方法是爲每一個選擇的元素的事件綁定處理函數，其語法格式以下：

bind(type,[data],fn)

　 type:一個或多個類型的從字符串，包括click、change、blur、focus、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleft、select、submit、keydown、keypress、keyup、error

　　data：做爲event.data屬性值傳遞給事件對象的額外數據對象

　　fn：綁定到每一個選擇元素的事件的中的處理函數。

    <script type="text/javascript">
        $(function() {
            $("#btnBind").bind("click mouseout", function() {
                $(this).attr("disabled", "disabled"); //按鈕不可用
            })
        })
    </script>

4.切換事件

有兩個方法用於事件的切換，一個是hover()，另外一個是方法toggle()。

4-1.hover()方法：

hover()方法能夠是元素在鼠標懸停與鼠標移除的事件中進行切換

下列代碼是等價的：

$(".clsTitle").hover(function() {
                   //執行代碼一
            }, function() {
                   //執行代碼二
            })

等價於

$("a").mouseenter(function(){
         //執行代碼一
})
$("a").mouseleave(function(){
         //執行代碼二
})

4-2.toggle方法：

toggle方法能夠所以調用N各函數，知道最後一個函數，而後重複對這些函數輪播調用。

toggle(fn,fn2,[fn3,fn4])

其中，參數是所以被調用的函數

5.移除事件

unbind()方法是移除元素綁定的事件，其調用的語法格式以下：

unbind([type],[fn])

其中，參數type爲移除的事件類型，fn爲須要移除的事件處理函數。若是該方法沒有參數，則移除全部綁定的事件；若是帶有參數type，移除該參數所制定的事件類型；若是帶有桉樹fn，則至移除綁定時的函數fn。

6.其餘事件

6-1.one()方法：

爲所選綁定元素綁定一個浸出法一次的處理函數，語法格式爲：

one(type,[data],fn)

6-1.trigger()方法：

　　能夠實現觸發性事件，既沒必要用戶作任何事件，自動執行該方法中的事件。示例代碼以下：

    <script type="text/javascript">
        $(function() {
            var oTxt = $("input"); //獲取文本框
            oTxt.trigger("select"); //自動選中文本框
            oTxt.bind("btn_Click", function() {//編寫文本框自定義事件
                var txt = $(this).val(); //獲取自身內容
                $("#divTip").html(txt); //顯示在頁面中
            })
            oTxt.trigger("btn_Click"); //自動觸發自定義事件
        })
    </script>