js使用函数绑定技术改变事件处理程序的作用域
2011-12-26 00:00
986 查看
第一种,也是 最常见的,就是直接在html标签里面通过指定事件处理程序同名的HTML属性来注册事件,代码如下:
第二种方式就是将一个函数赋值给一个事件处理程序属性。这种方式首先的获取到这个元素对象,一般代码如下:
第三种方式,就是理由DOM2级别的事件处理方法 addEventListener和removeEventListener,针对ie浏览器对应的方法是attachEvent 和 detachEvent。注册事件的代码如下:
通过以上3种方式为input元素注册一个 click 事件处理程序都有一个缺点就是这个处理程序的作用域(this)始终处于input对象。在面向对象编程的时候,就需要明确的指定this在特定的作用域下面。 为了改变this的作用域,就得用到js的一种绑定函数技术。
所谓“绑定函数”就是要创建一个函数,可以在特定环境中以指定参数调用另一个函数,他能很好的与事件处理程序一起使用,以便在将函数作为变量传递的同时保持函数的作用域(也是this的执行环境)。绑定函数的定义形式如下代码:
这个绑定函数接受两个参数,第一个是需要执行的函数,第二个是特定的执行环境,并返回一个在给定作用域中调用给定函数,并将所有参数一同传递过去。利用绑定函数技术和DOM2级的事件处理程序就能很好的为元素注册一个在特定作用域下执行的事件处理函数。具体的处理方式如下:
首先修改先前定义的注册事件的方法如下代码:
使用修改后的注册事件方法就可以使元素的事件处理程序在指定的环境里面执行了。
执行上面这段代码,处理程序eventHandler的this作用域就处在了window对象下面。
在前面介绍的通过绑定函数注册事件是为元素对象创建了一个事件的hash对象用来保存事件处理程序,这个hash对象在元素移除事件处理程序的时候起到了非常总要左右,根据他就能准确的移除对应的事件处理程序。移除事件处理程序的代码如下:
到这里就介绍完了使用函数绑定技术注册特定执行环境的事件处理程序。同样,利用函数绑定还能使回调函数在给定的执行环境里面执行。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
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); } obj.eventHash = obj.eventHash || {};//这里为需要注册事件处理程序的对象定义一个保存事件的hash对象,并把事件处理程序和作用域保存在该事件类型的队列里面 (obj.eventHash [type] = obj.eventHash [type] || []).push({ "name": type, "handler": handler, "fn": fn, "scope": scope }); if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj.attachEvent("on" + type, fn); } else { obj["on" + type] = fn; } }
使用修改后的注册事件方法就可以使元素的事件处理程序在指定的环境里面执行了。
<input id="myEventHandlerScope" type="button" value="单击我"/> <script type="text/javascript"> function eventHandler() { this; alert("当前作用域是 window 元素本身"); } var mybtn = document.getElementById("myEventHandlerScope"); addHandler(mybtn, 'click', eventHandler,window); </script>
执行上面这段代码,处理程序eventHandler的this作用域就处在了window对象下面。
在前面介绍的通过绑定函数注册事件是为元素对象创建了一个事件的hash对象用来保存事件处理程序,这个hash对象在元素移除事件处理程序的时候起到了非常总要左右,根据他就能准确的移除对应的事件处理程序。移除事件处理程序的代码如下:
function removeHandler (obj, type, handler, scope) { obj.eventHash = obj.eventHash || {}; var evtList = obj.eventHash [type] || [], len = evtList.length; if (len > 0) { for (; len--; ) { var curEvtObj = evtList[len]; if (curEvtObj.name == type && curEvtObj.handler === handler && curEvtObj.scope === scope) { if (obj.removeEventListener) { obj.removeEventListener(type, curEvtObj.fn, false); } else if (obj.detachEvent) { obj.detachEvent("on" + type, curEvtObj.fn); } else { obj["on" + type] = null; } evtList.splice(len, 1); break; } } } }
到这里就介绍完了使用函数绑定技术注册特定执行环境的事件处理程序。同样,利用函数绑定还能使回调函数在给定的执行环境里面执行。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章推荐
- js使用函数绑定技术改变事件处理程序的作用域
- 牛腩购物 8 整合用户留言 动软生成器 ,.NET在后置代码中输入JS提示语句(背景不会变白),repeater 循环的时候事件判断,repeater 隔行 奇数行,item列,隐藏区块 Panel 的使用,前台绑定代码的时候使用函数
- js中三种事件绑定之间的关系和事件处理函数里的this值
- Java 按钮和单击事件映射到动作对象改变面板颜色小程序实例 Java核心技术 事件处理
- js 事件绑定函数与this的使用
- IE attachEvent事件处理程序(事件绑定的函数)的this指向的是window不是执行当前事件的dom元素
- 在微信小程序的JS脚本中使用Promise来优化函数处理
- delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如
- js几个简单的工具类函数 事件绑定处理、加载数据字典下拉框、重新加载下拉框、参数处理
- KnockoutJS 3.X API 第七章 其他技术(5) 使用其他事件处理程序
- JS事件详解(二) —— 事件处理程序(事件的绑定)
- js中事件重复绑定会相应导致多次处理程序的响应
- off() 方法 与 unbind() 方法移除绑定事件的处理程序。one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数
- js事件处理程序的运行环境(改变attachEvent内部的this指向&封装兼容性的 addEvent方法)
- js 事件绑定函数与this的使用
- 解决js绑定事件this指向发生改变的问题
- 牛腩购物11:完善用户注册 onblur 失去焦点 jquery ajax post方式使用 一般处理程序 判断用户是否存在 前台js的应用
- js 事件处理函数间的Event物件是否全等
- 利用反射绑定事件处理程序(C#)
- js事件封装函数,js跨浏览器事件处理机制