Javascript 如何在对象中使用addEventListener_Javascript

Javascript 如何在对象中使用addEventListener

javascript

Javascript 如何在对象中使用addEventListener,javascript,Javascript,我试图在javascript对象中使用addEventListener，但我的代码不正确。老实说，我不完全确定如何正确编码。目前，当我试图定义addEventListener时，无法识别“button1”。有人能给我建议吗 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title>

我试图在javascript对象中使用addEventListener，但我的代码不正确。老实说，我不完全确定如何正确编码。目前，当我试图定义addEventListener时，无法识别“button1”。有人能给我建议吗

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>

在使用对象和访问对象之间的内部属性时，请使用

this

因此，要访问，请使用此

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

 }(),

在实际代码中，

按钮1

只是一个函数，不能在函数上添加事件侦听器

您应该调用此函数并将其结果存储在对象上，然后您将能够对其执行

addEvenetListener

，例如：

编辑：

我建议您将

pub

对象声明为一个模块，然后为其指定属性和函数

这是一个演示片段：

pub=function（）{
this.button1=函数button1（）{
返回文档.getElementById（'btn1'）；
},
this.btn1=this.button1（），
this.btn1EventHandler=函数（）{
btn1.addEventListener（'click'，function（）{
变色（'btn1'，'#33FFFF'）；
});
}(),
this.changeColor=函数（id，颜色）{
var元素=document.getElementById（id）；
element.style.backgroundColor=颜色；
},
this.name='smith'，
this.moveRight=函数（id，像素）{
var ele=document.getElementById（id）；
ele.style.marginLeft=像素；
}
};
#换行{
边缘顶部：30px；
左边距：30px；
}
.btn{
字体大小：20px；
宽度：65px；
高度：45px；
}

btn1
btn2
您的按钮1
是一个函数。因此，您必须调用它来获取对应于id的元素。或者，像这样声明：
button1: document.getElementById('btn1')

现在，pub.button1
通过idbtn1
引用按钮。您还可以使用显示模块模式仅显示公共界面并隐藏其其余部分。
将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) { ... },
    ...
}    

最后，使用this将单击事件添加到特定按钮。这是指中的变量
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();

@MuhammadUsman-显然，你没有尝试过<代码>未捕获类型错误：无法读取未定义的第7行test40.js的属性“button1”

为什么要用
（）
调用
btn1EventHandler
？请告诉我如何将事件侦听器合并到对象中？它会在对象中的另一个变量下吗？我想这就是我现在的错误所在。谢谢，请看一下我的编辑。
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();