«Ба Гуа» :D

[JsConAp]

Всем привет.
Начал изучать события,дошел до главы про делегирование.
Есть следующий код http://learn.javascript.ru/play/tuto...gua/index.html
объясните пожалуйста для чего нужна 52 строка?Никак не могу въехать что она делает?Без нее вроде тоже работает??

[bes]

Всем привет.
Начал изучать события,дошел до главы про делегирование.
Есть следующий код http://learn.javascript.ru/play/tuto...gua/index.html
объясните пожалуйста для чего нужна 52 строка?Никак не могу въехать что она делает?Без нее вроде тоже работает??

не нужна, также как и while

<style>
#bagua-table th {
	text-align:center;
	font-weight:bold;	
}

#bagua-table td {
	width: 150px;
	white-space: nowrap;
	text-align:center;
	vertical-align: bottom;
	padding-top: 5px;
	padding-bottom: 12px;
}

#bagua-table .nw {
	background-color: #999;
}

#bagua-table .n {
	background-color: #03f;
	color: #fff;
}

#bagua-table .ne {
	background-color: #ff6;
}

#bagua-table .w {
	background-color: #ff0;
}
#bagua-table .c {
	background-color: #60c;
	color: #fff;
}
#bagua-table .e {
	background-color: #09f;
	color: #fff;
}

#bagua-table .sw {
	background-color: #963;
	color: #fff;
}

#bagua-table .s {
	background-color: #f60;
	color: #fff;
}
#bagua-table .se {
	background-color: #0c3;
	color: #fff;
}
</style>

<table id="bagua-table">
  <tr>
    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
  </tr>
  <tr>
    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders
    </td>
    <td class="n"><strong>North</strong><br>Water<br>Blue<br>Change
    </td>
    <td class="ne"><strong>Northeast</strong><br>Earth<br>Yellow<br>Direction
    </td>
  </tr>
  <tr>  
      <td class="w"><strong>West</strong><br>Metal<br>Gold<br>Youth
    </td>
    <td class="c"><strong>Center</strong><br>All<br>Purple<br>Harmony
    </td>
    <td class="e"><strong>East</strong><br>Wood<br>Blue<br>Future
    </td>
  </tr>
  <tr>  
      <td class="sw"><strong>Southwest</strong><br>Earth<br>Brown<br>Tranquility
    </td>
    <td class="s"><strong>South</strong><br>Fire<br>Orange<br>Fame
    </td>
    <td class="se"><strong>Southeast</strong><br>Wood<br>Green<br>Romance
    </td>
  </tr>
  
</table>

<script>
document.addEventListener("DOMContentLoaded", function () {
	var highlightedCell;
	document.getElementById('bagua-table').addEventListener("click", function (event) {
		var target = event.target;
		if ( target.nodeName == "TD" && highlightedCell != target) {
			target.style.background = "red";
			if ( highlightedCell ) {
				highlightedCell.style.background = "";
			}
			highlightedCell = target;
		}
	});
});
</script>

[bes]

обновил, добавив условие

&& highlightedCell != target

чтобы при повторном клике ячейка оставалась красной, вероятно, для этого там всё это и было

[рони]

JsConAp,
bes,
добавьте в ячейку картинку и добейтесь того же самого при клике на картинку без этой строки

[bes]

JsConAp,
bes,
добавьте в ячейку картинку и добейтесь того же самого при клике на картинку без этой строки

да, ты прав

[рони]

JsConAp,
цикл while проверяет является кликнутый элемент ячейкой или находится в ячейке (его пра пра ...предок ячейка)JsConAp,

[JsConAp]

JsConAp,
цикл while проверяет является кликнутый элемент ячейкой или находится в ячейке (его пра пра ...предок ячейка)JsConAp,

А для чего нужна 52 строка?

target = target.parentNode;

[JsConAp]

и почему если его убрать и нажимать на strong,то начинается зависание?

[рони]

JsConAp,

[laimas]

JsConAp, задача определить элемент источник события, для этого и перебирается дерево родителей, самым верхним который будет TABLE. А чтобы проверить всех родителей следующей итерации цикла присваивается следующий родитель:

target = target.parentNode