jQuery 入門 -- 事件 事件綁定與事件委托

jQuery事件與js事件

在js事件中,事件綁定分為兩種:

1.賦值式事件綁定(又稱為DOM0級事件綁定)

//以點擊事件為例
obox.onclick = function(){}    //無兼容問題,但是不允許重復綁定

2.監聽式事件綁定(又稱為DOM2級事件綁定)

//可以重復綁定,但是有兼容

obox.addEventListener("click",function(){}) //有兼容問題(ie不支持)

obox.attachEvent("onclick",function(){})  //僅ie9支持

在jq事件中,事件綁定只有 監聽式綁定一種 

$("#box").click(function(){})

事件綁定的語法

 元素.事件名(函數名)

綁定方式

1.on綁定(支持事件委托)

$("#btn").on("click.a",function(){console.log(1)})
$("#btn").on("click.b",function(){console.log(2)})   //重復綁定

tip:在on綁定的過程中,存在一個命名空間,可以給綁定的事件自定義命名,使用點語法,例如:click.a

off()方法可以刪除由on()綁定的事件

$("#btn").off("click.a")   //刪除命名的事件

2.bind綁定(不支持事件委托  語法與on綁定一致)

$("#btn").bind("click.a",function(){console.log(1)})
$("#btn").bind("click.b",function(){console.log(2)})   //支持事件命名

 unbind()方法可以刪除由bind綁定的事件

$("#btn").unbind("click.a")  //刪除命名的事件

3.one綁定

 $("#btn").one("click",function(){console.log(1)})

one綁定是一次性綁定,執行事件后立即刪除

4.hover綁定(不會觸發事件冒泡)

$("#btn").hover(function(){console.log("進入")},
function(){console.log("離開")})

鼠標經過執行第一個函數,鼠標離開執行第二個函數

 

Tips:在js中有兩種鼠標經過離開的事件

• onmouseover和onmouseout   ----  會觸發事件冒泡
• onmouseenter和onmouseleave   ----    不會觸發事件冒泡

由此可見jQuery封裝的是js中的onmouseenter和onmouseleave

 

5.模擬事件執行

$("#btn").trigger("click")    //會觸發事件冒泡
$("#btn").triggerHandler("click")  //不會觸發事件冒泡

該方法執行后,會立即執行綁定的事件

 setInterval(() => {
        $("#btn").trigger("click")
    }, 1000);     //每一秒執行一次點擊事件

事件委托

在js中事件委托就是,利用事件冒泡的原理,將事件加到父元素身上,配合事件源,找到真正執行事件的元素

<ul>
    <li>第一個</li>
    <li>第二個</li>
    <li>第三個</li>
    <li>第四個</li>
</ul>

var oul = document.querySelector("ul");     
    
    oul.addEventListener("click",function(eve){   //給父級元素添加事件
        var e = eve || window.event;
        if(e.target.nodeName == "LI"){   //事件冒泡過程中當事件源節點名與真正的元素相等時,執行事件
            console.log(e.target)
        }
    })

在jq中,我們有了更加方便的事件委托方式

$("ul").on("click","li",function(){console.log(this)})

//選中父級,給父級添加on綁定,如果on綁定第二個參數是元素時,變為事件委托,該元素為真正執行事件的元素

 

jQuery事件

在jq當中，基本上所有的js事件都有一個對應的jq事件，下面是jq當中常用的事件。

鼠標事件:

• click
• dblclick
• mouseenter
• mouseleave

鍵盤事件:

• keypress
• keydown
• keyup

表單事件:

• submit
• change
• focus
• blur

文檔/窗口事件:

• load
• resize
• scroll
• unload

鍵盤事件的差異:

• keydown：在鍵盤上按下某鍵時發生，一直按着則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤代碼;
• keypress：在鍵盤上按下一個按鍵，並產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，所以監聽無效，換句話說，只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發。若一直按着某按鍵則會不斷觸發。
• keyup：用戶松開某一個按鍵時觸發，與keydown相對，返回鍵盤代碼.

 

全部事件方法可以訪問W3C文檔：

https://www.w3cschool.cn/jquery/jquery-ref-events.html