js通用的事件监听函数

直接上代码

let eventObj = {
//添加方法
	addEventListener(ele,type,handler){
		if(ele.addEventListener){
			ele.addEventListener(type,handler,fales)
		}else if(ele.attEvent){
			ele.attEvent('on'+type,handler)
		}else {
			ele['on'+ type] = handler
		}
	},
	//移除事件方法
	removeEvent(ele,type,handler){
		if(ele.removeEventListener){
			ele.removeEventListener(type,handler,false)
		}else if(ele.detachEvent){
			ele.detachEvent('on' + type,handler)
		}else {
			ele['on'+type] = null
		}
	},
	// 阻止冒泡
	stopPropagation(ev){
		ev = ev || window.event
		if(ev.stopPropagation){
			ev.stopPropagation()
		}else {
			ev.cancelBubble = true
		}
	},
	//阻止默认行为
	preventDefault(ev){
		ev = ev  ||  window.event
		if(ev.preventDefault){
			ev.preventDefault()
		}else {
			ev.returnValue = false
		}
	},
	//获取事件元对象
	getTarget(ev){
		ev = ev || window.event
		return event.target || event.srcElement
	}
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,没有内置的方法可以直接监听多个参数的变化。但是,我们可以使用第三方库或自己实现一个通用监听函数来实现这个功能。 下面是一个使用第三方库`vue`的例子,它提供了一个`watch`方法来监听对象的属性变化: ```javascript let data = { prop1: 'value1', prop2: 'value2', prop3: 'value3' }; const vm = new Vue({ data: data }); vm.$watch( function() { return [this.prop1, this.prop2, this.prop3]; }, function(newValues, oldValues) { console.log('Properties changed:', oldValues, '->', newValues); } ); data.prop1 = 'new value'; // Properties changed: ["value1", "value2", "value3"] -> ["new value", "value2", "value3"] data.prop2 = 'another new value'; // Properties changed: ["new value", "value2", "value3"] -> ["new value", "another new value", "value3"] ``` 在上面的例子中,我们使用了`vue`库的`vm.$watch()`方法来监听对象的属性变化。我们将要监听的属性放在一个数组中作为第一个参数传递给`$watch()`方法,然后在回调函数中处理属性变化的逻辑。 如果你不想使用第三方库,你可以自己实现一个监听函数。下面是一个简单的实现: ```javascript function watch(obj, props, callback) { let values = props.map(prop => obj[prop]); setInterval(() => { let newValues = props.map(prop => obj[prop]); if (!deepEqual(values, newValues)) { callback(newValues, values); values = newValues; } }, 100); } function deepEqual(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } let data = { prop1: 'value1', prop2: 'value2', prop3: 'value3' }; watch(data, ['prop1', 'prop2', 'prop3'], (newValues, oldValues) => { console.log('Properties changed:', oldValues, '->', newValues); }); data.prop1 = 'new value'; // Properties changed: ["value1", "value2", "value3"] -> ["new value", "value2", "value3"] data.prop2 = 'another new value'; // Properties changed: ["new value", "value2", "value3"] -> ["new value", "another new value", "value3"] ``` 在上面的例子中,我们定义了一个`watch()`函数,它接受一个对象、一个属性数组和一个回调函数作为参数。在`watch()`函数中,我们使用`setInterval()`方法来定时检查属性值的变化,并在变化时调用回调函数。我们还实现了一个`deepEqual()`函数来比较两个对象是否相等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值