js使用函数绑定技术改变事件处理程序的作用域使用函数绑定技术改变事件处理程序的作用域
第一种，也是 最常见的，就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件，代码如下：
代码如下:
function eventHandler() {
alert(“当前作用域是 input 元素本身”);
}
<input type=”button” value=”单击我” onclick=”eventHandler(this)”/>
第二种方式就是将一个函数赋值给一个事件处理程序属性。这种方式首先的获取到这个元素对象，一般代码如下：
代码如下:
<input id=”myEventHandlerScope” type=”button” value=”单击我”/>
<script type=”text/javascript”>
function eventHandler() {
alert(“当前作用域是 input 元素本身”);
}
var mybtn = document.getElementById(“myEventHandlerScope”);
mybtn.onclick = eventHandler;
</script>
第三种方式，就是理由DOM2级别的事件处理方法 addEventListener和removeEventListener，针对ie浏览器对应的方法是attachEvent 和 detachEvent。注册事件的代码如下：
代码如下:
<input id=”myEventHandlerScope” type=”button” value=”单击我”/>
<script type=”text/javascript”>
//定义一个注册事件的方法
function addHandler(obj, type, handler) {
if (obj.addEventListener) {
obj.addEventListener(type, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent(“on” + type, handler);
} else {
obj[“on” + type] = handler;
}
}
function eventHandler() {
alert(“当前作用域是 input 元素本身”);
}
var mybtn = document.getElementById(“myEventHandlerScope”);
addHandler(mybtn,’click’,eventHandler);//为对象注册事件
</script>
通过以上3种方式为input元素注册一个 click 事件处理程序都有一个缺点就是这个处理程序的作用域（this）始终处于input对象。在面向对象编程的时候，就需要明确的指定this在特
定的作用域下面。 为了改变this的作用域，就得用到js的一种绑定函数技术。
所谓“绑定函数”就是要创建一个函数，可以在特定环境中以指定参数调用另一个函数，他能很好的与事件处理程序一起使用，以便在将函数作为变量传递的同时保持函数的作用域
（也是this的执行环境）。绑定函数的定义形式如下代码：
代码如下:
function bind(fn,scope) {
return fn.apply(scope||this,arguments);
}
这个绑定函数接受两个参数，第一个是需要执行的函数，第二个是特定的执行环境，并返回一个在给定作用域中调用给定函数，并将所有参数一同传递过去。利用绑定函数技术和
DOM2级的事件处理程序就能很好的为元素注册一个在特定作用域下执行的事件处理函数。具体的处理方式如下：
首先修改先前定义的注册事件的方法如下代码：
代码如下:
function addHandler(obj, type, handler, scope) {
function fn(event) {
var evt = event ? event : window.event;
evt.target = event.target || event.srcElement;
return handler.apply(scope || this,arguments);
}
评论0