用js的eval函数模拟Web API中的onclick事件
2021-07-08 22:09
YPE html>
标签：脚本 getattr 而且 prot 核心 info ack utf-8 web
在检查组内小伙伴提交的tabToggler插件的js代码时，发现了onclick的如下用法：
el.onclick = function(){ //按钮样式切换 for(var i=0;i){ obj.btns[i].classList.remove("current"); } this.classList.add("current"); //内容显示切换 for(var j = 0;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)">Tab1div>
打印结果：
这到底怎么实现的？按照需求一步一步分析就可以了，其实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时间了，具体实现如下：
Tab1Tab2
核心设计要点：扩展了HTMLElement.prototype对象，在clickHandle方法里，指定了两部分onclick代码的执行上下文为HTMLElement元素本身。
用js的eval函数模拟Web API中的onclick事件
标签：脚本 getattr 而且 prot 核心 info ack utf-8 web
原文地址：https://www.cnblogs.com/surfer/p/9726220.html
上一篇：windows常用命令
下一篇：获取windows鼠标的当前坐标
文章标题：用js的eval函数模拟Web API中的onclick事件
文章链接：http://soscw.com/index.php/essay/102508.html