前言
因為項目中經常會有利用jquery操作dom元素的增刪操作,所以會涉及到dom元素的綁定事件方式,簡單的歸納一下bind,live,delegate,on的區別,以便以后查閱,也希望該文章日后能幫助到各位朋友,文中如有不當之處,還望各位指正,話不多說,直接進入正題。
一、bind()
簡要描述
bind()向匹配元素添加一個或多個事件處理器。
使用方式
代碼如下:$(selector).bind(event,data,function)
event:必需項;添加到元素的一個或多個事件,例如 click,dblclick等;
單事件處理:例如 代碼如下:$(selector).bind("click",data,function);
多事件處理:1.利用空格分隔多事件,例如 代碼如下:$(selector).bind("click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件,例如 代碼如下:$(selector).bind({event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況;
大括號替代方式:綁定較為靈活,可以給事件單獨綁定函數;
data:可選;需要傳遞的參數;
function:必需;當綁定事件發生時,需要執行的函數;
舉例說明
使用方式
代碼如下:$(selector).delegate(childSelector,event,data,function)
childSelector: 必需項;需要添加事件處理程序的元素,一般為selector的子元素;
event:必需項;添加到元素的一個或多個事件,例如 click,dblclick等;單事件處理:例如 代碼如下:$(selector).delegate(childselector,"click",data,function);
多事件處理:1.利用空格分隔多事件,例如 代碼如下:$(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括號靈活定義多事件,例如 代碼如下:$(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:綁定較為死板,不能給事件單獨綁定函數,適合處理多個事件調用同一函數情況;大括號替代方式:綁定較為靈活,可以給事件單獨綁定函數;
data:可選;需要傳遞的參數;
function:必需;當綁定事件發生時,需要執行的函數;舉例說明
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
jQuery中bind(),live(),delegate(),on()綁定事件方法實例詳解_jquery
jQuery中bind(),live(),delegate(),on()綁定事件方法實例詳解_jquery:本文實例分析了jQuery中bind(),live(),delegate(),on()綁定事件方法。分享給大家供大家參考,具體如下: 前言 因為項目中經常會有利用jquery操作dom元素的增刪操作,所以會涉及到dom元素的綁定事件方式,簡單的歸納一下bind,live,delegate推薦度:
- 熱門焦點