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事件注册如何实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。