jquery中有哪些基礎(chǔ)事件方法

jquery基礎(chǔ)事件，包括綁定事件、簡(jiǎn)寫事件、復(fù)合事件；

創(chuàng)新互聯(lián)建站專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、東蘭網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為東蘭等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

一．綁定事件

jQuery 通過.bind()方法來為元素綁定這些事件。

形式：

bind(type, [data], fn)

參數(shù)：

type 表示一個(gè)或多個(gè)類型的事件名字符串；

[data]是可選的，作為 event.data 屬性值傳遞一個(gè)額外的數(shù)據(jù)，這個(gè)數(shù)據(jù)是一個(gè)字符串、一個(gè)數(shù)字、一個(gè)數(shù)組或一個(gè)對(duì)象；

fn 表示綁定到指定元素的處理函數(shù)。

二、簡(jiǎn)寫事件

為了使開發(fā)者更加方便的綁定事件，jQuery 封裝了常用的事件以便節(jié)約更多的代碼。 稱之為簡(jiǎn)寫事件。簡(jiǎn)寫事件，綁定方法如下圖，

三、復(fù)合事件

jQuery 提供了許多最常用的事件效果， 組合一些功能實(shí)現(xiàn)了一些復(fù)合事件， 比如切換功?能、智能加載等。

擴(kuò)展資料

1、綁定事件fn函數(shù)

1)使用點(diǎn)擊事件

$('input').bind('click', function () {//點(diǎn)擊按鈕后執(zhí)行匿名函數(shù)

　alert('點(diǎn)擊！');

});

2)普通處理函數(shù)

$('input').bind('click', fn); //執(zhí)行普通函數(shù)式無須圓括號(hào)

function fn() {

alert('點(diǎn)擊！');

}

2、簡(jiǎn)寫事件函數(shù)

1）.mouseover()和.mouseout()表示鼠標(biāo)移入和移出的時(shí)候觸發(fā)。而.mouseenter()和.mouseleave()表示鼠標(biāo)穿過和穿出的時(shí)候觸發(fā)。

2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。

3）.focus()和.blur()分別表示光標(biāo)激活和丟失，事件觸發(fā)時(shí)機(jī)是當(dāng)前元素。而.focusin()和.focusout()也表示光標(biāo)激活和丟失，但事件觸發(fā)時(shí)機(jī)可以是子元素。

3、復(fù)合事件示例，背景移入移出切換效果

$('div').hover(function () {

$(this).css('background', 'black');? ? ?//mouseenter 效果

}, function () {

$(this).css('background', 'red');? ? ? //mouseleave 效果，可省略

});

參考資料

jQuery官方網(wǎng)站-事件

jquery綁定點(diǎn)擊事件的方法

jQuery綁定點(diǎn)擊事件可以使用其綁定事件函數(shù)

jquery中四個(gè)事件綁定方式（bind,live,delegate,on）

1、bind()????

簡(jiǎn)要描述

bind()向匹配元素添加一個(gè)或多個(gè)事件處理器。

使用方式

$(selector).bind(event,data,function)

event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；

單事件處理：例如?$(selector).bind("click",data,function);

多事件處理：

1.利用空格分隔多事件，例如?$(selector).bind("click dbclick mouseout",data,function);

2.利用大括號(hào)靈活定義多事件，例如?$(selector).bind({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；

大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)

綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

適用所有版本，但是根據(jù)官網(wǎng)解釋，自從jquery1.7版本以后bind()函數(shù)推薦用on()來代替。

2、live()? ?

簡(jiǎn)要描述

live()?向當(dāng)前或未來的匹配元素添加一個(gè)或多個(gè)事件處理器；

使用方式

$(selector).live(event,data,function)

event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；

單事件處理：例如?$(selector).live("click",data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).live("click dbclick mouseout",data,function);

2.利用大括號(hào)靈活定義多事件，例如?$(selector).live({event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；

大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

jquery1.9版本以下支持，jquery1.9及其以上版本刪除了此方法，jquery1.9以上版本用on()方法來代替。

3、delegate()

簡(jiǎn)要描述

delegate()?為指定的元素（被選元素的子元素）添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

$(selector).delegate(childSelector,event,data,function)

childSelector:?必需項(xiàng)；需要添加事件處理程序的元素，一般為selector的子元素；

event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；

單事件處理：例如?$(selector).delegate(childselector,"click",data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).delegate(childselector,"click?dbclick mouseout",data,function);

2.利用大括號(hào)靈活定義多事件，例如?$(selector).delegate(childselector,{event1:function, event2:function, ...})　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；

大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

jquery1.4.2及其以上版本；

4、on()

簡(jiǎn)要描述

on()?為指定的元素,添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。使用 on() 方法的事件處理程序適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。

使用方式　

$(selector).on(event,childselector,data,function)

event：必需項(xiàng)；添加到元素的一個(gè)或多個(gè)事件，例如 click,dblclick等；

單事件處理：例如?$(selector).on("click",childselector,data,function);

多事件處理：1.利用空格分隔多事件，例如?$(selector).on("click?dbclick mouseout",childseletor,data,function);

2.利用大括號(hào)靈活定義多事件，例如?$(selector).on({event1:function, event2:function, ...},childselector);　

3.空格相隔方式：綁定較為死板，不能給事件單獨(dú)綁定函數(shù),適合處理多個(gè)事件調(diào)用同一函數(shù)情況；

大括號(hào)替代方式：綁定較為靈活，可以給事件單獨(dú)綁定函數(shù)；　

childSelector:?可選；需要添加事件處理程序的元素，一般為selector的子元素；

data：可選；需要傳遞的參數(shù)；

function：必需；當(dāng)綁定事件發(fā)生時(shí)，需要執(zhí)行的函數(shù)；

適用Jquery版本

jquery1.7及其以上版本；jquery1.7版本出現(xiàn)之后用于替代bind()，live()綁定事件方式；

四種方式的異同和優(yōu)缺點(diǎn)

相同點(diǎn)：

1.都支持單元素多事件的綁定；空格相隔方式或者大括號(hào)替代方式;

2.均是通過事件冒泡方式，將事件傳遞到document進(jìn)行事件的響應(yīng)；

比較和聯(lián)系:

1.bind()函數(shù)只能針對(duì)已經(jīng)存在的元素進(jìn)行事件的設(shè)置；但是live(),on(),delegate()均支持未來新添加元素的事件設(shè)置；

2.bind()函數(shù)在jquery1.7版本以前比較受推崇，1.7版本出來之后，官方已經(jīng)不推薦用bind()，替代函數(shù)為on(),這也是1.7版本新添加的函數(shù)，同樣，可以

用來代替live()函數(shù)，live()函數(shù)在1.9版本已經(jīng)刪除；

3.live()函數(shù)和delegate()函數(shù)兩者類似，但是live()函數(shù)在執(zhí)行速度，靈活性和CSS選擇器支持方面較delegate()差些

4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；　

總結(jié)

如果項(xiàng)目中引用jquery版本為低版本，推薦用delegate(),高版本jquery可以使用on()來代替，以上僅為個(gè)人看法

jquery綁定事件的方法

1、新建一個(gè)靜態(tài)頁面bind.html，并引入jquery核心文件。

2、在body/body標(biāo)簽中，插入一個(gè)button按鈕，添加id屬性值。

3、在script/script標(biāo)簽中，添加按鈕點(diǎn)擊事件，利用on()方法綁定。

4、保存代碼并運(yùn)行項(xiàng)目，打開瀏覽器查看界面效果，點(diǎn)擊按鈕查看控制臺(tái)。

5、將on()方法改為bind()方法，然后保存代碼，點(diǎn)擊按鈕查看打印結(jié)果。

6、在jQuery3.0以下版本中，可以使用delegate()方法綁定點(diǎn)擊事件。

7、除了上述之外，還有l(wèi)ive()方法，不過這個(gè)方法jQuery1.7后就被廢棄了。

怎樣用jquery寫一個(gè)事件？

用jquery寫一個(gè)事件的操作如下：

1、用confirm輸入以下代碼：

if(confirm("確定要?jiǎng)h除數(shù)據(jù)嗎"))

{

}else{

}

2、用組件jBox(需要下載jquery.jBox-2.3.min.js，并引入)

$.jBox.confirm("您確定要?jiǎng)h除此委托嗎？", "提示", function(v, h, f)

{

if (v == "ok")

{

}else{

}

});

當(dāng)前文章：jquerya事件,下面有關(guān)jquery事件的響應(yīng),描述錯(cuò)誤的是
當(dāng)前路徑：http://chinadenli.net/article38/phshsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站改版、建站公司、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)