定义为HTML属性的事件句柄的作用域
2012-05-20 23:15
204 查看
今天在做项目的过程中,为了绑定事件方便,采用将事件句柄定义为HTML属性的方式来绑定事件。一开始是这个样子的:
HTML
JS
我为什么这样写呢,因为我不想将太多的事件句柄直接放到window作用域中去,以免事件太多了,容易冲突,也不方便管理。于是我把HTML属性事件全都放到对象action里面去,然后再将此对象扩展到window里。这应该算是一个不错的想法,我之前也这样做过,都没问题的,但今天情况有所不同。总是报错:action.removeTr is not a function。
经过我不懈的努力!我找到了应外一种结局此问题的方法。有些非主流..(虽然后来我用了其他方法,但我还是不明白这种方法为什么能行)
JS
我只是让刚才那段代码延时执行了一会,注:这段代码是放在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这个函数。正确的写法只要该改个名字就可以了。
HTML
<a href="javascript:;" onclick="action.removeTr(this)">Remove</a>
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(); };
相关文章推荐
- html input type text标签属性和方法事件
- HTML 事件属性
- .net 服务器事件和客户端js事件的执行顺序以及在脚本运行前定义脚本要修改的 HTML 元素
- window、document、html、body、element的事件属性比较
- IHTMLDocument2的所有成员、属性、方法、事件[转]
- javascript中的style只能取到在HTML中定义的css属性
- HTML 事件属性[w3school]
- 源码变换 超文本标记语言(即HTML),是用于描述网页文档的一种标记语言。 HTML通过文本来描述文档显示出来应该具有的“样子”。它主要通过标签来定义对象的显示属性或行为。
- HTML事件属性
- HTML 脚本、事件属性
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
- HTML onmousedown 事件属性 关于鼠标按键的问题;
- html select的事件 方法 属性
- html基础-图片标签、表格的属性、链接的属性及链接的分类、name定义锚点的名称、网页的自动刷新、基本字符
- html中input标签只读属性和内容改变事件监听
- HTML 5 全局属性和事件属性
- HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
- 研究一下FBrush,它是从TWinControl才有的属性(可能是因为需要句柄)——发现{$R *.dfm}在运行期执行,而且很有深意,读到属性后赋值还会触发事件,这些无法在VCL代码里直接看到
- 如何在XSL中定义HTML标签里的属性使用XSL的值