在检查组内小伙伴提交的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. 有关java构造器的笔记

    当程序中首次出现使用一个类A时, 无论是使用A的静态成员还是创建一个对象(声明一个A类对象不算), 那么类加载器就会首先对A进行加载, 在对A进行加载的过程中, 如果A有一个extends的父类B, ...

  2. HBuilder开发App教程05-滴石和websql

    滴石 介绍 滴石是用HBuilder开发的一款计划类app. 用到HBuilder,mui.nativejs以及h5一些特性. 预期 眼下仅仅开发到todolist级别, 以后计划做成日计划,月计划, ...

  3. 嵌入式开发之davinci---DM8168 8127 8148 HDVPSS中的一些英文缩写解释

    BLEND:Alpha blends input with the graphics.将输入的视频与图形做Alpha融合. CPROC:Color Processing.颜色处理.如动态对比度增强.饱 ...

  4. 在windows cgywinportable上，通过运行linux命令，批量改动文件名。

    在windows cgywinportable上.通过运行linux命令.批量改动文件名. 实例:将当前文件夹下的全部文件名称加上.sql find ./ -type f -exec mv {}  ' ...

  5. xcode10的那些事

    前言 这里主要介绍一下Xcode10 版本主要更新的内容.随着iOS12的发布,Xcode10已经可以从Mac App Store下载.Xcode10包含了iOS12.watchOS 5.macOS1 ...

  6. LDAP方式连接AD获取用户信息

    LDAP资料介绍可以参考:http://wenku.baidu.com/view/262742f9f705cc17552709f9.html ldap访问AD域的的错误一般会如下格式: Ldap lo ...

  7. 在win10 docker启动的centos容器中安装nginx

    我是在win10机器上搭建了一个docker,在docker启动了centos容器,在centos中安装nginx. 安装配置docker 直接在官网下载docker for windows:http ...

  8. 并不对劲的bzoj2038:p1494:[国家集训队]小Z的袜子

    题目大意 有\(n\)(\(n\leq5*10^4\))个数\(a_1,a_2,...,a_n\)(\(\forall i\in[1,n], 1\leq a_i\leq n\)) \(m\)(\(m\ ...

  9. wincap的安装与环境配置

    首先开始知道什么是wincap? 1 通常情况下,大多数的网络应用程序都是通过操作系统来访问网络(sockets),这样是算比较简单的了,毕竟已经封装好了 ,有的时候呢需要一些底层的细节比如协议处理, ...

  10. 51nod 1190 最小公倍数之和 V2【莫比乌斯反演】

    参考:http://blog.csdn.net/u014610830/article/details/49493279 这道题做起来感觉非常奇怪啊--头一次见把mu推出来再推没了的-- \[ \sum ...