Воҳидгузории рӯйдодҳо дар JavaScript

Дар дарси қабл мушкилие, ки ҳангоми илова кардани унсурҳои нав ба миён меояд, тавсиф шуда буд ва ҳалли он оварда шуд. Дар ин дарс мо равиши беҳтареро барои ҷӯрабии мушкилӣ баррасӣ мекунем - воҳидгузории рӯйдодҳо. Биёед онро таҳлил кунем.

Чунонки аллакай медонед, клик кардан ба li, мо ҳамзамон клик карда истодаем ба ul. Ин ба воситаи бол омадани (bubbling) рӯйдодҳо имконпазир аст. Мо метавонем инро барои ҳалли вазифаи худ истифода барем: рӯйдодро ба ҳар як li насб накунем, балки ба соҳиби онҳо ul насб кунем:

list.addEventListener('click', function() {
	
});

Ҳоло дар коркардигари рӯйдод this ба унсур ишора мекунад, ки коркардигар ба он пайваст аст, ва event.target - ба унсуре, ки рӯйдод дар он рух додааст:

list.addEventListener('click', function(event) {
	console.log(this);         // рӯйхати мо
	console.log(event.target); // ҷузъи рӯйхат
});

Биёед ҳамчунон кунем, ки li, ки клик дар он рух додааст, ба охир аломати ситоиш (-и) илова карда шавад:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Ҳалли овардашударо такрор кунед. Боварӣ ҳосил кунед, ки li-ҳои нав низ ба клик вокуниш нишон медиҳанд.