addEventListenerがforループ内で意図しない動作しています

Question

JSでカレンダー/スケジュールを作成しようとしていますが、addEventListenerはスケジュールされたイベントで使用され、同じイベントIDを返します。

これは、現時点で私が持っている機能である：

monthStart = date.clone().subtract(1, 'months').endOf 'month' 
monthEnd = parseInt date.clone().endOf('month').format 'DD' 
daysContainer = @createElement 'div', 'calendar__days' 

for i in [1..monthEnd] 
    day = monthStart.add 1, 'day' 
    current = day.format 'DD-MM-YYYY' 

    line = @createElement 'div', 'calendar__line' 
    line.classList.add 'line--today' if current == @current.format 'DD-MM-YYYY' 

    header = @createElement 'div', 'line__header' 
    header.appendChild @createElement 'h1', 'line__date', day.format 'DD' 
    header.appendChild @createElement 'span', 'line__day', day.format 'dd' 
    events = @createElement 'div', 'line__events' 

    events_data = @parseEventsPerDay current 
    for event in events_data 
    event_block = @createElement 'div', 'event' 
    x = event.id 
    event_block.addEventListener 'click', => console.log event.id <<---------- this line returns always the same id 
    event_container = @createElement 'div', 'event__container' 
    event_block.appendChild @createElement 'div', 'event__bbg' + ' ' + @resolveColor 'bg', event.type 
    event_container.appendChild @createElement 'div', 'event__timeinterval', event.timeStart + ' - ' + event.timeEnd 
    event_container.appendChild @createElement 'div', 'event__content' + ' ' + @resolveColor('link', event.type), event.title 

    event_block.appendChild event_container 
    events.appendChild event_block 

    line.appendChild events 
    line.appendChild header 
    line.appendChild events 
    daysContainer.appendChild line 

@el.appendChild daysContainer 

はまた、プロジェクト全体の任意のアイデア、ヒント、チュートリアルでは、私のコードのために、歓迎されています。

Answer 1

@robisebはコメントに記載されているように、現在のイベントがグローバル変数ではなくループのクロージャ内のローカル変数であることを保証するためにクロージャを使用する必要があります。

閉鎖の詳細については、see this questionを参照してください。

Coffeescriptはこれを簡単にするためにdoというキーワードを提供しています。 loops and comprehensions coffee docsの最後の例を参照してください。

for event in events_data 
    do(event) -> 
    event_block = @createElement 'div', 'event' 
    x = event.id 
    event_block.addEventListener 'click', => console.log event.id 
    . 
    . 
    .