如何确定哪个元素触发了事件监听器？

时间：2016-06-09 07:24:23

标签： javascript html css

我在JS中创建了一个颜色选择器作为学习项目。我希望#screen显示按下的任何颜色。如何确定单击了哪个元素并将其颜色值发送到函数，以便screen.style.backgroundColor: object.style.backgroundColor;。

＆＃13;
＆＃13; 
var screen = document.getElementById("screen");
var col1 = document.getElementById("color1");
var col2 = document.getElementById("color2");
var col3 = document.getElementById("color3");
var col4 = document.getElementById("color4");
var col5 = document.getElementById("color5");
var col6 = document.getElementById("color6");
var col7 = document.getElementById("color7");
var col8 = document.getElementById("color8");
var col9 = document.getElementById("color9");
var colors = [col1, col2, col3, col4, col5, col6, col7, col8, col9];
var project = function(e) {
	console.log(e.srcElement.id.style.backgroundColor);
	var x = document.getElementById(e.srcElement.id);
	screen.style.backgroundColor = x.style.backgroundColor;
}
for(var i=0; i<10; i++) {
	colors[i].addEventListener("click", project);
}
＆＃13; 
#container, #screen {
    width: 180px;
	height: 180px;
	border: 1px solid black;
	margin-bottom: 10px;
}
.color {
	width: 60px;
	height: 60px;
	float: left;
	box-sizing: border-box;
}
#color1 {
	background-color: red;
}
#color2 {
	background-color: green;
}
#color3 {
	background-color: blue;
}
#color4 {
	background-color: yellow;
}
#color5 {
	background-color: fuchsia;
}
#color6 {
	background-color: aqua;
}
#color7 {
	background-color: orange;
}
#color8 {
	background-color: khaki;
}
#color9 {
	background-color: silver;
}
＆＃13; 
<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div id="container">
		    <div class="color" id="color1"></div>
		    <div class="color" id="color2"></div>
		    <div class="color" id="color3"></div>
		    <div class="color" id="color4"></div>
		    <div class="color" id="color5"></div>
		    <div class="color" id="color6"></div>
		    <div class="color" id="color7"></div>
		    <div class="color" id="color8"></div>
		    <div class="color" id="color9"></div>
		</div>
		<div id="screen"></div>
	</body>
	<script src="script.js"></script>
</html>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

由于你使用类来设置背景颜色，你可能需要设置className而不是backgroundColor，并将所有颜色移动到css类中。

var screen = document.getElementById("screen");
var col1 = document.getElementById("color1");
var col2 = document.getElementById("color2");
var col3 = document.getElementById("color3");
var col4 = document.getElementById("color4");
var col5 = document.getElementById("color5");
var col6 = document.getElementById("color6");
var col7 = document.getElementById("color7");
var col8 = document.getElementById("color8");
var col9 = document.getElementById("color9");
var colors = [col1, col2, col3, col4, col5, col6, col7, col8, col9];
for(var i=0; i<9; i++) {
    colors[i].addEventListener("click", function(e){
        screen.className = e.target.className;
    });
}
#container, #screen {
    width: 180px;
	height: 180px;
	border: 1px solid black;
	margin-bottom: 10px;
}
.color {
	width: 60px;
	height: 60px;
	float: left;
	box-sizing: border-box;
}
.color1 {
	background-color: red;
}
.color2 {
	background-color: green;
}
.color3 {
	background-color: blue;
}
.color4 {
	background-color: yellow;
}
.color5 {
	background-color: fuchsia;
}
.color6 {
	background-color: aqua;
}
.color7 {
	background-color: orange;
}
.color8 {
	background-color: khaki;
}
.color9 {
	background-color: silver;
}
	<body>
	    <div id="container">
		    <div class="color color1" id="color1"></div>
		    <div class="color color2" id="color2"></div>
		    <div class="color color3" id="color3"></div>
		    <div class="color color4" id="color4"></div>
		    <div class="color color5" id="color5"></div>
		    <div class="color color6" id="color6"></div>
		    <div class="color color7" id="color7"></div>
		    <div class="color color8" id="color8"></div>
		    <div class="color color9" id="color9"></div>
		</div>
		<div id="screen"></div>
	</body>

答案 1 :(得分：1)

您始终可以使用window.getComputedStyle方法。

首先，添加一个将从css表中获取计算样式的函数：

function test(event) {
  var target = event.target?event.target:event.srcElement;

  var style = window.getComputedStyle(target);
  alert(style.getPropertyValue("background-color"));
}

然后，使用＆＃34; color＆＃34;为每个元素添加一个事件监听器。类：

window.onload = function() {
  var colors = document.getElementsByClassName('color');
  for(var i=0;i<colors.length;i++) 
    colors[i].addEventListener('click', test,false);
}

它会在rgb（）中提醒您的颜色，至少在Firefox中。

答案 2 :(得分：0)

从传递的事件对象中获取单击的元素：

for(var i=0; i<10; i++) {
    colors[i].addEventListener("click", function(event) {
        alert(event.target.style.backgroundColor);
    });
}

答案 3 :(得分：0)

好吧，所以我为你做了这个小提琴。由于您使用css来定义背景，因此您应该通过对象的ID来识别颜色。

这是工作小提琴：

https://jsfiddle.net/6rq79taa/

所以这是以下代码：

<强> HTML： 

<body onload="load()">
<div id="container">
            <div class="color" id="color1"></div>
            <div class="color" id="color2"></div>
            <div class="color" id="color3"></div>
            <div class="color" id="color4"></div>
            <div class="color" id="color5"></div>
            <div class="color" id="color6"></div>
            <div class="color" id="color7"></div>
            <div class="color" id="color8"></div>
            <div class="color" id="color9"></div>
        </div>
        <div id="screen"></div>
    </div>
</body>

<强>的JavaScript 

function load() {
var screen = document.getElementById("screen");
var col1 = document.getElementById("color1");
var col2 = document.getElementById("color2");
var col3 = document.getElementById("color3");
var col4 = document.getElementById("color4");
var col5 = document.getElementById("color5");
var col6 = document.getElementById("color6");
var col7 = document.getElementById("color7");
var col8 = document.getElementById("color8");
var col9 = document.getElementById("color9");
var colors = [col1, col2, col3, col4, col5, col6, col7, col8, col9];

for(var i=0; i<colors.length; i++) {
    colors[i].addEventListener("click", colorName);
}
};

function colorName(event) {
    alert(event.currentTarget.id);
};

<强> CSS 

.color {
    width: 60px;
    height: 60px;
    float: left;
    box-sizing: border-box;
}
#color1 {
    background-color: red;
}
#color2 {
    background-color: green;
}
#color3 {
    background-color: blue;
}
#color4 {
    background-color: yellow;
}
#color5 {
    background-color: fuchsia;
}
#color6 {
    background-color: aqua;
}
#color7 {
    background-color: orange;
}
#color8 {
    background-color: khaki;
}
#color9 {
    background-color: silver;
}

答案 4 :(得分：0)

＆＃13;
＆＃13; 
function changecolor(colorname){
	document.getElementById("screen").style.backgroundColor = colorname;
	}
＆＃13; 
#container, #screen {
    width: 180px;
	height: 180px;
	border: 1px solid black;
	margin-bottom: 10px;
}
.color {
	width: 60px;
	height: 60px;
	float: left;
	box-sizing: border-box;
}
#color1 {
	background-color: red;
}
#color2 {
	background-color: green;
}
#color3 {
	background-color: blue;
}
#color4 {
	background-color: yellow;
}
#color5 {
	background-color: fuchsia;
}
#color6 {
	background-color: aqua;
}
#color7 {
	background-color: orange;
}
#color8 {
	background-color: khaki;
}
#color9 {
	background-color: silver;
}
＆＃13; 
<html>
    <head>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <div id="container">
          		    <div  class="color" id="color1" onclick='changecolor("red")'><a href="#"></a></div>
          		    <div  class="color" id="color2" onclick='changecolor("green")'><a href="#"></a></div>
          		    <div  class="color" id="color3" onclick='changecolor("blue")'><a href="#"></a></div>
          		    <div  class="color" id="color4" onclick='changecolor("yellow")'><a href="#"></a></div>
          		    <div  class="color" id="color5" onclick='changecolor("fuchsia")'><a href="#"></a></div>
          		    <div  class="color" id="color6" onclick='changecolor("aqua")'><a href="#"></a></div>
          		    <div  class="color" id="color7" onclick='changecolor("orange")'><a href="#"></a></div>
          		    <div  class="color" id="color8" onclick='changecolor("khaki")'><a href="#"></a></div>
                    <div  class="color" id="color9" onclick='changecolor("silver")'><a href="#"></a></div>
		</div>
		<div id="screen"></div><br/>
	</body>
	<script src="script.js"></script>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

基于＆＃34; Marcin O＆＃34;答案

＆＃13;
＆＃13; 
var screen = document.getElementById("screen");

for (var i = 1; i < 10; i++) {
  document.getElementById("color" + i).addEventListener("click", function() {
    var style = window.getComputedStyle(this);
    screen.style.backgroundColor = style.getPropertyValue("background-color");
  });
}
＆＃13; 
#container,
#screen {
  width: 180px;
  height: 180px;
  border: 1px solid black;
  margin-bottom: 10px;
}
.color {
  width: 60px;
  height: 60px;
  float: left;
  box-sizing: border-box;
}
#color1 {
  background-color: red;
}
#color2 {
  background-color: green;
}
#color3 {
  background-color: blue;
}
#color4 {
  background-color: yellow;
}
#color5 {
  background-color: fuchsia;
}
#color6 {
  background-color: aqua;
}
#color7 {
  background-color: orange;
}
#color8 {
  background-color: khaki;
}
#color9 {
  background-color: silver;
}
＆＃13; 
<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div class="color" id="color1"></div>
    <div class="color" id="color2"></div>
    <div class="color" id="color3"></div>
    <div class="color" id="color4"></div>
    <div class="color" id="color5"></div>
    <div class="color" id="color6"></div>
    <div class="color" id="color7"></div>
    <div class="color" id="color8"></div>
    <div class="color" id="color9"></div>
  </div>
  <div id="screen"></div>
</body>
<script src="script.js"></script>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题