如何在对象中使用addEventListener
[英]How to use addEventListener within an object
问题描述
I am trying to use addEventListener within an javascript object and my code is not correct. 
我正在尝试在JavaScript对象中使用addEventListener ，但是我的代码不正确。 To be honest, I'm not entirely sure how to code this correctly. 老实说，我不完全确定如何正确编写此代码。 As it stands, 'button1' is not recognised when i try to define the addEventListener. 就目前而言，当我尝试定义addEventListener时，无法识别“ button1”。 Please could someone advise? 有人可以请教吗？
HTML 的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>
My JS : 我的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;
}
};
4 个解决方案
解决方案1
0 2015-09-14 07:04:38
While using objects and accessing the inner properties among themselves use this so for accessing use this 在使用对象并访问内部属性时，请使用this属性，以便在访问时使用此属性
btn1EventHandler: function(){
this.button1.addEventListener('click', function(){
this.changeColor('btn1', '#33FFFF');
});
}(),
解决方案2
0 已采纳 2015-09-14 07:05:11
In your actual code button1 is just a function, and you can't add event listener on a function. 在您的实际代码中， button1只是一个函数，您不能在函数上添加事件侦听器。
You should call this function and store its result on an object, then you will be able to addEvenetListener on it, for example: 您应该调用此函数并将其结果存储在一个对象上，然后就可以在其上添加addEvenetListener ，例如：
EDIT: 编辑：
I recommend that you declare your pub object as a module and then give it its attributes and functions. 我建议您将pub对象声明为模块 ，然后为其提供属性和功能。
This is a demo snippet: 这是一个演示代码段：
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>
And it will work perfectly. 它会完美地工作。
解决方案3
0 2015-09-14 07:05:23
Your button1 is a function. 您的button1是一个功能。 Hence you have to call it to get the element corresponding to the id. 因此，您必须调用它以获取与id对应的元素。 Or, declare like this : 或者，这样声明：
button1: document.getElementById('btn1')
Now, pub.button1 refers to the button by id btn1 . 现在， pub.button1通过id btn1引用按钮。 You could also use the revealing module pattern to reveal only the public interface and hide the rest of it. 您还可以使用显示模块模式来仅显示公共接口并隐藏其余接口。
解决方案4
0 2015-09-14 08:15:27
It is good style to separate JavaScript and HTML. 分隔 JavaScript和HTML是很好的样式。 In an object, first get the elements: 在对象中，首先获取元素：
var obj = {
btn1: document.getElementById("btn1"),
btn2: document.getElementById("btn2"),
...
}
Then the functions that should do something: 然后应该做的功能：
var obj = {
btn1: document.getElementById("btn1"),
btn2: document.getElementById("btn2"),
...
changeBgColor: function(id, bgColor) { ... },
moveRight: function(id, width) { ... },
...
}
And at last add the click event to the specific button with this . 最后，使用this将click事件添加到特定按钮。 This refers to the variable within . 这是指内部的变量。
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();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.