js监听,怎么执行有传参的函数,然后删除这个监听又要怎么做

JavaScript010

js监听,怎么执行有传参的函数,然后删除这个监听又要怎么做,第1张

var a=document.getElementsByTagName('a')[0]

//简单的绑定

a.onclick=function(){

func(args)//你要执行的函数用参数

}

//解除

a.onclick=null

//如果可能有多个监听的需求,可以考虑用jquery等框架,下面是一种兼容写法

function ae(o){

var oe=o

oe.add= function( type, fn) {

var el=this

if (el.addEventListener){

el.addEventListener(type, fn, false)

} else if (el.attachEvent){

el.attachEvent('on' + type, fn)

}

},

oe.remove=function( type, fn) {

var el=this

if (el.removeEventListener){

el.removeEventListener(type, fn, false)

} else if (el.detachEvent){

el.detachEvent('on' + type, fn)

}

}

return oe

}

function eventHandle(){

func(args)//要执行的函数及参数

}

a=ae(a)

//添加

a.add('click',eventHandle)

//移除

a.remove('click',eventHandle)

javascript监听数组变化思路

1、定义变量arrayProto接收Array的prototype

2、定义变量arrayMethods,通过Object.create()方法继承arrayProto

3、重新封装数组中push,pop等常用方法。(这里我们只封装我们需要监听的数组的方法,并不做JavaScript原生Array中原型方法的重写的这么一件暴力的事情)

4、其他js数组变化监听方法

js监听数组变化实现方法

这里我们首先需要确定的一件事情就是,我们只需要监听我们需要监听的数据数组的一个变更,而不是针对原生Array的一个重新封装。

其实代码实现起来会比较简短,这一部分代码我会直接带着注释贴出来

// 获取Array原型const arrayProto = Array.prototypeconst arrayMethods = Object.create(arrayProto)const newArrProto = []

[ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method =>{ // 原生Array的原型方法

let original = arrayMethods[method] // 将push,pop等方法重新封装并定义在对象newArrProto的属性上

// 这里需要注意的是封装好的方法是定义在newArrProto的属性上而不是其原型属性

// newArrProto.__proto__ 没有改变

newArrProto[method] = function mutator() {console.log('监听到数组的变化啦!') // 调用对应的原生方法并返回结果(新数组长度)

return original.apply(this, arguments)

}

})let list = [1, 2]// 将我们要监听的数组的原型指针指向上面定义的空数组对象// newArrProto的属性上定义了我们封装好的push,pop等方法list.__proto__ = newArrProto

list.push(3) // 监听到数组的变化啦! 3// 这里的list2没有被重新定义原型指针,所以这里会正常执行原生Array上的原型方法let list2 = [1, 2]

list2.push(3) // 3

目前为止我们已经实现了数组的监听。从上面我们看出,当我们将需要监听的数组的原型指针指向newArrProto对象上的时候(newArrProto的属性上定义了我们封装好的push,pop等方法)。这样做的好处很明显,不会污染到原生Array上的原型方法。