JavaScript:按钮事件动态绑定

基于 prototype.js, v1.6

给元素动态绑定事件，之前在网上查到的是用bind方法，感觉不好理解，而且当动态绑定的方法又要加参数时就不好整了。
改用此方法比较好理解，写起来也简单方便。
$(myelements).setAttribute("onclick", "xxx();");
$(myelements).setAttribute("onblur", "update($F('input1')");//这个看起来好像不行
$(myelements).setAttribute("onchange", "updateElem(" + varName + ")");
再简单点的说，就是拼装字符串了。


实战：
给页面上的部分按钮添加离开提示。

需求：某一个功能是通过ajax的连续请求来完成的，需要花费很长的时间（window.setInterval(function(){xxxxxx}, 3000);），当此功能开始运作后，点击页面上的一些按钮将给予提示："XXX已经开始了，确定要离开这个页面吗？"

实际情况是，这个需求在开发一开始的时候并没有给予充分的重视，都是按部就班，页面上的每个按钮，该干啥都自己在干啥，例如"quitButton"就是οnclick="window.location.href='logout.do'"。

1. <input type='button' id='quitButton' onclick="window.location.href='logout.do' />
3. 或者
5. <a href="#" id="quitLink" onclick="window.location.href='logout.do'" />

问题转化为：需要用户在那个function开始process之后，点击quitButton后先弹出一个confirm的dialog，此时点击"取消"不管，但点击"确定"就要请求那个logout。

。。。。。。。。。突然没心情了，就直接说要点，贴代码：

首先肯定要修改当前的onclick（要弹出个dialog）
其次，在修改之前，也肯定要备份当前的onclick（点击确定后你去干嘛）
最后，点击确定后就去调用先前备份的方法

其他的小tip
function开始process后，应该定义一个boolean型的全局变量：isProcessing

具体代码：（与我们实际应用的略有不同，现在没心情重新测试）

1. var isProcessing = false;
3. PageJumper = Class.create();
4. PageJumper.prototype = {
5.     initialize: function(name, elements, msg) {
6.         this.elements = elements;
7.         this.name = name;
8.         this.msg = msg;
9.         this.init();
10.     },
11.     
12.     init: function(){
13.         for(i = 0; i < this.elements.length; i++) {
14.             eid = this.elements[i];
15.             if(!($(eid))) {
16.                 continue;
17.             }
18.             orgMethod = $(eid).getAttribute("onclick");
19.             $(eid).setAttribute("onclick", this.name + ".clickOnElem('" + eid + "');");
20.             $(eid).setOriginalMethod(orgMethod);
21.         }
22.     },
23.     
24.     clickOnElem: function(eid) {
25.         if(!(isProcessing == true)) {
26.             this.invokeElementOriginalMethod($(eid).getOriginalMethod());
27.             return;
28.         }
29.         if(confirm(this.msg)){
30.             this.invokeElementOriginalMethod($(eid).getOriginalMethod());
31.         }
32.     },
33.     
34.     invokeElementOriginalMethod: function(m) {
35.         eval(m);
36.     }
37. }
39. Object.extend(Element.prototype, {
40.     setOriginalMethod: function(method) {
41.         this.originalMethod = method;
42.     },
43.     
44.     getOriginalMethod: function(){
45.         return this.originalMethod;
46.     }
47. });

外部如此调用：

1. pj = new PageJumper('pj', ['quitButton'], "正在xx……确定停止吗？");

init方法的参数解释下
name：与PageJumper的实例名称保持一致，因为这边用的是字符串拼接。
elements：要进行修改的元素组
msg：弹出的消息内容

这里只对isProcessing变量进行读操作，写操作应该放到function的开始结束处。

后一段的 Object.extend.....是用来做原有方法备份的。


PS一个题外的，他们真BT。。。
产品部门的doc设计文档里，随便用了一段文字“好技法ioejg 技法ioajeoigf警方介绍的方法二哦”（截图里面的）。
结果，UI人员给我们的html文件里面，也是用的这一段。。。



这里没有考虑到直接用href跳转的情况，但也就是在 invokeElementOriginalMethod()里面多判断一下了。