用js的eval函数模拟Web API中的onclick事件

在检查组内小伙伴提交的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元素本身。

原文地址:https://www.cnblogs.com/surfer/p/9726220.html

时间: 2024-11-06 07:22:32

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

Java 实现 JS的eval函数

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

Entity Framework 6 Recipes 2nd Edition(9-3)译-&gt;找出Web API中发生了什么变化

9-3. 找出Web API中发生了什么变化 问题 想通过基于REST的Web API服务对数据库进行插入,删除和修改对象图,而不必为每个实体类编写单独的更新方法. 此外, 用EF6的Code Frist实现数据访问管理. 本例,我们模拟一个N层场景,用单独的客户端(控制台应用)来调用单独的基于REST服务的Web网站(WEB API应用) . 注意:每层使用单独的Visual Studio 解决方案, 这样更方便配置.调试和模拟一个N层应用. 假设有一个如Figure 9-3所示的旅行社和预订

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

前言 曾几何时,微软基于Web服务技术给出最流行的基于XML且以扩展名为.asmx结尾的Web Service,此服务在.NET Framework中风靡一时同时也被.NET业界同仁所青睐,几年后在此基础上又扩展成为了WCF,基于SOAP协议,基于WCF标准需要一些配置上的改变.现如今,大势所趋我们只需要HTTP协议以及更加优美的JSON格式,这时将不得不出现一个更加轻量级的Web服务技术.当然,Web Service和WCF虽然有其局限性但是其仍被许多企业所广泛应用,说明一时半会还不会被淘汰,

Asp.Net Web Api 中的异常处理

本文主要参考:http://www.asp.net/web-api/overview/error-handling/exception-handling 1.如果一个Web API控制器抛出未捕获的异常,默认情况下,大多数异常转换成HTTP响应状态码500内部服务器错误.  HttpResponseException类型是一个特例.这个异常返回任何HTTP状态代码中指定异常构造函数.例如,下面的方法如果参数id是无效的,请求将返回404. public Product GetProduct(in

Asp.Net Web Api中使用Swagger

关于swagger 设计是API开发的基础.Swagger使API设计变得轻而易举,为开发人员.架构师和产品所有者提供了易于使用的工具. 官方网址:https://swagger.io/solutions/api-design/ 在没有接触Swagger之前,使用Web Api的时候,我们都是使用word文档提供接口说明的,比较尬,使用文档不方便的地方太多了,比如,当时使用的时候是可以马上找到的,但是时间久了,你就不记得了,找不到了,比如,调试的时候,出现问题,你就不知道到底是使用方的问题,还是

【前端小小白的学习之路】----&gt;用JS编写一个函数,返回数组中重复出现过的元素

用JS编写一个函数,返回数组中重复出现过的元素,见下面的代码: var arr = [1, 2, 3, 1, 2, 3, 4, 5]; var getRepeat = function (arr) { var obj = {}; for (var i = 0, len = arr.length; i < len; i++) { if (obj[arr[i]] == undefined) { obj[arr[i]] = 1; } else { obj[arr[i]]++; } } for (var

ASP.NET Web API中使用OData

在ASP.NET Web API中使用OData 一.什么是ODataOData是一个开放的数据协议(Open Data Protocol)在ASP.NET Web API中,对于CRUD(create, read, update, and delete)应用比传统WebAPI增加了很大的灵活性只要正确使用相关的协议,可以在同等情况下对一个CRUD应用可以节约很多开发时间,从而提高开发效率 二.怎么搭建 做一个简单的订单查询示例我们使用Code First模式创建两个实体对象Product(产品

Web Api 中返回JSON的正确做法

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 在使用Web Api的时候,有时候只想返回JSON:实现这一功能有多种方法,本文提供两种方式,一种传统的,一种作者认为是正确的方法. JSON in Web API – the formatter based approach 只支持JSON最

Asp.Net MVC 4 Web API 中的安全认证-使用OAuth

Asp.Net MVC 4 Web API 中的安全认证-使用OAuth 各种语言实现的oauth认证: http://oauth.net/code/ 上一篇文章介绍了如何使用基本的http认证来实现asp.net web api的跨平台安全认证. 这里说明一个如何使用oauth实现的认证.oauth大家可能不陌生.那么这里需要注意的是我们使用的是.net平台一个比较好的开源oauth库. DOTNETOPENAUTH. 就像上图所示,我们需要一个ISSSUE Server来给我们一个token