用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元素本身。

posted @ 2018-09-29 18:54  sophel  阅读(336)  评论(0)  编辑  收藏  举报