jquery中有哪幾種常用綁定事件

jQuery中有四種常用綁定事件，分別是：1、「on()」方法，被選元素及子元素上新增一個或多個事件處理程序；2、「bind() 」方法，在選取的元素上綁定特定事件類型的監聽函數；3、「live()」方法，在版本1.9 中被移除；4、「delegate()」方法，為指定的元素新增一個或多個事件處理程序，並執行指定函數。

本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。

jquery常用綁定事件有四種：

一、on()方法(首選方法)

on () 方法在被選元素及子元素上加上一個或多個事件處理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。這個方法為 API 帶來很多便利，我們推薦使用該方法，它簡化了 jQuery 程式碼庫。

參數：

event:必要。規定要從被選元素移除的一個或多個事件或命名空間。由空格分隔多個事件值。必須是有效的事件

data:可選。規定只能加入指定的子元素上的事件處理程序（且不是選擇器本身，例如已廢棄的 delegate() 方法）。

function:可選。規定當事件發生時運行的函數。

map:規定事件映射({event:function, event:function, ...})，包含要新增至元素的一個或多個事件，以及當事件發生時運行的函數。

語法：$(selector).on(event,childSelector,data,function,map)

範例：為p元素新增單擊事件

$("p").on("click",function(){

    alert("The paragraph was clicked.");

});

二、bind()方法

bind()作用就是在選取的元素上綁定特定事件類型的監聽函數，

參數：

type:必要。事件類型，如click、change、mouseover等;

data:可選。傳入監聽函數的參數，透過event.data取到。可選;

function:必要。規定當事件發生時運行的函數(監聽函數)，可傳入event對象，這裡的event是jQuery封裝的event對象，與原生的event對像有區別，使用時需要注意。

map:規定事件映射({event:function, event:function, ...})，包含要新增至元素的一個或多個事件，以及當事件發生時執行的函數

語法：$(selector).bind(event,data,function,map)

範例：給

新增一個點擊事件

$("p").bind("click",function(){

    alert("单击p元素");

});

三、live()方法

##live ()，

在版本1.9 中移除。 請使用on()方法代替。將一個或多個事件處理程序新增至目前或未來的被選元素。 (還是總結在此)

參數：

event：必需。規定新增到元素的一個或多個事件。由空格分隔多個事件值。必須是有效的事件。

data:可選。傳遞到該函數的額外參數

function:必要。當事件發生時，執行的函數

語法：$(selector).live(event,data,function)

範例：當點擊按鈕時，隱藏或顯示

元素：##

$("button").live("click",function(){

    $("p").slideToggle();

});

四、delegate()方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数：

childSelector：必需。规定要添加事件处理程序的一个或多个子元素。

event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到该函数的额外参数

function:必需。当事件发生时，运行的函数

语法：$(selector).delegate(childSelector,event,data,function)

举例：当单击

元素内部的

元素时，改变所有

元素的背景颜色：

$("div").delegate("p","click",function(){

    $("p").css("background-color","pink");

});

以上是jquery中有哪幾種常用綁定事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！