jQuery事件注冊的實現示范
jQuery 事件注冊
- 事件注冊on
- 優(yōu)勢1:多個事件綁定
on()方法可以在匹配元素上綁定一個或多個事件處理函數
語法:element.on(events,[selector],fn)
- events:一個或多個用空格分隔的事件類型 例如:click,keydown
- selector:元素的子元素選擇器
- fn:回調函數,綁定在元素身上的偵聽函數
1.單個事件注冊
$('div').click(function(){
$(this).css('background','pink');
})
$('div').mouseenter(function(){
$(this).css('background','purple');
})
----------------------------------------------------------
2.多個事件注冊 on
$('div').on({
mouseenter:function(){
$(this).css('background','purple')
},
click:function(){
$(this).css('background','pink')
}
})
>> 以'對象'的形式來書寫多個事件注冊3.鼠標經過和離開都觸發(fā)這個函數
.current{background:'blue'};
$('div').on('mouseenter mouseleave',function(){
$(this).toggleClass('current');
})優(yōu)勢2:可以事件委派操作
$("ul").on("click", 'li', function() {
alert('11')
});
// click是綁定在ul身上,但是觸發(fā)對象是li
優(yōu)勢3:動態(tài)的創(chuàng)建元素 on可以給動態(tài)生成的元素綁定事件
$('ol').on('click', 'li', function() {
alert('可以彈出');
})
var li = $("<li>我是后來創(chuàng)建的</li>");
$('ol').append(li);
事件處理
off( )解綁事件
off( )方法移除通過on( ) 方法添加的事件處理程序
$("p").off() // 解除p元素所有事件處理程序
$("p").off('click') // 解除p元素上面的點擊事件
$("ul").off('click','li') // 解除事件委托
有的事件只想觸發(fā)一次,可以使用one()來綁定事件
$("p").one('click', function() {
console.log(134);
})
>> p元素只在`第一次點擊的時候觸發(fā)`,之后`不再執(zhí)行函數`
自動觸發(fā)事件 trigger( )
1. element.click(); // 第一種簡寫模式
>> $("div").click();
2. element.trigger('要觸發(fā)的事件'); // 第二種自動觸發(fā)方式
>> $("div").trigger('click')
3. elememnt.triggerHandler('type') // 第三種自動觸發(fā)方式 不會觸發(fā)元素的默認行為 (比如文本框光標閃爍)
>> $("div").triggerHandler('click')
事件對象:e event
語法:element.on(events,[selector],function(e || event){});
$("div").on('click',function(e){
console.log(e);
})
- 阻止默認行為:event.preventDefault( ) 或者 return false
- 阻止冒泡:event.stopPropagation( )
到此這篇關于jQuery事件注冊的實現示范的文章就介紹到這了,更多相關jQuery事件注冊內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
ASP.NET中使用后端代碼注冊腳本 生成JQUERY-EASYUI的界面錯位的解決方法
上一篇解決了用了JQUERY-EASYUI時 后端注冊腳本重復執(zhí)行的問題.今天又發(fā)現,通過后端代碼 生成的界面有錯位現象.2010-06-06

