Javascript events addEventListener

Althalos · 2008-12-08, 17:14

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?

grazzy · 2008-12-08, 17:30

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

Kruger · 2008-12-08, 17:34

.. hmm... blev lite fel..

Althalos · 2008-12-08, 17:56

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

stakes · 2008-12-08, 18:20

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.
}

Althalos · 2008-12-08, 18:22

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...

Silodon · 2008-12-08, 18:23

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>

Althalos · 2008-12-08, 18:25

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

Silodon · 2008-12-08, 18:28

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>

Althalos · 2008-12-08, 18:33

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...

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

Javascript events addEventListener