jQuery事件注冊(cè)的實(shí)現(xiàn)示范
jQuery 事件注冊(cè)
- 事件注冊(cè)on
- 優(yōu)勢(shì)1:多個(gè)事件綁定
on()方法可以在匹配元素上綁定一個(gè)或多個(gè)事件處理函數(shù)
語(yǔ)法:element.on(events,[selector],fn)
- events:一個(gè)或多個(gè)用空格分隔的事件類型 例如:click,keydown
- selector:元素的子元素選擇器
- fn:回調(diào)函數(shù),綁定在元素身上的偵聽函數(shù)
1.單個(gè)事件注冊(cè) $('div').click(function(){ $(this).css('background','pink'); }) $('div').mouseenter(function(){ $(this).css('background','purple'); }) ---------------------------------------------------------- 2.多個(gè)事件注冊(cè) on $('div').on({ mouseenter:function(){ $(this).css('background','purple') }, click:function(){ $(this).css('background','pink') } }) >> 以'對(duì)象'的形式來(lái)書寫多個(gè)事件注冊(cè)
3.鼠標(biāo)經(jīng)過(guò)和離開都觸發(fā)這個(gè)函數(shù) .current{background:'blue'}; $('div').on('mouseenter mouseleave',function(){ $(this).toggleClass('current'); })
優(yōu)勢(shì)2:可以事件委派操作
$("ul").on("click", 'li', function() { alert('11') }); // click是綁定在ul身上,但是觸發(fā)對(duì)象是li
優(yōu)勢(shì)3:動(dòng)態(tài)的創(chuàng)建元素 on可以給動(dòng)態(tài)生成的元素綁定事件
$('ol').on('click', 'li', function() { alert('可以彈出'); }) var li = $("<li>我是后來(lái)創(chuàng)建的</li>"); $('ol').append(li);
事件處理
off( )解綁事件
off( )方法移除通過(guò)on( ) 方法添加的事件處理程序
$("p").off() // 解除p元素所有事件處理程序 $("p").off('click') // 解除p元素上面的點(diǎn)擊事件 $("ul").off('click','li') // 解除事件委托
有的事件只想觸發(fā)一次,可以使用one()來(lái)綁定事件
$("p").one('click', function() { console.log(134); }) >> p元素只在`第一次點(diǎn)擊的時(shí)候觸發(fā)`,之后`不再執(zhí)行函數(shù)`
自動(dòng)觸發(fā)事件 trigger( )
1. element.click(); // 第一種簡(jiǎn)寫模式 >> $("div").click(); 2. element.trigger('要觸發(fā)的事件'); // 第二種自動(dòng)觸發(fā)方式 >> $("div").trigger('click') 3. elememnt.triggerHandler('type') // 第三種自動(dòng)觸發(fā)方式 不會(huì)觸發(fā)元素的默認(rèn)行為 (比如文本框光標(biāo)閃爍) >> $("div").triggerHandler('click')
事件對(duì)象:e event
語(yǔ)法:element.on(events,[selector],function(e || event){});
$("div").on('click',function(e){ console.log(e); })
- 阻止默認(rèn)行為:event.preventDefault( ) 或者 return false
- 阻止冒泡:event.stopPropagation( )
到此這篇關(guān)于jQuery事件注冊(cè)的實(shí)現(xiàn)示范的文章就介紹到這了,更多相關(guān)jQuery事件注冊(cè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jquery判斷頁(yè)面網(wǎng)址是否有效的兩種方法
本文主要對(duì)jquery判斷頁(yè)面網(wǎng)址是否有效的兩種方法:jQuery方法;AJAX XMLHTTP方法;需要的朋友可以參考借鑒下2016-12-12jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06jQuery訪問(wèn)json文件中數(shù)據(jù)的方法示例
這篇文章主要介紹了jQuery訪問(wèn)json文件中數(shù)據(jù)的方法,結(jié)合實(shí)力形式分析了jQuery事件響應(yīng)及json文件的加載、讀取、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè)(兼容新版jquery)
這篇文章主要介紹了通過(guò)pjax實(shí)現(xiàn)無(wú)刷新翻頁(yè),兼容新版jquery,使用心得方法,需要的朋友可以參考下2014-01-01ASP.NET中使用后端代碼注冊(cè)腳本 生成JQUERY-EASYUI的界面錯(cuò)位的解決方法
上一篇解決了用了JQUERY-EASYUI時(shí) 后端注冊(cè)腳本重復(fù)執(zhí)行的問(wèn)題.今天又發(fā)現(xiàn),通過(guò)后端代碼 生成的界面有錯(cuò)位現(xiàn)象.2010-06-06jsTree 基于JQuery的排序節(jié)點(diǎn) Bug
jsTree(JQuery) 排序節(jié)點(diǎn) Bug的解決方法。2011-07-07淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06