时间戳

首页 > 解决方案 > Javascript 对象方法评估函数

javascript - Javascript 对象方法评估函数

问题描述

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

<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>';
    }
}

感谢您的意见。

标签： javascriptdom-events

解决方案

这是一种方法。

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

首先迭代函数，映射名称并添加事件侦听器。在事件监听器中，我们所做的只是调用参数中提供的函数。

推荐阅读