Question

我正在尝试在javascript对象中使用 addEventListener 而我的代码不正确。说实话，我并不完全确定如何正确编码。就目前而言，＆＃39; button1＆＃39;我尝试定义addEventListener时无法识别。有人可以建议吗？

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> </title>
        <style>
            #wrap{
            margin-top: 30px;
            margin-left: 30px;
            }
            .btn{
            font-size: 20px;
            width: 65px;
            height: 45px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <button id="btn1"  class="btn">btn1</button>
            <button id="btn2" onclick="pub.moveRight('btn2','60px')" class="btn">btn2</button>
        </div>
    </body>
    <script src="test40.js"></script>
</html>

我的 JS ：

var pub = {
    button1: function () {
        return document.getElementById('btn1');
    },

    btn1EventHandler: function () {
        button1.addEventListener('click', function () {
            changeColor('btn1', '#33FFFF');
        });

    }(),

    changeColor: function (id, color) {
        var element = document.getElementById(id);
        element.style.backgroundColor = color;
    },

    name: 'smith',
    moveRight: function (id, pixels) {
        var ele = document.getElementById(id);
        ele.style.marginLeft = pixels;
    }
};

Answer 1

分离 JavaScript和HTML是一种很好的风格。在一个对象中，首先得到元素：

var obj = {
    btn1: document.getElementById("btn1"),
    btn2: document.getElementById("btn2"),
    ...
}

然后应该做的事情的函数：

var obj = {
    btn1: document.getElementById("btn1"),
    btn2: document.getElementById("btn2"),
    ...
    changeBgColor: function(id, bgColor) { ... },
    moveRight: function(id, width) { ... },
    ...
}

最后将点击事件添加到具有此的特定按钮。此指的是中的变量。

var obj = { btn1: document.getElementById("btn1"), btn2: document.getElementById("btn2"), ... changeBgColor: function(id, bgColor) { ... }, moveRight: function(id, width) { ... }, ... addEvent: function() { this.btn1.addEventListener("click", function() { obj.moveRight(...); }); } } obj.addEvent();

Demo

如何在对象中使用addEventListener

1 个答案: