Event-objektet og event-bubbling

Innhold

Ingen crossbrowser-issues og implementasjoner inne i $() wrapperen.

Utnytt event bubbling med event delegation!

PPK (quirksmode.org) on memory leaks:

As long as you’re using event delegation, it’s practically not a problem.

Funker greitt:

	$('#myList li').bind('click', function(){
		$(this).addClass('clicked');
		// do stuff
	});
Men detta er konge!!!!
	$('#myList2').bind('click', function(e){
	var target = e.target, 
		$target = $(target);  
	if (target.nodeName === 'LI') {
		$target.addClass('clicked2');
		// do stuff
	}
	});

Hva skjer hvis vi legger til flere elementer i listen?

Alternativer:

Oppgave

Legg til en live() event på alle lenker med className noNav, som kopierer hele noden til rett etter den lenken som klikkes.

Den nye lenken skal også kunne benytte samme eventet.

Custom events i jQuery

	$('h2').bind('click.unique', function(event){ 
		console.log('event.target:' + event.target.innerHTML);
		console.log('namespace:' + event.namespace);
	});
	$('h2').click(function (event) {
		$(this).trigger('click.unique');
	});

For å hindre at eventen 'bubbler' opp i treet, kan en f.eks. for custom events bruke event.stopPropagation()

Oppgave

Bruk delegate() til å lage en klikkevent på en av listene på siden. Du skal så fange opp event.target for elementet som ble klikket og skrive det til konsollen.

Vanilla

	var navigation = document.getElementById("myList3");
	navigation.onclick = function (evt) {
	  	// IE window.event...
		var event = evt || window.event;
		var target = event.target || event.srcElement;
		target.className = 'clicked3'
		return false;
	}