JQuery - att koppla sig till händelser - Versionshistorik

PGJ: /* Direkta och delegerade händelsehanterare */

2019-01-12T21:06:03Z

Direkta och delegerade händelsehanterare

← Äldre version		Versionen från 12 januari 2019 kl. 21.06
Rad 127:		Rad 127:

	Vi skapar delegerade händelsehanterare genom att skicka med en selektor-sträng som anger vilka underelement som ska omfattas. Här är ett exempel:		Vi skapar delegerade händelsehanterare genom att skicka med en selektor-sträng som anger vilka underelement som ska omfattas. Här är ett exempel:
	<codepen pen="JGNgWr" tab="js" height="400">		<codepen pen="JGNgWr" tab="js,result" height="400">
	</codepen>		</codepen>

Rad 141:		Rad 141:
	=== Skillnad mellan vanlig bubbling och delegering ===		=== Skillnad mellan vanlig bubbling och delegering ===

	Vad är då skillnaden på att ha en delegerad händelsehanterare och att bara ha en vanlig hanterare som triggas av bubblande händelser. För det är ju som så att vår <code>div</code> faktiskt skulle nås av klickhändelserna ifrån knapparna även om vi inte hade med selektor-strängen. Om detta vore en vanliga hanterare skulle vi behöva göra mycket mer arbete. Främst skulle vi behöva hantera det faktum att alla typer av klick skulle trigga hanteraren, oavsett var vi klickar inuti <code>div</code>:en.		Vad är då skillnaden på att ha en delegerad händelsehanterare och att bara ha en vanlig hanterare som triggas av bubblande händelser. För det är ju som så att vår <code>div</code> faktiskt skulle nås av klickhändelserna ifrån knapparna även om vi inte hade med selektor-strängen. Om detta vore en vanliga hanterare skulle vi behöva göra mycket mer arbete. Främst skulle vi behöva hantera det faktum att alla typer av klick skulle trigga hanteraren, oavsett var vi klickar inuti <code>div</code>:en.


	== Mer om händelser ==		== Mer om händelser ==

PGJ: /* target */

2019-01-12T21:05:45Z

target

← Äldre version		Versionen från 12 januari 2019 kl. 21.05
Rad 71:		Rad 71:

	Vi gör om föregående exempel lite och skriver ut vad som genererade händelsen.		Vi gör om föregående exempel lite och skriver ut vad som genererade händelsen.
	<codepen pen="LGyKgW" tab="js" height="350">		<codepen pen="LGyKgW" tab="js,result" height="350">
	</codepen>		</codepen>

PGJ: /* pageX och pageY */

2019-01-12T21:05:30Z

pageX och pageY

← Äldre version		Versionen från 12 januari 2019 kl. 21.05
Rad 60:		Rad 60:

	Vi kör ett exempel där vi informerar om vilken position som användaren klickade på.		Vi kör ett exempel där vi informerar om vilken position som användaren klickade på.
	<codepen pen="qbmzYa" tab="js" height="350">		<codepen pen="qbmzYa" tab="js,result" height="350">
	</codepen>		</codepen>

PGJ: /* on */

2019-01-12T21:05:10Z

← Äldre version		Versionen från 12 januari 2019 kl. 21.05
Rad 5:		Rad 5:

	Vi börjar med ett kort exempel som kommer att göra så att en funktion körs varje gång användaren klickar på en knapp.		Vi börjar med ett kort exempel som kommer att göra så att en funktion körs varje gång användaren klickar på en knapp.
	<codepen pen="xZdQGx" tab="js" height="350">		<codepen pen="xZdQGx" tab="js,result" height="350">
	</codepen>		</codepen>

PGJ: /* event.preventDefault() */

2017-01-29T18:23:25Z

event.preventDefault()

← Äldre version		Versionen från 29 januari 2017 kl. 18.23
Rad 118:		Rad 118:
	=== <code>event.preventDefault()</code>===		=== <code>event.preventDefault()</code>===

	Om vi anropar <code>event.preventDefault()</code> kommer inte defaultbeteendet för elementeet att genomföras. Ett exempel på det skulle vara om vi har en händelsehanterare kopplad till <code>a</code>-element och vi kallar på <code>event.preventDefault()</code>, då skulle inte webbläsaren följa länkarna.		Om vi anropar <code>event.preventDefault()</code> kommer inte defaultbeteendet för elementeet att genomföras. Ett exempel på det skulle vara om vi har en händelsehanterare kopplad till <code>a</code>-element och vi kallar på <code>event.preventDefault()</code>, då skulle inte webbläsaren följa länkarna. Dock så kommer händelsen ifråga att bubbla vidare till andra händelsehanterare.

	== Direkta och delegerade händelsehanterare ==		== Direkta och delegerade händelsehanterare ==

PGJ: /* event.stopImmediatePropagation() */

2017-01-29T18:22:13Z

event.stopImmediatePropagation()

← Äldre version		Versionen från 29 januari 2017 kl. 18.22
Rad 115:		Rad 115:

	Samma sak händer faktiskt om ens händelsehanterare returnerar <code>false</code>. Dock är det ett gammalmodigt sätt att göra detta på. Så använd <code>event.stopImmediatePropagation()</code> om du vill stoppa händelsen ifrån att nå vidare.		Samma sak händer faktiskt om ens händelsehanterare returnerar <code>false</code>. Dock är det ett gammalmodigt sätt att göra detta på. Så använd <code>event.stopImmediatePropagation()</code> om du vill stoppa händelsen ifrån att nå vidare.


	=== <code>event.preventDefault()</code>===		=== <code>event.preventDefault()</code>===

PGJ: /* target */

2017-01-29T18:21:15Z

target

← Äldre version		Versionen från 29 januari 2017 kl. 18.21
Rad 68:		Rad 68:

	==== <code>target</code> ====		==== <code>target</code> ====
	Vi kan få ut vilket element som genererade händelsen. Detta kan vara ett underobjekt till det objekt som har händelsehanteraren. I vårt klickexempel ovan, så genereras händelsen faktiskt inte alltid direkt i <code>body</code>, utan i vissa fall är det sidans andra element som triggar igång händelsen. Händelsen "bubblar" sedan upp till elementets föräldrar (se mer nedan om "~~Hur händelser hanteras~~").		Vi kan få ut vilket element som genererade händelsen. Detta kan vara ett underobjekt till det objekt som har händelsehanteraren. I vårt klickexempel ovan, så genereras händelsen faktiskt inte alltid direkt i <code>body</code>, utan i vissa fall är det sidans andra element som triggar igång händelsen. Händelsen "bubblar" sedan upp till elementets föräldrar (se mer nedan om "Bubbling").

	Vi gör om föregående exempel lite och skriver ut vad som genererade händelsen.		Vi gör om föregående exempel lite och skriver ut vad som genererade händelsen.

PGJ: /* Hur hanteras händelser? */

2017-01-29T18:20:47Z

Hur hanteras händelser?

← Äldre version		Versionen från 29 januari 2017 kl. 18.20
Rad 97:		Rad 97:


	== ~~Hur hanteras händelser?~~ ==		== Bubbling ==

	Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.		Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.

PGJ: /* Avbryt "bubbling" */

2017-01-29T18:20:21Z

Avbryt "bubbling"

← Äldre version		Versionen från 29 januari 2017 kl. 18.20
Rad 101:		Rad 101:
	Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.		Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.

	== ~~Avbryt~~ "bubbling" ==		== Styrning av "bubbling" ==
	Ibland kanske man inte vill att en händelse ska bubbla vidare upp till ovanliggande element. Kanske man vill ersätta det "vanliga" beteendet med ett custom beteende och därför vill vara ensam om att hantera händelsetypen. Detta kan man åstadkomma genom att använda ett par sig av några metoder som är inbyggda i <code>event</code>-objektet.		Ibland kanske man inte vill att en händelse ska bubbla vidare upp till ovanliggande element. Kanske man vill ersätta det "vanliga" beteendet med ett custom beteende och därför vill vara ensam om att hantera händelsetypen. Detta kan man åstadkomma genom att använda ett par sig av några metoder som är inbyggda i <code>event</code>-objektet.

PGJ: /* Hur hanteras händelser? */

2017-01-29T18:19:54Z

Hur hanteras händelser?

← Äldre version		Versionen från 29 januari 2017 kl. 18.19
Rad 101:		Rad 101:
	Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.		Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp genom alla föräldraelement, ända upp till <code>body</code> och <code>document</code>. Detta innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanterare kanske gör helt olika saker.

			== Avbryt "bubbling" ==
	Ibland kanske man inte vill att en händelse ska bubbla vidare upp till ovanliggande element. Kanske man vill ersätta det "vanliga" beteendet med ett custom beteende och därför vill vara ensam om att hantera händelsetypen. Detta kan man åstadkomma genom att använda ett par sig av några metoder som är inbyggda i <code>event</code>-objektet.		Ibland kanske man inte vill att en händelse ska bubbla vidare upp till ovanliggande element. Kanske man vill ersätta det "vanliga" beteendet med ett custom beteende och därför vill vara ensam om att hantera händelsetypen. Detta kan man åstadkomma genom att använda ett par sig av några metoder som är inbyggda i <code>event</code>-objektet.