jQuery的事件綁定和解除

時間 2019-11-17

原文原文鏈接

　　1 . 綁定事件

語法 : html

bind(type,data,fn)

描述 : 爲每個匹配的特定元素(像 click)綁定一個事件處理器函數.jquery

type(String) : 事件類型ide

data(Object) : (可選)做爲 event.data 屬性值傳遞給事件對象的額外數據對象/函數

fn(Function) : 綁定到每一個匹配元素的事件上面的處理函數.this

示例 : spa

當每一個p標籤被點擊的時候,彈出器文本code

$("p").bind("click",function(){
  alert($(this).text() );  
})

在事件處理前傳遞一些附加的數據.orm

function handler(event) {
//event.data 能夠獲取 bind()方法的第二個參數的數據
   alert(event.data.foo) ;
}
$("p").bind("click", {foo: "bar"}, handler)

經過返回false來取消默認的行爲並阻止事件的起泡.htm

$("form").bind("submit", finction() {return false; })

經過使用 preventDefault( ) 方法值取消默認的行爲.對象

$("form").bind("submit", function(event){
   event.preventDefault();
});

　　2 . 解除事件

語法 :

unbind(type,fn);

解釋 :

　　bind() 的反向操做,從每個匹配元素中刪除綁定的事件.

　　若是沒有參數,則刪除綁定的事件.

　　若是把綁定時傳遞的處理函數做爲第二個參數,則只有這個特定的事件處理函數被刪除.

　　type(String) : (可選),事件類型.

　　fn(Function) :(可選),要從每一個匹配元素的事件中反綁定的事件處理函數.

　　示例 :

把全部段落的全部事件取消綁定

$("p").unbind()

將段落中的 click 事件取消綁定

$("p").unbind("click")

刪除特定函數的綁定,將函數做爲第二個參數傳入.

var foo = function () {
    // 綁定事件 和 解除事件的事件處理函數
};

$("p").bind("click mouseenter", foo);  // 給p段落綁定 click.mouseenter事件

$("p").unbind("click", foo); 只解除了p段落標籤的 click 事件

　　3 . 自定義事件

語法 :

trigger(type,data);

　　解釋 : 在每個匹配的元素上觸發某類事件,它觸發的是由 bind() 註冊的自定義事件.

　　type(String) : 要觸發的事件類型.

　　data(Array) : (可選)傳遞給事件處理函數的附加參數.

　　示例 :

給一個按鈕添加自定義事件

$("button").bind('myClick',function(ev,a,b)) {
   // 給按鈕 button 添加自定義事件 myClick 事件
}

而後經過 trigger() 觸發自定義事件

$('button').trigger('myClick',[1,2])

　　4 . 一次性事件

語法 :

one(type,data,fn)

解釋 : 爲每個匹配元素的特定事件(好比 click ) 綁定一個一次性的事件處理函數,在每一個對象上,這個事件處理函數只會被執行一次,其餘規則與 bind() 函數相同.

type(String) : 事件類型

data(Object) : (可選) 做爲event.data屬性值傳遞給事件對象的額外數據對象.

fn(Function) : 綁定到每一個匹配元素的事件上面的處理函數.

示例 :

當全部段落被第一個點擊的時候,顯示所其文本.

$("p").one("click", function() {
     // 只有第一次點擊的時候纔會觸發,再次點擊不會觸發了.
   alert($(this).text() );
});

　　5 . 單雙擊事件

在點擊按鈕的時候,會出現雙擊的時候會有2次單擊事件的發生.

好比 :

解決 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button>按鈕</button>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            // var time = null;
            //
            // $('div').click(function () {
            //     // 取消上次延時未執行的方法
            //     clearTimeout(time);
            //     //執行延時
            //     time = setTimeout(function(){
            //         //do function在此處寫單擊事件要執行的代碼
            //     },300);
            // });
            //
            // $('div').dblclick(functin ({
            //     // 取消上次延時未執行的方法
            //     clearTimeout(time);
            //     //雙擊事件的執行代碼
            // });



            // 單雙擊 的時間 間隔 是300ms
            // 若是解決 單雙擊衝突  


            // 先作兩次單擊 一次雙擊   中間間隔 小於300ms
            // 定義 timer是null,
            var timer = null;
            $('button').click(function(event) {
                // console.log(timer);
                //清楚定時器,用定時器的時候要先清除定時器.當咱們雙擊的時候,在點擊第一下的時候,時間沒到300ms,
                // 因此不會走 timer = setTimeout(function() 函數.第二下點擊的時候清除的是第一下點擊的定時器,因此第二次
                // 沒有到300ms.因此顯示雙擊,在雙擊的時候清除第二次點擊的定時器.
                clearTimeout(timer);
                // 定時器  300ms 一次性定時器
                timer = setTimeout(function(){
                    console.log('單機了');
                }, 300);

            });

            $('button').dblclick(function(event) {
                // console.log(timer);
                clearTimeout(timer);
                console.log('雙機了');
            });
        })
    </script>
</body>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。