jquery-trigger

丁经略
2023-12-01

1. trigger简单使用介绍

trigger() 方法触发被选元素的指定事件类型,也可以是自定义事件

$(selector).trigger(event,[param1,param2,…])

  • selector : 选择器
  • event : (必选) 定义的事件
  • params: (可选) 需要的参数
$(.demo).on(function(e,a,b,c){
	console.log(e)
	console.log(a,b,c)//10,20,30
	})
	
$(.demo).trigger('click'[10,20,30])

2.trigger原理简单分析

原生模拟trigger

  1. 循环dom对象(jquery对象选择多个对象)
  2. 绑定事件类型(jquery对象上绑定)
  3. 参数处理
  4. 绑定事件执行(遍历jquery对象

jquery.prototype.myOn = function(type,handel){
for(var i = 0;i<this.length;i++){
if(!this[i].cacheEvent){

this[i].cacheEvent = {}

}

if(!this[i].cacheEvent[type]){

this[i].cacheEvent[type] = [handel]

}else{

this[i].cacheEvent[type].push(handel)

}
}
}


jquery.prototype.myTrigger = function(type,params){
var self = this
var paramArr = arguments.length > 1 ? [].slice.call(arguments,1) : []

for(var i = 0;i<this.length;i++){

if(this[i].cacheEvent[type]){

this[i].cacheEvent[type].forEach(function(ele,index){

ele.apply(self,paramArr)

})

}}}


只是对事件绑定做了简单的处理,没有包含原生态的方法

总决

系统提供的事件绑定方法无法满足业务需求的情况下,trigger是种很好的选择

 类似资料: