Javascript对象方法评估函数_Javascript_Dom Events

Javascript对象方法评估函数

javascript

Javascript对象方法评估函数,javascript,dom-events,Javascript,Dom Events,首先，我是javascript新手。我的问题是如何将事件侦听器添加到按钮并从myObj脚本调用函数。我试着用谷歌搜索，但我不知道这个关键词是什么。多谢各位 myObj.按钮（'my-btn'{ onClick:function（）{ 警报（'按钮被点击！'）； }, onCancel:function（）{ 警报（“您取消了流程！”）； } }); 我的目标是什么 var myObj={ 按钮：功能（btnId、方法） { var btn=document.getElementById（b

首先，我是javascript新手。我的问题是如何将事件侦听器添加到按钮并从myObj脚本调用函数。我试着用谷歌搜索，但我不知道这个关键词是什么。多谢各位


myObj.按钮（'my-btn'{
onClick:function（）{
警报（'按钮被点击！'）；
},
onCancel:function（）{
警报（“您取消了流程！”）；
}
});

我的目标是什么

var myObj={
按钮：功能（btnId、方法）
{
var btn=document.getElementById（btnId）；
for（方法中的var方法）
{
if（method.toLowerCase（）=='onclick'）
{
//btn.addEventListener（'click'，函数（e）{
//}
//我想添加一个侦听器
//并调用函数“onClick”
}
}
//渲染按钮
btn.innerHTML=''；
}
}

谢谢你的建议。

这里有一种方法

<html>
    <head></head>
    <body>
        <div id="my-btn"></div>
    </body>
    <script>

    const myObj = {
        button: (btnId, methods) => {
            const btn = document.getElementById(btnId);

            for (let method in methods) {
                const nameLower = method.toLowerCase();

                if (nameLower.startsWith('on')) {
                    btn.addEventListener(nameLower.substr(2), function(e) {
                        methods[method]();
                    });
                }                
            }

            // render button
            btn.innerHTML = '<input type="button" value="My Button"></button>';
        }
    };

    myObj.button('my-btn',{
        onClick: () => alert('Button is clicked !'),
        onCancel: () => alert('You cancel the process !')
    });
    </script>
</html>


常数myObj={
按钮：（btnId，方法）=>{
const btn=document.getElementById（btnId）；
for（方法中的let方法）{
const nameLower=method.toLowerCase（）；
if（nameLower.startsWith（'on'））{
btn.addEventListener（nameLower.substr（2），函数（e）{
方法[方法]（）；
});
}                
}
//渲染按钮
btn.innerHTML=''；
}
};
myObj.按钮（'my-btn'{
onClick:（）=>警报（'按钮被单击！'），
onCancel:（）=>警报（'您取消了进程！'）
});

我们可以通过将函数名转换为小写并去掉“前缀上的“

”，将函数名映射到它们的事件。因此，onClick
变成了click
。只需在调用myObj.button
时使用标准事件名，就可以简化操作
从迭代函数开始，映射名称并添加事件侦听器。在事件侦听器中，我们所做的就是调用参数中提供的函数。
btn.addEventListener（'click'，function onClick（e）{…将处理代码放在这里}
-在那里它被称为onClick，它将执行您放在其中的任何代码