Javascript 对象方法计算函数

Javascript object methods evaluate functions

首先,我是 javascript 的新手。 我的问题是如何向按钮添加事件侦听器并从 myObj 脚本调用该函数。我尝试 google 但我不知道它的关键字是什么。谢谢

<div id="my-btn"></div>

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

还有我的对象

var myObj = {
    button: function(btnId, methods)
    {
        var btn = document.getElementById(btnId);

        for (var method in methods)
        {
            if (method.toLowerCase() == 'onclick')
            {
                //btn.addEventListener('click', function(e) {
                //}

                // i want to add listener
                // and call the function "onClick"

            }
        }

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

谢谢你的建议。

这是一种方法。

<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>

我们可以通过将函数名称转换为小写字母并去除 "on" 前缀来将函数名称映射到它们的事件。所以 onClick 变成 click。您可以通过在 myObj.button.

的调用中使用标准事件名称来简化事情

首先遍历函数,映射名称并添加事件侦听器。在事件侦听器中,我们所做的就是调用参数中提供的函数。