欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery事件注冊(cè)的實(shí)現(xiàn)示范

 更新時(shí)間:2022年07月19日 11:25:32   作者:一個(gè)水瓶座程序猿.  
jQuery為我們提供了方便的事件注冊(cè)機(jī)制,它的優(yōu)點(diǎn),操作簡(jiǎn)單,且不用擔(dān)心事件覆蓋等問(wèn)題。缺點(diǎn),普通的事件注冊(cè)不能做事件委托,且無(wú)法實(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)文章

最新評(píng)論