on()方法可以在匹配元素上绑定一个或多个事件处理函数
语法:element.on(events,[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); })
到此这篇关于jQuery事件注册的实现示范的文章就介绍到这了,更多相关jQuery事件注册内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝!