jQuery中的事件繫結的幾種方式

2022-05-02 14:30:08 字數 2051 閱讀 5821

jquery目前有on(),bind(),delegate(),live()四種繫結方式,但是隨著版本的不斷更新,有的方式也相應的被淘汰掉

【band()方式繫結】

3.0版本之前的繫結方式比較常用的是bind()繫結事件,解除事件的方式是unbind(),但是在3.0之後band()的繫結方式也別相應的解除掉了。bind()的事件繫結是只對當前頁面選中的元素有效。如果你想對動態建立的元素bind()事件,是沒有辦法達到效果的,如下**。

1

<

body

>

2<

button

id="add"

type

="button"

>add div

button

>

3<

button

id="del"

type

="button"

>del div

button

>

4<

button

id="onbtn"

type

="button"

>繫結事件

button

>

5<

button

id="offbtn"

type

="button"

>解綁事件

button

>

6<

div

id="container"

>

7<

div

class

='created'

>我是原生div<

div/>

8div

>

9body

>

10<

script

>

11$(

function

() );

15$(

"#del

").click(

function

());

18$(

"#onbtn

").click(

function

());

22});

23$(

"#offbtn

").click(

function

())26

})27

script

>

delegate(),live()兩種繫結方式並不太常用,因此推薦下面這種方式,on()繫結。

【on()事件繫結】

① 使用on進行單事件繫結

$("button").on("click",function());

② 使用on同時為多個事件,繫結同一函式

$("button").on("mouseover click",function());

③ 呼叫函式時,傳入自定義引數

$("button").on("click",,function(event))

④ 使用on進行多事件多函式繫結

$("button").on(,

mouseover:function()

});⑤ 使用on進行事件委派

>>> 將原本需要繫結到某元素上的事件,改為繫結在父元素乃至根節點上,然後委派給當前元素生效;

eg:$("p").click(function(){});

$(document).on("click","p",function(){});

作用:預設的繫結方式,只能繫結到頁面初始時已有的p元素,當頁面新增p元素時,無法繫結到新元素上;

使用事件委派方式,當頁面新增元素時,可以為所有新元素繫結事件

off() 取消事件繫結

1. $("p").off(): 取消所有事件

2. $("p").off("click"): 取消點選事件

3. $("p").off("click mouseover"):取消多個事件

4. $(document).off("click","p"):取消事件委派

JQuery中的事件繫結

事件冒泡 在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件層次的最頂...

jQuery中的事件繫結

在頁面載入完畢時,程式可以通過為元素繫結事件完成相應的操作。在jquery中,事件繫結通常可以分為為元素繫結事件 移除繫結和繫結一次性事件處理3種情況,下面分別進行介紹。一 為元素繫結事件 在jquery中,為元素繫結事件可以使用bind 方法,該方法的語法結構如下 bind type,data f...

jQuery中的事件繫結

在頁面載入完畢時,程式可以通過為元素繫結事件完成相應的操作。在jquery中,事件繫結通常可以分為為元素繫結事件 移除繫結和繫結一次性事件處理3種情況,下面分別進行介紹。一 為元素繫結事件 在jquery中,為元素繫結事件可以使用bind 方法,該方法的語法結構如下 bind type,data f...