js使用函数绑定技术改变事件处理程序的作用域


Posted in Javascript onDecember 26, 2011

第一种,也是 最常见的,就是直接在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>

js使用函数绑定技术改变事件处理程序的作用域
通过以上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对象下面。

js使用函数绑定技术改变事件处理程序的作用域

在前面介绍的通过绑定函数注册事件是为元素对象创建了一个事件的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; 
} 
} 
} 
}

到这里就介绍完了使用函数绑定技术注册特定执行环境的事件处理程序。同样,利用函数绑定还能使回调函数在给定的执行环境里面执行。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
List the Codec Files on a Computer
Jun 11 Javascript
js+css在交互上的应用
Jul 18 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
SVG描边动画
Feb 23 Javascript
JS请求servlet功能示例
Jun 01 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
js实现移动端轮播图
Dec 21 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 Javascript
JavaScript中的property和attribute介绍
Dec 26 #Javascript
JavaScript打字小游戏代码
Dec 26 #Javascript
js bind 函数 使用闭包保存执行上下文
Dec 26 #Javascript
js 函数调用模式小结
Dec 26 #Javascript
JavaScript 原型继承
Dec 26 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 #Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 #Javascript
You might like
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python中global用法实例分析
2015/04/30 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python中Class类用法实例分析
2015/11/12 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
python爬取微信公众号文章
2018/08/31 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
经济学博士求职自荐信范文
2013/11/23 职场文书
高中军训感言1000字
2014/03/01 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
电子专业求职信
2014/06/19 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
搞笑婚前保证书
2015/02/28 职场文书
高三英语教学反思
2016/03/03 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript