JavaScript DOM addeventlistener pass paramater

JavaScript DOM addeventlistener pass paramater

本文关键字：paramater pass addeventlistener DOM JavaScript      更新时间：2023-09-26

>好的，我有：

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

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

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

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

然后

addClickHandler(element, 'red')

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

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>

相关文章：