如何在对象中使用addEventListener

我想在一个JavaScript对象内使用addEventListener，并且我的代码不正确。说实话，我不完全确定如何正确编码。就目前来看，当我尝试定义addEventListener时，'button1'无法识别。请有人建议？如何在对象中使用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; 
    } 
};

来源

2015-09-14 dave

@MuhammadUsman - 很显然，你没有尝试。 'Uncaught TypeError：无法读取未定义的属性'button1' - 第7行test40.js' – enhzflep

为什么用'（）'调用'btn1EventHandler'？ – 2015-09-14 07:05:18

在您的实际代码中button1只是一个函数，您不能在函数中添加事件侦听器。

你应该调用这个函数，并将其结果存储在对象上，那么你就可以addEvenetListener就可以了，例如：

编辑：

我建议你宣布你pub对象作为模块，然后给它的属性和功能。

这是一个演示片段：

pub = function() { 
 
    this.button1 = function button1() { 
 
     return document.getElementById('btn1'); 
 
    }, 
 
    this.btn1 = this.button1(), 
 
    this.btn1EventHandler = function() { 
 
     btn1.addEventListener('click', function() { 
 
     changeColor('btn1', '#33FFFF'); 
 
     }); 
 

 
    }(), 
 

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

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

#wrap { 
 
    margin-top: 30px; 
 
    margin-left: 30px; 
 
} 
 
.btn { 
 
    font-size: 20px; 
 
    width: 65px; 
 
    height: 45px; 
 
}

<div id="wrap"> 
 
    <button id="btn1" class="btn">btn1</button> 
 
    <button id="btn2" onclick="new pub().moveRight('btn2','60px')" class="btn">btn2</button> 
 
</div>

而且它将很好地工作。

来源

2015-09-14 07:05:11

您能告诉我如何将事件监听器合并到对象中吗？它会在对象的另一个变量下面出现吗？我认为现在是我出错的地方。谢谢 – dave

请看看我的编辑。 –

在使用对象以及它们之间的访问的内属性使用this 所以用于访问使用该

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

}(),

来源

2015-09-14 07:04:38 debatanu

您的button1是一项功能。因此你必须调用它来获得与id相对应的元素。或者，声明是这样的：现在

button1: document.getElementById('btn1')

，pub.button1通过ID btn1指按钮。您还可以使用揭示模块模式来仅显示公共接口并隐藏其余部分。

来源

2015-09-14 07:05:23

单独的 JavaScript和HTML是好样式。在一个对象，首先获得的元素：

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"), 
    ... 
}

那么就应该做一些功能。这个是指内的变量。

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

来源

2015-09-14 08:15:27 Sun

如何在对象中使用addEventListener

回答

相关问题