Question

好的，我有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript index</title>
</head>
<body id="body">
<p id="para">Hello I am Sam</p>

<script>
"use strict";

var element = document.getElementById("para");

element.addEventListener( "click", function(color){
    this.style.backgroundColor = color;
}, false );


</script>
</body>
</html>

我的主要问题是关于：

element.addEventListener( "click", function(color){
    this.style.backgroundColor = color;
}, false );

有没有办法动态传递颜色或是否必须进行硬编码？

Answer 1

一种解决方案是使用命名函数添加像

这样的处理程序

function addClickHandler(element, color) {
    element.addEventListener("click", function (e) {
        this.style.backgroundColor = color;
    }, false);
}

然后

addClickHandler(element, 'red')

Answer 2

另一种解决方案是使用合成并使用一个返回处理程序的函数。

function createHandler( color) {
    return function (e) {
        this.style.backgroundColor = color;
    };
}

element.addEventListener( "click", createHandler('red'), false );

或者我认为所有解决方案中最优雅的是Function.bind

function clickHandler(color, e) {
  this.style.backgroundColor = color;
}

var divs = document.getElementsByTagName('div');
var colors = ['blue', 'red', 'gray'];
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', clickHandler.bind(divs[i], colors[i]), false);
}

div {
  height: 100px;
  width: 100px;
  border: 1px solid firebrick;
  display: inline-block;
  margin: 5px;
}

<div></div>
<div></div>
<div></div>

JavaScript DOM addeventlistener传递参数

2 个答案: