JavaScript DOM addeventlistener передача В параметре

ОК у меня есть:JavaScript DOM addeventlistener передача В параметре

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

Есть ли способ, чтобы динамически передать в цвете или же он должен быть жестко закодированный?

источник

2015-03-10 Robert Rocha

как вы хотите передать цвет .. есть это в момент регистрации событий или фактический щелчок –

Одним из решений является использование имени функции, чтобы добавить обработчик как

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

затем

addClickHandler(element, 'red')

источник

2015-03-10 03:05:21

Спасибо. И могу ли я сказать красиво, используя закрытие. –

Другим решением является использование композиции и имеют функцию, которая возвращает обработчик.

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>

источник

2015-03-10 03:49:07

Красиво сделано! @juan mendes. Мои навыки и понимание в JavaScript и закрытии только выросли на 10%. –

@samyismyhero Поскольку вы изучаете JavaScript, я добавил еще один пример, который еще более абстрагирован, и, IMO, намного круче. –

JavaScript DOM addeventlistener передача В параметре

ответ

Смежные вопросы