博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
定义为HTML属性的事件句柄的作用域
阅读量:5045 次
发布时间:2019-06-12

本文共 1276 字,大约阅读时间需要 4 分钟。

今天在做项目的过程中,为了绑定事件方便,采用将事件句柄定义为HTML属性的方式来绑定事件。一开始是这个样子的:

HTML

JS

var action = {};	window.action = action;	action.removeTr = function(ele){		$(ele).parent().parent().remove();	};

我为什么这样写呢,因为我不想将太多的事件句柄直接放到window作用域中去,以免事件太多了,容易冲突,也不方便管理。于是我把HTML属性事件全都放到对象action里面去,然后再将此对象扩展到window里。这应该算是一个不错的想法,我之前也这样做过,都没问题的,但今天情况有所不同。总是报错:action.removeTr is not a function。

经过我不懈的努力!我找到了应外一种结局此问题的方法。有些非主流..(虽然后来我用了其他方法,但我还是不明白这种方法为什么能行)

JS

setTimeout(function(){		var action = {};		window.action = action;		action.removeTr = function(ele){			$(ele).parent().parent().remove();		};	}, 10000);

我只是让刚才那段代码延时执行了一会,注:这段代码是放在jQuery的document.ready函数中执行的哦!

太诡异了!!

不过我还不死心,就拿出《JavaScript权威指南》随手翻翻,希望能找到答案,果然没让我失望。P397有关于事件句柄作用域的章节。

定义为HTML属性的事件句柄 拥有与其它函数不同的作用域链。它的作用域链的头是调用对象(这意味着this指向该元素),并且事件句柄的作用域链中的下一个对象仍不是window,事件句柄的作用域会随定义句柄的对象终止,它还会延伸到包容层级,而且至少包括包含该元素的HTML<form>元素和包含表单的Document对象。作用域链终止对象才是window。

这就找到我之前出错的原因了,因为我的<a>标签是包含在表单之中的,onclick中的代码所访问的action对象不是我定义在window中的,而是表单的form.action。所以报错action.removeTr is not a function,因为form.action根本就没有removeTr这个函数。正确的写法只要该改个名字就可以了。

var customAction = {};	window.customAction = customAction;	customAction.removeTr = function(ele){		$(ele).parent().parent().remove();	};

  

 

 

转载于:https://www.cnblogs.com/realwall/archive/2012/05/20/2510984.html

你可能感兴趣的文章
时间>金钱
查看>>
元数据元素
查看>>
Visual Studio Code 构建C/C++开发环境
查看>>
web自己主动保存表单
查看>>
一个小的日常实践——高速Fibonacci数算法
查看>>
创建与删除索引
查看>>
java的基本数据类型
查看>>
机器学些技法(9)--Decision Tree
查看>>
静态页面复习--用semantic UI写一个10min首页
查看>>
在Windows下安装64位压缩包版mysql 5.7.11版本的方法
查看>>
drf权限组件
查看>>
输入月份和日期,得出是今年第几天
查看>>
利用mysqldump备份mysql
查看>>
Qt中子窗口全屏显示与退出全屏
查看>>
使用brew安装软件
查看>>
[BZOJ1083] [SCOI2005] 繁忙的都市 (kruskal)
查看>>
吴裕雄 python 机器学习——数据预处理嵌入式特征选择
查看>>
Centos6.4安装JDK
查看>>
201521123069 《Java程序设计》 第4周学习总结
查看>>
线性表的顺序存储——线性表的本质和操作
查看>>