JavaScript DOM addeventlistener传递参数[重复]答案

【问题标题】：JavaScript DOM addeventlistener pass paramater [duplicate]JavaScript DOM addeventlistener传递参数[重复]
【发布时间】：2015-03-10 03:00:43
【问题描述】：

好的，我有：

<!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 );

有没有办法动态传递颜色还是必须硬编码？

【问题讨论】：

你想怎么传颜色..是在事件注册的时候还是实际点击的时候

标签： javascript

【解决方案1】：

一种解决方案是使用命名函数来添加处理程序，例如

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

然后

addClickHandler(element, 'red')

【讨论】：

谢谢。我可以说使用闭包做得很好。

【解决方案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 和闭包方面的技能和理解力提高了 10%。
@samyismyhero 由于您正在学习 JavaScript，我添加了另一个更抽象的示例，而且 IMO 更酷。