在检查组内小伙伴提交的tabToggler插件的js代码时，发现了onclick的如下用法：

                el.onclick = function(){

                    //按钮样式切换

                    for(var i=0;i<obj.btns.length;i++){

                        obj.btns[i].classList.remove("current");

                    }

                    this.classList.add("current");

                    //内容显示切换

                    for(var j = 0;j<obj.divs.length;j++){

                        obj.divs[j].style.display = 'none';

                    }

                    obj.divs[this.index].style.display = 'block';

                    console.log(this.index);

               }

显然这个this指向事件源对象—eventTarget，最近一直在钻研闭包和this的我，看到这里觉得非常的怪，为什么这里的this可以指向eventTarget呢，而且在书写在html标签里的事件处理函数也可以在非闭包作用域下直接访问this(指向target)，如下代码：

<div id="tab1" myonclick = "console.log(this.id);console.log(this)">Tab1</div>

打印结果：

这到底怎么实现的？按照需求一步一步分析就可以了，其实onclick的事件处理函数包括了两部分：

Part 1: 来自html标签内的onclick属性内的js代码；

Part 2: 来自己js脚本里的onclick方法

需求如下：

Part 1 里的onclick字符串可以被click事件执行，而且this作用域是eventTarget

问题：js里有什么机制能执行字符串形式的js代码？如何让代码作用域指向eventTarget？

答案：eval,且eval执行本身就有作用域的概念，让代码的作用域指向eventTarget就行了。

Part 2 里的onclick方法被click事件执行内部逻辑，而且this作用域是eventTarget;

综上，我们可以用eval和指定作用域的办法来扩展一个myonclick时间了，具体实现如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="tab1" myonclick = "console.log(this.id);console.log(this)">Tab1</div>

        <div id="tab2">Tab2</div>

    </body>

    <script>

    //扩展HTMLDivElement原型

    HTMLElement.prototype.clickHandle = function(){

        //1.检查dom标签里有myonclick属性

        var _evalClickStr = this.getAttribute( "myonclick" );

        //2.检查dom有无指定myonclick方法

        if( !!this.myonclick  && typeof this.myonclick === "function" ){

            var _clickHandle = this.myonclick;

        }

        var nativeEventBind = this.addEventListener || this.attachEvent;

        if( !!nativeEventBind ){

            nativeEventBind( 'click',(function( e ){

                //执行eavl代码串

                eval( _evalClickStr );

                //执行myonclick事件处理函数

                _clickHandle.apply( this,e );

            }).bind(this) );

        }

        else return;

    }

    var tab1 = document.getElementById( "tab1" );

    tab1.myonclick = function(){

        console.log( this.id );

    };

    tab1.clickHandle();

    </script>

</html>

核心设计要点：扩展了HTMLElement.prototype对象，在clickHandle方法里，指定了两部分onclick代码的执行上下文为HTMLElement元素本身。

用js的eval函数模拟Web API中的onclick事件的更多相关文章

  1. JS的eval函数解密反混淆

    https://www.hhtjim.com/js-decryption-de-obfuscate-eval-function.html JS的eval函数解密反混淆

  2. Java 实现 JS的eval函数

    JS的eval 函数, 给个表达式做参数, 返回表达式的值. Java的脚本引擎可以实现这个功能. 例子:   拼接一个字符串 \uxxxx, Unicode的十六进制编码, 然后把它打印出来. 即输 ...

  3. ASP.NET Web API中的JSON和XML序列化

    ASP.NET Web API中的JSON和XML序列化 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok ...

  4. 在 ASP.NET Core Web API中使用 Polly 构建弹性容错的微服务

    在 ASP.NET Core Web API中使用 Polly 构建弹性容错的微服务 https://procodeguide.com/programming/polly-in-aspnet-core ...

  5. Entity Framework 6 Recipes 2nd Edition（9-3）译->找出Web API中发生了什么变化

    9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Fri ...

  6. Web APi 2.0优点和特点？在Web APi中如何启动Session状态？

    前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此 ...

  7. Asp.Net Web Api中使用Swagger

    关于swagger 设计是API开发的基础.Swagger使API设计变得轻而易举,为开发人员.架构师和产品所有者提供了易于使用的工具. 官方网址:https://swagger.io/solutio ...

  8. Asp.Net MVC Web API 中Swagger教程，使用Swagger创建Web API帮助文件

    什么是Swagger? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  9. 利用查询条件对象，在Asp.net Web API中实现对业务数据的分页查询处理

    在Asp.net Web API中,对业务数据的分页查询处理是一个非常常见的接口,我们需要在查询条件对象中,定义好相应业务的查询参数,排序信息,请求记录数和每页大小信息等内容,根据这些查询信息,我们在 ...

随机推荐

  1. rocketmq消费队列代码

    DefaultMQPushConsumer consumer = new DefaultMQPushConsumer(Constant.operationLogGroup); try { consum ...

  2. HDUJ 1203 I NEED A OFFER!

    I NEED A OFFER! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  3. RSA私钥加密公钥解密、各种密钥格式转换

    此随笔解决RSA加解密相关的3个问题,详情可以查看源码. 1.公钥加密.私钥解密2.各种格式RSA密钥之间的转换3.不限制加密原文的长度

  4. javascript闭包的应用

    我印象中,javascript的闭包属于进阶的范畴,无非是用来在面试中装装逼而已.你看我身边的一个小伙子,有一天我装逼地问他什么是javascript的闭包,他居然连听都没听说过.但他做起前端的东西来 ...

  5. 更改android studio AVD 位置

  6. POJ3164 Command Network —— 最小树形图

    题目链接:https://vjudge.net/problem/POJ-3164 Command Network Time Limit: 1000MS   Memory Limit: 131072K ...

  7. 【Selenium】软件测试基础（软件测试分类和工具组）firebug、firepath的安装

    白盒测试:需要了解内部结构和代码 黑盒测试:不关心内部结构和代码 灰盒测试:介于白盒黑盒之间 静态测试:测试时不执行被测试软件 动态测试:测试时执行被测试软件 单元测试:测试软件的单元模块 集成测试: ...

  8. 洛谷P4136 谁能赢呢？——博弈

    题目:https://www.luogu.org/problemnew/show/P4136 每个人有足够聪明,一定会把图走满: 所以n为偶数先手胜,n为奇数后手胜. 代码如下: #include&l ...

  9. RobotFrameWork－－selenium2模拟chrome的user agent

    ${options}= Evaluate sys.modules['selenium.webdriver'].ChromeOptions() sys, selenium.webdriver ${opt ...

  10. bzoj 5281: [Usaco2018 Open]Talent Show【dp】

    注意到sum_t比较小,所以设f[i][j]为选前i头牛,当前sum_t为j的最小sum_w值,转移是f[i][j]=min(f[i-1][j],f[i-1][j-t[i]]+w[i]),然后i维用滚 ...