zoukankan      html  css  js  c++  java
  • 关于Function.prototype.bindAsEventListener方法的解析

    Function.prototype.bindAsEventListener=function(object){
         var __method=this;
         return function(event){
                  __method.call(object,event||window.event);
        }
    }

    解构一下

    //这是给Function原型增加一个bind方法,该方法挂一个参数<--强调的说。

    Function.prototype.bindAsEventListener=function(object){...}


    //在Function原型上增加prototype,则所有function()都能继续到这个方法。例如

    function z();
    alert(z.bindAsEventListener);


    //做一个指针,指向Function<--请注重是Function而不是bindAsEventListener

    var__method=this;

    returnfunction(event){
             __method.call(object,event¦¦window.event);
    }

    //返回一个函数。请注重是返回一个函数而不是函数结果,否则函数内部并没有返回结果不就永远成了undefined了

    call()要理解。这个说起来有点麻烦。举个例子:

    var a={
            val_url:"http://www.baidu.com",
            run:function(val){
                    alert(this.val_url+"____"+val)
               }
          }
    varb={
           val_url:"http://blog.my400800.cn"
    }

          a.run.call(b,"c");

    //a的run方法召唤b来调用它,参数是"c"。b并没有run方法。相当于b.run=c.run;b.run("c");的这么过程。

    根据bindAsEventListener字面意思,用上面这些代码写个例子

    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>UntitledPage</title>
    <scripttype="text/javascript">

    Function.prototype.bindAsEventListener=function(object){
          var __method=this;
          return function(event){
                __method.call(object,event||window.event);
          }
    }

    </script>
    </head>
    <body>
    <div id="test" style="background-color:#ccc;padding:20px;">aaaaaaaaaaaaaaaaaaaaaaa</div>

    <script type="text/javascript">

    //方便起见,重新封装getElementById。自然它也具备bindAsEventListener方法

    function $(id){returndocument.getElementById(id);}

    //定义一个事件监听方法

    function show(){alert(arguments[0]);}

    //获取Element

    var div=$("test");

    //绑定事件作为div的事件监听器,在onclick时触发假如使用addEventListener可绑定多个方法。

    div.onclick=show.bindAsEventListener(div);
    </script>

    </body>
    </html>

    在这个例子中,onclick触发show方法在binddiv后返回的一个方法,即function(event);

    这个方法召唤div来实现__method方法,并以当前的事件作为参数传递过去。

    __method.call(object,event||window.event);

    前面强调过__method指向的是Function,在这里也就是实例show

    show通过arguments[0]来获取传递过来的第一个参数,也就是event。所以,可以随意修改show并能简单第将这个方法绑定到每一个事件中。当然,假如采用addEventListener方法来绑定事件会更灵活。

    简便的维护,简洁的代码,我想这就是这个bind方法的初衷。

    1.4下多了个return我想没有太多奥妙,应该是方便show()返回值。

    没用过prototype框架,也没有上下文,差不多就这意思吧。

  • 相关阅读:
    计蒜客
    CodeForces -1216B.Shooting
    关于gets读入因为缓冲区出现的问题
    CodeForces
    Codeforces Round #603 (Div. 2) C.Everyone is A Winner!
    Codeforces Round #603 (Div. 2) A.Sweet Problem
    Codeforces Round #603 (Div. 2)B. PIN Codes
    Codeforces 524C.The Art of Dealing with ATM(暴力)
    Codeforces Round #600 (Div. 2) C. Sweets Eating
    数组的定义和初始化
  • 原文地址:https://www.cnblogs.com/jishu/p/1940098.html
Copyright © 2011-2022 走看看