jQuery 事件

.on( events [,selector ] [,data ], handler(eventObject) )

参数含义

• events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "click.hello", 或者 ".hello"
• selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
• data：当一个事件被触发时，要传递给事件处理函数的 event.data
• handler(eventObject)：事件被触发时，执行的函数（回调）。

 

.one()

同 on，绑定事件，但只执行一次

.off()

移除一个事件处理函数

$('.box li').off('click')

 

.trigger( eventType [, extraParameters ] )

根据绑定到匹配元素的给定事件类型执行所有处理程序和行为，即通过代码JS使事件触发
.trigger 可自定义事件名称，例如下面例子中自定义名称为 myclick

//例如在下面的 demo 案例中
$('.box ul').one('myclick','li',{name: 'evenyao'}, function(e){ var str = $(this).text() console.log(e.data) $('#wrap').text(str) }) //通过执行完setTimeout之后 触发事件 setTimeout(function(){ $('.box li').eq(0).trigger('myclick') },3000) 

 

jQuery 事件案例

demo 案例

<div class="box">
  <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <input id="ipt" type="text"> <button id="btn">添加</button> <div id="wrap"> </div> <script></script> 

jQuery 普通事件

$('.box li').on('click', function(){ console.log(1) var str = $(this).text() $('#wrap').text(str) }) //等同于 $('.box>ul>li').click(function(){ console.log(2) var str = $(this).text() $('#wrap').text(str) }) 

命名空间写法

// 命名空间 hello
$('.box li').on('click.hello',function(){ console.log('hello') var str = $(this).text() $('#wrap').text(str) }) $('.box li').on('click.world',function(){ console.log('world') var str = $(this).text() $('#wrap').text(str) }) // 命名空间无特别作用，只是在解绑事件时便于区分绑定事件 $('.box li').off('click.hello') 

jQuery 事件代理

即直接在'click'之后指定'li'，即是 jQuery 事件代理的写法

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){ var value = $('#ipt').val() $('.box>ul').append('<li>'+value+'</li>') }) //我们可以用事件代理 $('.box ul').on('click', 'li', function(){ var str = $(this).text() $('#wrap').text(str) }) 

等同于 原生JS 事件代理写法

//上面代码相当于原生JS的
document.querySelector('.box ul').addEventListener('click',function(e){ if(e.target.tagName.toLowerCase() === 'li'){ //console.log(e.target) var str = e.target.innerText //console.log(str) document.querySelector('#wrap').innerHTML = '<div id="wrap">' + str + '</div>' } }) 

 

 

转载于:https://www.cnblogs.com/evenyao/p/9471922.html