JQuery 18

事件綁定

第一種方式:直接使用事件名

例:$("#btn").click(function(){? alert(1) })

第二種方式:on(event,function)

例:$('#btn').on('click', function(){ alert(2);})

第三種方式:bind(event, function)

例:$('#btn').bind('click', function(){alert(3);})

第四種方式:利用事件監(jiān)聽(tīng)來(lái)綁定事件

事件移除

.off():通常用于移除通過(guò)on方法綁定的事件

?例: $("p").off("click");

2.unbind():移除被選元素的事件

?例: $("p").unbind();

鼠標(biāo)事件

1:mouseover? ? 鼠標(biāo)移入(支持事件冒泡)

2:mouseout? ? 鼠標(biāo)移出? (支持事件冒泡)

3.mouseleave? 鼠標(biāo)移出(不支持事件冒泡)

4.mouseenter? 鼠標(biāo)移入 (不支持事件冒泡)

5:mousedown? 鼠標(biāo)按下

6:mouseup? ? ? 鼠標(biāo)抬起

7:mousemove? 鼠標(biāo)移動(dòng)

8:click? ? ? ? ? ? ? 鼠標(biāo)單擊

9:dbclick? ? ? ? ? 鼠標(biāo)雙擊

10:contextmenu? 鼠標(biāo)右鍵

鍵盤(pán)事件

keydown 鍵盤(pán)按下

keyup 鍵盤(pán)抬起

表單事件

blur 失去焦點(diǎn)事件

focus 獲取焦點(diǎn)事件

change 內(nèi)容發(fā)生改變

submit 表單提交事件

復(fù)合事件

hover方法規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)玫膀。

例:? $("p").hover(function(){

$("p").css("backgroundColor","yellow");

},function(){

$("p").css("backgroundColor","pink");

});

事件對(duì)象屬性

Jquery對(duì)事件屬性進(jìn)行了封裝使事件處理在各瀏覽器下不需要判別類型都能正常運(yùn)行碘菜。

event.type

該屬性用于獲得觸發(fā)該事件的類型檬姥,對(duì)引發(fā)事件的不同操作栓霜,返回不同結(jié)果

例:$("p").click(function(event){alert(event.type);});

該示例返回元素p單機(jī)事件的事件類型匕争,結(jié)果打印是'click'渊啰。

event.target

該屬性用于獲得觸發(fā)事件的元素

例:

$("p, button, h1").click(function(event){

$("div").html("通過(guò)" + event.target.nodeName + "元素觸發(fā)");

});

event.pageX 和 event.pageY

用這兩個(gè)屬性可以獲得鼠標(biāo)的相對(duì)于頁(yè)面的當(dāng)前位置

例:

$(“p").click(function(event){

alert("current mouse location "+event.pageX+" “+event.pageY);

});

event.preventDefault()

阻止默認(rèn)事件

例: $("a").click(function(event){event.preventDefault();});

使用該屬性阻止元素a的默認(rèn)跳轉(zhuǎn)行為。

event.stopPropagation()

阻止事件冒泡

例:

$('div').click(function(event){

alert('里層點(diǎn)擊');

event.stopPropagation();

});

使用stopPropagation()方法阻止div的父元素的click事件被觸發(fā)捂齐。

事件委托

事件委托:通俗的講蛮放,事件就是onclick,onmouseover奠宜,onmouseout包颁,等就是事件,委托呢挎塌,就是讓別人來(lái)做徘六,這個(gè)事件本來(lái)是加在某些元素上的,然而你卻加到別人身上來(lái)做榴都,完成這個(gè)事件待锈。

原理:利用冒泡的原理,把事件加到父級(jí)上嘴高,觸發(fā)執(zhí)行效果竿音。

好處:減少事件注冊(cè),提高性能拴驮。

delegate()

定義和用法:delegate() 方法為指定的元素(屬于被選元素的子元素)添加一個(gè)或多個(gè)事件處理程序春瞬,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。

語(yǔ)法:$(selector).delegate(childSelector,event,data,function)

delegate/on的參數(shù)說(shuō)明

最新on方法取替了delegate方法

事件命名空間

事件添加命名空間便于事件的管理:刪除事件和觸發(fā)事件套啤。例:

元素綁定多個(gè)事件

$("div").bind("click.plugin",function(){alert("click.plugin");}); $("div").bind("click",function(){alert("click");}); $("div").bind("mouseover.plugin",function(){alert("mouseover.plugin");}); $("div").bind("dbclick",function(){alert("dbclick");});

由于使用了命名空間宽气,可以刪除指定命名空間中的事件,如移除所有plugin命名空間下的事件函數(shù)方法如下:

$(“button”).click(function(){$("div").unbind(".plugin");});

這樣就移除了所有命名空間是plugin的事件函數(shù)潜沦。div中就只剩下click和dbclick綁定事件萄涯。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市唆鸡,隨后出現(xiàn)的幾起案子涝影,更是在濱河造成了極大的恐慌,老刑警劉巖争占,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件燃逻,死亡現(xiàn)場(chǎng)離奇詭異序目,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)伯襟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門猿涨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人姆怪,你說(shuō)我怎么就攤上這事嘿辟。” “怎么了片效?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)英古。 經(jīng)常有香客問(wèn)我淀衣,道長(zhǎng),這世上最難降的妖魔是什么召调? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任膨桥,我火速辦了婚禮,結(jié)果婚禮上唠叛,老公的妹妹穿的比我還像新娘只嚣。我一直安慰自己,他們只是感情好艺沼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布册舞。 她就那樣靜靜地躺著,像睡著了一般障般。 火紅的嫁衣襯著肌膚如雪调鲸。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,604評(píng)論 1 305
  • 那天挽荡,我揣著相機(jī)與錄音藐石,去河邊找鬼。 笑死定拟,一個(gè)胖子當(dāng)著我的面吹牛于微,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播青自,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼株依,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了性穿?” 一聲冷哼從身側(cè)響起勺三,我...
    開(kāi)封第一講書(shū)人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎需曾,沒(méi)想到半個(gè)月后吗坚,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體祈远,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年商源,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了车份。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡牡彻,死狀恐怖扫沼,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情庄吼,我是刑警寧澤缎除,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站总寻,受9級(jí)特大地震影響器罐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜渐行,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一轰坊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧祟印,春花似錦肴沫、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至孽文,卻和暖如春驻襟,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背芋哭。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工沉衣, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人减牺。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓豌习,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親拔疚。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肥隆,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • //------------------------- 第一章 認(rèn)識(shí)JQuery ----------------...
    米塔塔閱讀 720評(píng)論 0 9
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性稚失。 1....
    LaBaby_閱讀 1,174評(píng)論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開(kāi)發(fā)人員創(chuàng)造搞交互性界面的方式栋艳。設(shè)計(jì)者無(wú)需花費(fèi)時(shí)間糾纏JS復(fù)雜的高級(jí)特性。 1....
    LaBaby_閱讀 1,336評(píng)論 0 2
  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點(diǎn)的復(fù)制與替換 (1)DOM拷貝clone() 克隆節(jié)點(diǎn)是DOM的常...
    凜0_0閱讀 1,342評(píng)論 0 8
  • 剛在樓下帶乖乖去玩扭扭車句各,她不是很愿意用腳前進(jìn)吸占,把腳順勢(shì)搭在了扭扭車的踏腳處晴叨,在一個(gè)拐角處我回頭看著她再拉車,還是...
    Melshow閱讀 215評(píng)論 0 0