WN - Javascript events addEventListener

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Javascript events addEventListener (https://www.wn.se/forum/showthread.php?t=33817)

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

 <meta http-equiv="content-type" content="text/html" charset="iso-8859-1">

 <meta name="generator" content="">

 <title></title>

 <link rel="stylesheet" type="text/css" href="style.css" />  

 <script src="jquery-1.2.6.min.js"></script>  

 <script language='javascript'>

var element = document.getElementById('clickable');

element.addEventListener('click',function () {

        alert('test');

},false)

 </script>

 </head>

 <body>

  <div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>

  <div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>

 </body>

</html>

Jag har aldrig använt addEventListener förut men jag försöker lura ut vad jag göra fel. Skulle någon kunna säga mig varför ovanstående inte fungerar?

En snabb gissning: du har inget semicolon på slutet?

.. hmm... blev lite fel..

Nope.. verkar inte var det som är felet. Ändrat det nu dock, naturligtvis inte så det ska vara.

Nu är det ju inte det du frågar efter, men du ser ut att använda jQuery?

Isåfall är det inte svårare än så här:

$("#clickable").click(function(){

alert("hej");

});

Annars är det nog så att DOM inte har laddat färdigt, dvs alla html element, prova att lägga ditt javascript efter body elementet.

I jQuery finns en funktion som kolllar när DOM är färdigladdat:

$(document).ready(function() {
din kod här.
}

Ja men jag försöker göra det utan Jquery, jquery är en kvarleva ifrån en annan sida jag kopierade.. srry.

edit: faktum är att jag försöker fundera hur Jquery gör för jag tkr det är så himla bra. Och eventlistener är min gissning på hur detta sker...

Du behöver invänta att sidan laddats klart, följande löser detta:

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

 <meta http-equiv="content-type" content="text/html" charset="iso-8859-1">

 <meta name="generator" content="">

 <title></title>

 <link rel="stylesheet" type="text/css" href="style.css" /> 

 <script src="jquery-1.2.6.min.js"></script> 

 <script language='javascript'>

 $(document).ready(function() {

 var element = document.getElementById('clickable');

        element.addEventListener('click',function () {

        alert('test');

        },false);

 });

 </script>

 </head>

 <body>

 <div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>

 <div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>

 </body>

</html>

Man kan dock undra varför du inte använder jQuerys egna funktioner för att välja element, när du ändå har laddat in jQuery? :)

Tex.:

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

 <meta http-equiv="content-type" content="text/html" charset="iso-8859-1">

 <meta name="generator" content="">

 <title></title>

 <link rel="stylesheet" type="text/css" href="style.css" /> 

 <script src="jquery-1.2.6.min.js"></script> 

 <script language='javascript'>

$(document).ready(function() {

        $("#clickable").click(function() {

 alert('test');

        });

});

 </script>

 </head>

 <body>

 <div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>

 <div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>

 </body>

</html>

Thx. Nu vet jag iallafall vad som är fel, men finns det någon motsvarighet till $(document).ready i ren javascript? vill kunna göra det både med och utan jquery

Snabblösning:

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

 <head>

 <meta http-equiv="content-type" content="text/html" charset="iso-8859-1">

 <meta name="generator" content="">

 <title></title>

 <link rel="stylesheet" type="text/css" href="style.css" /> 

 <script src="jquery-1.2.6.min.js"></script> 

 <script language='javascript'>

 function load() {

var element = document.getElementById('clickable');

element.addEventListener('click',function () {

alert('test');

},false);

}

 </script>



 </head>

 <body onload="load();">

 <div style='width:150px;height:30px;background-color:#B3B3B3;margin:0px auto;' id='clickable'>Slide Up</div>

 <div style='width:150px;height:300px;background-color:#A3A3A3;margin:0px auto;' id='thebox'></div>

 </body>

</html>

Tack återigen det är schysst. Men går det att göra helt unobtrusive d.v.s. executa ifrån script-taggen? Jag är lite kräsen nu, men jag har ett speciellt ändamål...

Jovisst lägg bara till window.onload=load; i slutet av scriptet.

1. addEventListener fungerar inte i IE (stödet för javaskript även i IE7 är fortfarande ganska klent). För IE måste du använda attachEvent.

2. Det är bättre att använda addEventListener som är DOM3-standard (och IE:s egna motsvarande påhitt) än att lägga "händelselyssnarna" på taggar eller med exempelvis window.onload (fördelen är bland annat att man kan ha flera "händelser" av samma sort på ett element).

En slumpvis vald googlad länk om det hela