JavaScript如何将字符串形式的函数绑定到onClick点击事件
该问题已解决
说明:您可以在问题描述之后查看基于各位答主的回答整理出的解决方案和验证结果。
问题描述
我正在开发一款小型JavaScript用户脚本(UserLand Script)以满足用户的相关需求。
脚本逻辑非常简单,为了最大化降低使用成本,我需要向DOM中动态添加元素,同时配置对应的CSS、文本、事件回调等内容。
为了让脚本能够自动识别要创建的元素、要应用的CSS规则、文本内容等参数,我定义了如下格式的配置对象:
options: { /* Button */ 'button': { 'tagName' : 'button', 'innerHTML' : 'X', 'css' : { 'position' : 'fixed', 'z-index' : '9999999', 'bottom' : '20px', 'left' : '20px', 'background-color' : 'black', 'cursor' : 'pointer', 'color' : 'white', 'width' : '60px', 'height' : '60px', 'border' : 'none', 'border-radius' : '50%', 'font-weight' : 'bold', 'font-size' : '1.5rem' }, 'onClick' : 'objectName.method()' } }
脚本通过循环执行如下代码来创建元素:
createElement: (element) => { /* Create element */ const createElement = document.createElement( element.tagName ); /* Add innerHTML */ createElement.innerHTML = element.innerHTML; /* Add CSS */ objectName.addCSStoElement( createElement, element.css ); /* Add onClick event*/ createElement.addEventListener( 'click', element.onClick, false ); /* Add to DOM */ document.body.appendChild ( createElement ); }
所有逻辑都正常运行,唯独如下代码不生效:
createElement.addEventListener( 'click', element.onClick, false );
我推测问题原因是传入的onClick回调是字符串格式,JS无法直接将其作为点击事件的处理函数执行。
如果我的判断没错,请问如何将字符串形式的函数名绑定到点击事件,使得点击创建的元素时可以正常触发对应的函数?
此致
Alex
解决方案
我之前描述问题时提供的信息不够完整,比如没有说明该对象是本地对象,非常抱歉。
本次使用的是本地对象,且代码完全可信,是我自己注入到浏览器中的脚本,用于在访问网站时优化我的操作效率。
基于这个前提可以使用如下方案,如果你的场景不符合该前提,请参考其他安全建议,非常重要。
我做了两处修改即可解决问题:
- 首先修改options配置中onClick的取值如下:
'onClick' : '(function(){objectName.method();})'
- 之后修改绑定事件的代码如下:
createElement.addEventListener( 'click',eval(element.onClick), false );
通过这两处简单的修改,我就解决了该问题,也搞清楚了问题根源!
非常感谢所有提供帮助的答主,祝大家一切顺利!
内容的提问来源于stack exchange,提问作者Alex
相关产品推荐
相关产品推荐

