PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Mit JS Divs ansprechen - mal anders


Gast
2009-03-16, 11:26:10
Hi!
Hab bisher immer via onclick, onmousedown,... im DIV-Tag gearbeitet zum diese ansprechen (<DIV onClick="blub()">). Nun scheint es aber eine andere Möglichkeit zu geben, in dem man dem DIV nur ein CLASS und/oder ID verpasst (<DIV class="x" ID="y">) und alles andere im Scriptheader (<HEAD><SCRIPT>document.onclick=..) erledigt wird. Was bei grösseren Mengen an DIV's ja durchaus Sinn machen täte. Mit dem onClick im Scriptheader hab ich soweit hinbekommen.

Nun die Frage:
Jetzt muss ich dem Script aber sagen, welches DIV ich ansprechen möchte. Wie stelle ich das an? Das ich auf das DIV klicke und er weiss, welche CLASS bzw ID es besitzt?

Kinman
2009-03-16, 12:11:34
So macht man es vernüftig: http://www.mediaevent.de/javascript/event_listener.html oder mit etwas weniger Aufwand aber "unschöner"


document.getElementById('mydiv').onclick = Funktionsname;

Wobei hier zu beachten wäre, dass das DIV bereits existieren muss.

mfg Kinman

Gast
2009-03-16, 13:00:48
Hmm dein Beispiel setzt aber vorraus, das man den Namen des DIVs kennt - wenn ichs richtig verstanden habe..
Ein Beispiel:
Habe 2Divs:
<DIV ID="x"><IMG SRC=""></DIV><P>
<DIV ID="y"><IMG SRC=""></DIV>
und möchte beim klicken auf eines der DIVs das entsprechende z.B. verstecken. Das verstecken ist ja kein Problem. Aber woher weiss das Script im Header, welches Bild mit welcher ID ich angeklickt habe?! Wenn ich es mit <DIV onclick="this. ..."> mache ist klar welches Element er verstecken muss.
Du scheinst da aber schon ein festen Wert 'mydiv' zugewiesen zu haben oder versteh ich da was falsch??

Kinman
2009-03-16, 16:33:05
Achso.. da habe ich dich falsch verstanden. Ja, bei dem oben genannten Script musst du die ID wissen. Aber ließ dir mal das zu Eventhandler durch. Ich glaube das durchreichen der Events ist auch Browserabhängig.

mfg Kinman

Gast
2009-03-16, 16:42:40
Was ich als Reference genommen habe war folgende Page:
http://www.webreference.com/programming/javascript/mk/column2/3.html
Da sind die DIVs ja auch nur so angeschrieben und besitzen kein onclick.. in sich sondern im Header:
<div class="DragBox" id="Item1" overClass="OverDragBox" dragClass="DragDragBox">Item #1</div>
Aus dem Script oben werd ich aber nicht schlau, woher das Script weiss, welches DIV ich angeklickt habe und er verschieben soll..
Macht der das in Zeile 65? Habs eben mal selber probiert, aber irgendwie funktioniert es nicht :p Mein englisch ist nicht das beste aber ich denke das "We are setting target to whatever item the mouse is currently on" eben das ist was ich suche oder nicht?!?!

Kinman
2009-03-16, 17:13:58
Genau aus dem Event-Object (ev) wird das ausgelesen. Hast Du es mit verschiedene Browser getestet?

mfg Kinman

DanMan
2009-03-16, 19:56:25
Zu Fuß macht man das sowieso nicht mehr, um Browserunterschieden aus dem Weg zu gehen, und sich auf die eigentliche Arbeit konzentrieren zu können. Darum benutzt man eine JS Library, wie z.B. in der einfachsten und kleinsten Form DOM Assistant (http://www.domassistant.com/).
Letztendlich läufts dann immer auf sowas in der Art raus:
$("#container").addEvent("click", function (){
this.setStyle({
display: 'none'
});
});
Das würde das Element mit der id "container" ausblenden, wenn du irgendwo (also auch auf Kindelemente) draufklickst.

Wenn du nur auf das document einen sog. Event-Listener setzen willst, dann musst du den Event nach seinem Ursprung fragen. Also in der Art:
$(document).addEvent("click", function (event){
if (event.target.id = 'container') {
event.target.setStyle({
display: 'none'
});
}
});
Wenn du dich dafür eintscheidest sollte Event Bubbling und Event Capturing kein Fremdwort für dich sein. Das eine wandert den DOM-Tree rauf, das andere runter. Dazwischen kann der Klick auch einen anderen click-Event auslösen, darauf gilt es also auch zu achten.