jQuery基礎 —— 事件

近期在鞏固基礎知識，回頭看看js基礎，數據類型、數據類型之間的轉換、操作符等等，這個東西容易忘記，就想回頭再看看，接着着重再看下隱式轉換的問題。事件基礎在JavaScript中也學習了一部分，今天看jQuery的事件的時候也是相對比較容易接受的。方法的使用都很相似，重要的是得記住方法，以及方法裏面得參數。

來吧，看知識點。

 

事件註冊 

ele.事件 

通常我們都是使用 ele.事件() 的形式註冊事件，這樣的事件註冊方式的缺點是一個元素對象一次只能註冊一個事件，如果元素需要註冊多個事件的話就需要寫相同的代碼，這樣代碼就冗餘了。

            // 事件註冊
            // 1. ele.事件() 一次只能註冊一個事件
            $("div").click(function () {
                alert("哈哈");
            })

 

 on()事件

 on()可以註冊多個事件

一個元素如果需要同時註冊多個事件，需要使用on() 來註冊事件。on()事件有兩種方式。

第一種方式：以對象的形式傳事件

            // 方式一：ele.on({
            //     事件1：function(){},
            //     事件2：function(){}
            // })
            $("div").on({
                click: function () {
                    console.log("div被點擊了");
                },
                mouseenter: function () {
                    console.log("鼠標經過了");
                },
                mouseleave: function () {
                    console.log("鼠標離開了");
                }
            })

第二種方式：ele.on("事件1 事件2",function(){})

            // 方式二：ele.on("事件1 事件2",function(){})
            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("bgColor");
            })

  

 

on() 進行事件委託

on() 事件還可以進行事件委託，事件委託是指：把事件綁定在元素的父級上面而不是元素本身上。

ele.on("事件"[,"子選擇器"],function(){})

            // ele.on("事件"[,"子選擇器"],fn)
            // 表示 事件綁在ele身上，但是是ele的子元素觸發的
            $("ul").on("click", "li", function () {
                console.log("li被點擊了"); // click事件綁在ul身上，但是是ul中的li觸發的事件
            })

 

 

事件解綁

off() 事件解綁 on() 事件

off() 事件的形式和 on() 事件形式類似。

            // 解綁事件 off
            $("div").off(); // 解除div上的所有事件
            $("div").off("click"); // 解除div上面的click事件
            $("ul").on("click", "li"); // 解除ul裏li會觸發的click事件

這樣就解除了綁定在元素身上的事件，off() 事件同樣可以解除事件委託。

 

 

one() 一次事件 

一次事件只執行一次，往後再也不執行了

            // 一次事件 one("事件",fn) 指只觸發一次
            $("p").one("click", function () {
                $(this).addClass("bgColor");
            })

 

自動觸發事件

讓元素自動觸發自動的事件。有三種方式。

ele.事件()

            // a. ele.事件()
            $("span").on("click", function () {
                $(this).addClass("fontColor");
            })
            // $("span").click(); // 自動觸發span的點擊事件

 ele.trigger("事件") 

            // b. ele.trigger("事件")
            $("span").trigger("click");

ele.triggerHandler("事件")  —— 可以阻止元素的默認行爲

            $("input").on("focus", function () {
                console.log("獲得焦點");
                $(this).val("默認文本");
            })
            // c. ele.triggerHandler("事件") 阻止默認行爲 eg：表單獲焦點有光標出現
            $("input").trigger("focus"); // 獲得焦點時，表單中會有光標在閃爍
            // $("input").triggerHandler("focus"); // 沒有光標閃爍

                   

 

ok，今天完成。