js使用函数绑定技术来改变事件处理程序的范围

第一种，也是最常见的一种，是通过指定与事件处理程序同名的html属性，直接在HTML标记中注册事件。代码如下：复制代码如下：函数eventhandler () {alert('当前作用域为输入元素本身')；} input type=' button ' value=' click on me ' onclick=' eventHandler(this)'/第二种方法是将函数赋给一个event handler属性。这样首先得到元素对象，一般代码如下：复制的代码如下： input tid=' myeventhandlerscope ' type=' button ' value=' click me '/script type=' text/JavaScript ' functioneventhandler(){ alert('当前作用域为输入元素本身')；} var mybtn=document . getelementbyid(' myEventHandlerScope ')；mybtn.onclick=eventHandler/script的第三种方式是通过addEventListener和removeEventListener处理DOM2级别的事件，ie浏览器对应的方法是attachEvent和disconnectevent。注册事件代码如下：复制代码代码如下： input ID=' myEventHandlerScope ' Type=' Button ' Value=' Click Me '/Script Type=' Text/JavaScript '/定义注册事件的方法是函数addhandler (obj，Type，handler) {if (obj。addeventlistener) {obj。addeventlistener(类型，处理程序，false)；} else if(obj . attachevent){ obj . attachevent(' on '类型，处理程序)；} else { obj[' on ' type]=handler；}}函数eventHandler() {alert('当前范围是输入元素本身')；} var mybtn=document . getelementbyid(' myEventHandlerScope ')；addHandler(mybtn，' click '，event handler)；//为对象注册事件/脚本。

以上述三种方式为输入元素注册click事件处理程序的一个缺点是，该处理程序的作用域(this)总是在输入对象中。在面向对象编程中，有必要明确指定这是在特定的范围内。为了改变这个范围，有必要使用js的绑定函数技术。所谓“绑定函数”，就是创建一个函数，它可以在特定的环境中调用另一个具有指定参数的函数。它可以很好地与事件处理程序一起使用，以便将函数作为变量传递，同时保持函数的范围(这也是它的执行环境)。绑定函数的定义形式如下：复制代码如下：函数bind (fn，scope) {return fn。apply(作用域| | this，参数)；}这个绑定函数接受两个参数，第一个是要执行的函数，第二个是具体的执行环境，在给定的范围内返回对给定函数的调用，将所有参数一起传递。使用绑定函数技术和DOM2级别的事件处理程序，您可以为元素注册一个事件处理程序，以便在特定范围内执行。具体处理方法如下：首先对之前定义的注册事件的方法做如下修改：复制代码如下： function addhandler (obj，type，handler，scope){ function fn(event){ var evt=event？事件： window.eventevt . target=event . target | | event . srcelement；return handler.apply(作用域|| this，arguments)；} obj . event hash=obj . event hash | | { }；//这里，为需要注册事件处理程序的对象定义一个用于存储事件的hash对象，并将事件处理程序和作用域存储在该事件类型的队列中(obj . event hash[type]=obj . event hash[type]| |[])。push ({'name' : type，' handler' : handler，' fn。if(obj . addeventlistener){ obj . addeventlistener(type，fn，false)；} else if(obj . attachevent){ obj . attachevent(' on '类型，fn)；} else { obj[' on ' type]=fn；}}使用修改后的注册事件方法，可以在指定的环境中执行元素的事件处理程序。复制的代码如下：输入ID=' myEventHandlerScope '类型=' Button '值=' Click Me '/脚本类型=' Text/JavaScript '函数event handler(){ this；Alert('当前范围是窗口元素本身')；} var mybtn=document . getelementbyid(' myEventHandlerScope ')；addHandler(mybtn，' click '，eventHandler，window)；/script执行上面的代码，处理程序eventHandler的这个作用域在window对象下。

在前面的介绍中，通过绑定函数注册事件是为元素对象创建一个事件哈希对象，以保存事件处理程序。这个hash对象在从元素中移除事件处理程序时起着非常重要的作用，根据它，可以准确地移除相应的事件处理程序。移除事件处理程序的代码如下：复制代码如下：函数移除处理程序(obj，类型，处理程序，作用域){ obj . event hash=obj . event hash | | { }；var evt list=obj . event hash[type]| |[]，len=evtList.lengthif(len 0){ for(；len-；){ var curEvtObj=evt list[len]；if(curevtobj . name==type curevtobj . handler===handler curevtobj . scope===scope){ if(obj . removeeventlistener){ obj . removeeventlistener(type，curEvtObj.fn，false)；} else if(obj . separavent){ obj . separavent(' on '类型，curevotobj . fn)；} else { obj[' on ' type]=null；} evtList.splice(len，1)；打破；}}}}使用函数绑定技术为特定执行环境注册事件处理程序的介绍到此结束。类似地，回调函数可以通过使用函数绑定在给定的执行环境中执行。本文版权归作者和博主园区所有，欢迎转载。但是，未经作者同意，您必须保留此声明，并在文章页面的明显位置给出原文的链接，否则，您保留追究法律责任的权利。