狼Robot

虽然很早就接触到js了,但写的少,研究得也少,所以还是小菜一个,最近写的一些东西中,觉得有个方法值得推荐的,所以记录下来.分享分享.呵呵.高手请飘过.

先来看看最初这个方法是什么样子的吧.

version 1: 

Version 1#
 1<script language="javascript" type="text/javascript">
 2function SomeClass()
 3{
 4    
 5}
 6SomeClass.prototype = {
 7    Show : function()
 8    {
 9        alert("Say Hello!");
10    }
11}
12window.onload = function()
13{
14    window.Variable = new SomeClass();
15};
16</script>
17
18<input type="button" value="Hello" onclick="Variable.Show()" />

在这个版中,按钮上要写上变量名,似乎不方便,也不雅,于是我就想能不能在脚本里绑定方法呢?在园子里找到了李战老师,答案是可以,这就出来了下面一个版本.

Version 2:

Version 2#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = function(me)
10    {
11        return function()
12        {
13            me.Show();
14        }
15    }(this);
16}
17SomeClass.prototype = {
18    Show : function()
19    {
20        alert("Say Hello!");
21    }
22}
23
24window.onload = function()
25{
26    new SomeClass("btnDemo");
27}
28</script>
29<input type="button" value="Hello" id="btnDemo" />

在这里面按钮上的变量名没有了,好看了些,不过如果要是多写几次的话就会觉得,每次都function(){return function(){}},这样好像很麻烦,提出来一个方法不是更好么?

Version 3:

Version 3#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "Show");
10}
11SomeClass.prototype = {
12    Show : function()
13    {
14        alert("Say Hello!");
15    },
16    GetFunction : function(Variable, Method)
17    {
18            return function()
19            {
20                Variable[Method]();
21            }
22    }
23}
24
25window.onload = function()
26{
27    new SomeClass("btnDemo");
28}
29</script>
30<input type="button" value="Hello" id="btnDemo" />

这样每次要绑定方法的时候只要调用GetFunction方法就可以了,重用嘛.但是问题又来了,我要是要传参数怎么办呢?

Version 4:

Version 4#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "ShowAny", "Hello, Robot!");
10}
11SomeClass.prototype = {
12    Show : function()
13    {
14        alert("Say Hello!");
15    },
16    ShowAny : function(any)
17    {
18        alert(any);
19    },
20    GetFunction : function(Variable, Method, Parameter)
21    {
22            return function()
23            {
24                Variable[Method](Parameter);
25            }
26    }
27}
28
29window.onload = function()
30{
31    new SomeClass("btnDemo");
32}
33</script>
34<input type="button" value="Hello" id="btnDemo" />

再一次扩展,得到了上面的方法,可以调指定方法,也可以传参数了,似乎没问题了,但是在firefox中,如果我要用到event的话,event是不能用window.event来取的,必须要传event过去或者声名一个隐含参数接收event,真麻烦,再改改吧.

Version 5:

Version 5#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunctionWithEvent(this, "ShowEvent", "Hello, Robot!");
10}
11SomeClass.prototype = {
12    Show : function()
13    {
14        alert("Say Hello!");
15    },
16    ShowAny : function(any)
17    {
18        alert(any);
19    },
20    ShowEvent : function(e,any)
21    {
22      var el = e ? e.target : event.srcElement;
23      var x = e ? e.pageX : event.clientX;
24      var y = e ? e.pageY : event.clientY;
25      alert(any + "\r\nElement : " + el.id + "\r\nPosition : " + x + " | " + y);
26    },
27    GetFunction : function(Variable, Method, Parameter)
28    {
29            return function()
30            {
31                Variable[Method](Parameter);
32            }
33    },
34    GetFunctionWithEvent : function(Variable, Method, Parameter)
35    {
36            return function(e)
37            {
38                Variable[Method](e, Parameter);
39            }
40    }
41}
42
43window.onload = function()
44{
45    new SomeClass("btnDemo");
46}
47</script>
48<input type="button" value="Hello" id="btnDemo" />
49

这样,你的方法在firefox中也可以用event了,取鼠标的事件源dom就可以这样了:

var el = e ? e.target : event.srcElement;

firefox里的event跟ie里的event有啥区别就不用我说了吧.

最后我又碰到了这么一个问题,如果我在一个element的onclick上要绑定多个事件怎么办呢?

Version Final:

Version Final#
 1<script language="javascript" type="text/javascript">
 2function SomeClass(el)
 3{
 4    
 5    if(typeof(el) == "string")
 6    {
 7        el = document.getElementById(el);
 8    }
 9    el.onclick = this.GetFunction(this, "Show|ShowAny", "Hello, Robot!");
10}
11SomeClass.prototype = {
12    Show : function()
13