/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Tilføj event-handler på tag
Fra : Rune Jensen


Dato : 24-01-09 00:44

Jeg er i gang med et forsøg med unobtrusive scripting, hvilket jeg ikke
har prævet før.

Jeg starter i det små, og skal i første omgang have lavet et lille
test-script, som simulerer:

<p>Denne tekst er <span onclick="javascript:alert('du trykkede på
teksten')">klikbar</span></p>

Sådan at det i stedet ser ud som dette:

<p>Denne tekst er <span>klikbar</span></p>

men stadig virker med onClick. Alerten er ikke så vigtig, men det skal
helst være et eller andet, så man kan se, der sker noget, at det virker.

....Altså hvordan putter man sådan en eventhandler på udenfor HTMLen?
Jeg kan godt se, der vel må være en ID af en art?
Iøvrigt, så skal det hele vel startes med body onload, ikk?

Hvis nogen kan give svaret og/eller har et lignende lige så simpelt
eksempel liggende som ovenstående ville det være fantastik.


MVH
Rune Jensen

 
 
Henrik Stidsen (24-01-2009)
Kommentar
Fra : Henrik Stidsen


Dato : 24-01-09 02:11

Rune Jensen <runeofdenmark@gmail.com> wrote in
news:497a564f$0$24433$456a7185@news.cirque.dk:

> Hvis nogen kan give svaret og/eller har et lignende lige så simpelt
> eksempel liggende som ovenstående ville det være fantastik.

Hvis du googler "unobtrusive javascript" burde du få en overflod af howto´s
og eksempler der også vil fortælle dig hvordan det skal gøres. Der er
læsestof til mange dage.

--
Henrik Stidsen - http://henrikstidsen.dk/
http://fuglemarkedet.dk/ - Danmarks online fuglemarked!

Stig Johansen (24-01-2009)
Kommentar
Fra : Stig Johansen


Dato : 24-01-09 06:01

Rune Jensen wrote:

> Jeg er i gang med et forsøg med unobtrusive scripting, hvilket jeg ikke
> har prævet før.
>
> Jeg starter i det små, og skal i første omgang have lavet et lille
> test-script, som simulerer:
>
> <p>Denne tekst er <span onclick="javascript:alert('du trykkede på
> teksten')">klikbar</span></p>
>
> Sådan at det i stedet ser ud som dette:
>
> <p>Denne tekst er <span>klikbar</span></p>
>
> men stadig virker med onClick. Alerten er ikke så vigtig, men det skal
> helst være et eller andet, så man kan se, der sker noget, at det virker.
>
> ...Altså hvordan putter man sådan en eventhandler på udenfor HTMLen?
> Jeg kan godt se, der vel må være en ID af en art?
> Iøvrigt, så skal det hele vel startes med body onload, ikk?
>
> Hvis nogen kan give svaret og/eller har et lignende lige så simpelt
> eksempel liggende som ovenstående ville det være fantastik.

Jeg har for nylig fedtet med noget javascript, som indeholder de ting du
spørger om + lidt mere.

Jeg har valgt at citere det hele i stedet for at bytte om på teksten.

For at tage det fra en ende af, så ja, scriptet skal startes med en body
onload. For at lave disse ting, skal DOM'en være bygget, hvilket den først
er færdig med, når al HTML'et er parset.

Men til eksemplet her:
<http://w-o-p-r.dk/notes/viewexample.html>
tilhørende javascript:
<http://w-o-p-r.dk/javascript/notes.view.js>

så er den startende funktion denne her i onload : initiate_table('mainview')
her overfører jeg 'mainview' som id til funktionen, men man kan ligeså godt
hardcode id'en i selve scriptet, hvis man vil det.
Så - jo, din <span> skal have en id for at finde den.

Selve noden finder du med document.getelementbyid.
Hvis vi kalder din variabel for newtd, altså
var newtd = document.getElementById(<din_id>) ;

så burde de samme linier kunne genbruges:
.....
if ( newtd.addEventListener ) {
newtd.addEventListener ('mousedown',toggle_rows,false) ;
} else {
newtd.onmousedown = toggle_rows ;
}
.....
her har jeg brugt mousedown, men man kan også bruge mouseup - begge events
'fyres' når man klikker med musen.

toggle_rows er den funktion, der skal kaldes ved 'OnClick'.

Af hensyn til brugerne, skal man huske at vise, at den er klikbar med:
newtd.style.cursor = 'pointer' ;

Der var vist et eller andet engang med nogle browsere brugte 'hand', men det
er uden for min viden.

Funktionen toggle_rows kan du se i .js filen, og hvis du skal bruge target i
dit javascript, er der (som sædvanlig) noget IE specifik kode.

Hvis du blot skal lave en alert, behøver du kun den ene linie.

Men ellers Rune - det er god karma at lægge et eksempel på nettet, og angive
et link ;)

--
Med venlig hilsen
Stig Johansen

DADK (24-01-2009)
Kommentar
Fra : DADK


Dato : 24-01-09 06:30

Rune Jensen wrote:
> Jeg er i gang med et forsøg med unobtrusive scripting, hvilket jeg
> ikke har prævet før.

Ja, du prøvede at fortælle mig hvad "unobtrusive scripting" var - har stadig
ikke forstået fordelen.

> ...Altså hvordan putter man sådan en eventhandler på udenfor HTMLen?

meget nemt, lad os sige det er PHP {følgende er aldeles utestet, men det
burde virke}

echo "<script>";
echo "function alert() {";
echo "alet('test');";
echo "} ";
echo "</script>";

eller naturligvis bedre <script>function alert() { alert('test");}</script>

I dit eksempel må det være

<script>function click() { alert('der er clicket;');}</script>

<p onClick='click();'>Denne tekst er <span>klikbar</span></p>

> Jeg kan godt se, der vel må være en ID af en art?

Nej, der er nogle elementer der responderer på onClick, og andre der ikke
gør - og det er forskelligt fra browser til browser. Der er elementer feks i
IE, der slet ike burde respondere, og så kan man jo blive narret, og tro det
gælder i alle.

Men hvad vil du opnå? Det viser sig jo, at i mange tilfælde findes der et
HTML-tag folk ikke er opmærksomme på, hvor de kan bruge ren HTML i stedet
for javascript.

> Iøvrigt, så skal det hele vel startes med body onload, ikk?

Nej, som udgangspunkt aldrig - kun hvis du har brug for noget helt
specifict, der starter op efter siden er rendereret. <script>...vil blive
afviklet, når browseren støder på det.

> Hvis nogen kan give svaret og/eller har et lignende lige så simpelt
> eksempel liggende som ovenstående ville det være fantastik.

tja

<script function dinGamleRoever() { alert 'din gamlec røver');}</script>
<div onClick='dinGamleRoever();'
style='background-color:darkslategrey';>oksehud</div>




Rune Jensen (24-01-2009)
Kommentar
Fra : Rune Jensen


Dato : 24-01-09 12:19

DADK skrev:

> Ja, du prøvede at fortælle mig hvad "unobtrusive scripting" var - har stadig
> ikke forstået fordelen.

Det er korrewkt, det er ikke altid en fordel, som Birger skriver et sted.

Men grundlæggende svarer det til forskellen på inline CSS-styles og at
lægge CSS i style sheets i ekstern fil.

Med unobtrusive JS kan du ved grnbrug, f.eks. på en drop down menu,
nøjes med at rette ét sted. En onclick i selve HTMLen er obtrusive, den
invaderer HTMLen, ligesom inline CSS gør det. Hvis du vil flytte eller
rette den, så kræver det du retter i HTML, ikke i JS, og det skal så
gøres på hver HTML-side. Det behøver man ikke med unobtrusive scripting,
da JSen slet ikke findes indenfor <body> og </body>. Det er to helt
forskellige lag. Man kan dog i visse tilfælde behøve en class eller en
ID, hvis ikke man kan bruges selve TAGet - har jeg så fundet ud af (se
også Stigs svar).

Birger skriver tidligere, det kan være svært at overskue, og der må jeg
give ham ret, selv om jeg kun er begynder - det er en lidt anden måde at
tænke på. Derfor skal man måske i hvert fald i starten holde sig til det
simple - hvilket jeg så prøver.

>> ...Altså hvordan putter man sådan en eventhandler på udenfor HTMLen?
>
> meget nemt, lad os sige det er PHP {følgende er aldeles utestet, men det
> burde virke}
>
> echo "<script>";
> echo "function alert() {";
> echo "alet('test');";
> echo "} ";
> echo "</script>";
>
> eller naturligvis bedre <script>function alert() { alert('test");}</script>
>
> I dit eksempel må det være
>
> <script>function click() { alert('der er clicket;');}</script>
>
> <p onClick='click();'>Denne tekst er <span>klikbar</span></p>

Det ligner ikke unobtrusive scripting, men mere hvordan man laver en
function, det kan jeg godt;)... normalt blander man ikke serverside og
clientside. JSen skal ligge uden for HTMLen også. Det gælder også onclick.

>> Jeg kan godt se, der vel må være en ID af en art?
>
> Nej, der er nogle elementer der responderer på onClick, og andre der ikke
> gør - og det er forskelligt fra browser til browser. Der er elementer feks i
> IE, der slet ike burde respondere, og så kan man jo blive narret, og tro det
> gælder i alle.

Jeg har nu set det virke, så derfor kan jeg se fordelene. Man kan så
behøve en ID eller class alt efter funktion. Mit eksempel... Der skal
sættes en onclick via en eventhandler på et tag, men det skal gøres
udenfor HTMLen. Princippet jeg set virke før, men i en del mere
avancerede scripts, som jeg ikke forstod. Derfor spørger jeg til et
meget simpelt eksempel i stedet. Man er jo nødt til at kravle før man
kan gå;)

> Men hvad vil du opnå? Det viser sig jo, at i mange tilfælde findes der et
> HTML-tag folk ikke er opmærksomme på, hvor de kan bruge ren HTML i stedet
> for javascript.

Det handler netop om, at man med JS lægger ekstra funktioner på, som
ikke kan laves med HTML eller CSS, at disse ikke lægges i HTMLen, og at
det stadig virker uden JS. Mit eksempel er netop et eksempel, ikke hvad
det skal være, når det er færdigt.

>> Iøvrigt, så skal det hele vel startes med body onload, ikk?
>
> Nej, som udgangspunkt aldrig - kun hvis du har brug for noget helt
> specifict, der starter op efter siden er rendereret. <script>...vil blive
> afviklet, når browseren støder på det.

Det lyder som om du stadig snakker inline scripting... I hvert fald i
forhold til Stigs svar?

>> Hvis nogen kan give svaret og/eller har et lignende lige så simpelt
>> eksempel liggende som ovenstående ville det være fantastik.
>
> tja
>
> <script function dinGamleRoever() { alert 'din gamlec røver');}</script>
> <div onClick='dinGamleRoever();'
> style='background-color:darkslategrey';>oksehud</div>

Jeg vil ikke så gerne have hverken JSen eller stylen i selve HTMLen som
inline. Det er vidst det, det handler om;)


MVH
Rune Jensen

Christian Hansen (24-01-2009)
Kommentar
Fra : Christian Hansen


Dato : 24-01-09 15:56

Rune Jensen wrote:
> Jeg er i gang med et forsøg med unobtrusive scripting, hvilket jeg ikke
> har prævet før.
>
> Jeg starter i det små, og skal i første omgang have lavet et lille
> test-script, som simulerer:
>
> <p>Denne tekst er <span onclick="javascript:alert('du trykkede på
> teksten')">klikbar</span></p>
>
> Sådan at det i stedet ser ud som dette:
>
> <p>Denne tekst er <span>klikbar</span></p>


Du skal først og fremmest lave dig en funktion, der kan tilføje
event-handlere - dette gøres nemlig forskelligt i IE og alle andre browsere.

Den kunne se således ud :

function addEventHandler(o, eventname, functionname) {
try {
o.addEventListener(eventname,functionname, false);
} catch(e) {
o.attachEvent('on' + eventname,functionname);
}
}

Så skal du fange din span på en eller anden måde. I dit eksempel er der
intet, som umiddelbart adskiller din span fra andre spans i dokumentet -
udover måske dens innerHTML. Du kan derfor vælge at give den en klasse,
som eksempelvis hedder "klik" eller en id, hvis det kun er denne ene
span, der skal være aktiv.

Nu antager jeg, at du kun har en eneste span i dit dokument. Så tilføjes
onclickhandleren med koden:

var span = document.getElementsByTagName("span")[0]; //hent den første
forekomst af span i dokumentet.
addEventHandler(span,"click",function() { alert("Du klikkede på mig); });

Det kan være en fordel at tilføje eventhandlere når documentets onload
fyres, da du så er sikker på at hele dokumentet er indlæst i browseren.

Det kan let gøres med følgende:

addEventHandler(window,"load",function() {
var span = document.getElementsByTagName("span")[0];
addEventHandler(span,"click",function() { alert("Du klikkede på
mig); });
});


Jeg har skrevet en artikel om hvorfor man anvender unobstrusive
javascript her :
http://www.resource-it.dk/forside/artikler/unobtrusivejavascript/ - der
er også live eksempler.

Mvh Christian

--
Christian Hansen
http://www.resource-it.dk/

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408926
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste