jQuery事件注冊如何實現

這篇文章主要介紹“jQuery事件注冊如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“jQuery事件注冊如何實現”文章能幫助大家解決問題。

jQuery 事件注冊

• 事件注冊on

• 優勢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.鼠標經過和離開都觸發這個函數
.current{background:'blue'};
$('div').on('mouseenter mouseleave',function(){
    $(this).toggleClass('current');
})

優勢2：可以事件委派操作

$("ul").on("click", 'li', function() {
      alert('11')
});
// click是綁定在ul身上，但是觸發對象是li

優勢3：動態的創建元素 on可以給動態生成的元素綁定事件

$('ol').on('click', 'li', function() {
      alert('可以彈出');
})
var li = $("<li>我是后來創建的</li>");
$('ol').append(li);

事件處理

off( )解綁事件

off( )方法移除通過on( ) 方法添加的事件處理程序

$("p").off()  // 解除p元素所有事件處理程序
$("p").off('click')  // 解除p元素上面的點擊事件
$("ul").off('click','li')  // 解除事件委托

有的事件只想觸發一次，可以使用one()來綁定事件

$("p").one('click', function() {
     console.log(134);
})
>> p元素只在`第一次點擊的時候觸發`，之后`不再執行函數`

自動觸發事件 trigger( )

1. element.click();  // 第一種簡寫模式
>> $("div").click();
2. element.trigger('要觸發的事件');  // 第二種自動觸發方式
>> $("div").trigger('click')
3. elememnt.triggerHandler('type')  // 第三種自動觸發方式   不會觸發元素的默認行為 (比如文本框光標閃爍)
>> $("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事件注冊如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。