[JS]javascript create div geeft geen onmousedown event IE

[Jochemmol]

Ik heb een script dat met javascript een div maakt.
Dit werkt perfect in FF en IE.
Nu heb ik een ander script dat bij een onmousedown (op de div) de geselecteerde div insteld in een var object. Door dit te doen kan ik eigenschappen van deze div wijzigen.

bv de style.display. Ik kan dan een button maken die de display block or none zet. Doordat ik eerst de gewenste div selecteer 'weet de button' welke div er zichtbaar/onzichtbaar moet worden.

code:

function createDiv()
divHandle = document.createElement("div");
divHandle.setAttribute('id','Div');
divHandle.setAttribute('name','Div');   

divHandle.setAttribute('onmousedown','setObject(this)');

var body = document.getElementsByTagName("body")[0];    
body.appendChild(divHandle);

In FF werkt dit goed. Ik klik op de net gemaakte div en die geeft een event op de mousedown en roept de functie setObject aan en geeft zichzelf mee.
In IE krijg ik het niet voor elkaar. Als ik op de div klik dan ontstaat er geen mousedown event.

Ik heb geprobeert een 'algemene' mousedown event

code:

document.onmousedown = setObject(window.event.srcElement);

de functie krijgt nu een object door (zie ik dmv alert) alleen niet als ik op de div klik.
Als ik de IE develeport kit bekijk kan ik zien wat de eigenschappen zijn van de gemaakte div. Daar zie ik ook netjes de onmousedown met mijn functie.

Ik krijg het niet voor elkaar om bij het klikken op een door javascript gemaakte div in IE dat er een onmousedown event geregistreerd wordt. Er gebeurt niks. Als ik een gewone div maak (in HTML) dan doet hij het wel. En in FF doet hij eht altijd.

Vergeet ik iets? Is er iemand die mij een zetje kan geven?

[ Voor 0% gewijzigd door Jochemmol op 16-06-2008 11:50 . Reden: [js] gewijzigd naar [code] ]

[Verwijderd]

Als je die setAttribute voor onmousedown anders doet, dan zou het wel moeten werken volgens mij;

Probeer eens:

JavaScript:

divHandle.setAttribute("onmousedown", function(e) { 
                        setObject(divHandle);
                    });

Of:

JavaScript:

divHandle.onmousedown = function(e) { 
                        setObject(divHandle);
                    };

edit: gebruik de 2e, de eerste werkt niet in FF bij mij...

[ Voor 8% gewijzigd door Verwijderd op 16-06-2008 13:50 ]

[Bozozo]

Gebruik een goede addEvent functie, zoals deze.

Je schrijft dan

code:

var divHandle = document.createElement('div');
// do things to div //
addEvent(divhandle,"mousedown",handleMouseDown);
document.body.appendChild(div); //or add it to some other element

function handleMouseDown(e) { 
  alert(this); //should give HTMLDivElement or something like that
}

[_Thanatos_]

Of als je applicatie groter is dan alleen deze code, jQuery:

JavaScript:

$("body").append($("<div id='div'/>").mousedown(function(e) {
  setObject(this);
}));

De kracht van jQuery lijkt me evident na dit voorbeeld gezien te hebben

Een <div> heeft trouwens geen 'name' attribute

[ Voor 18% gewijzigd door _Thanatos_ op 17-06-2008 20:56 ]

[crisp]

IE's setAttribute is gewoon volledig non-DOM-compliant. Als het goed is zal IE8 dat grotendeels rechttrekken, maar daar heb je nu weinig aan. Leer jezelf voor nu maar gewoon aan het op de ouderwetse manier te doen dmv element.property=value (voor eventhandlers dan ook een functie-reference meegeven, desnoods een anonymous functie gebruiken. Iets als onmouseover=functie(foo) kent het resultaat van de functiecall toe, niet een referentie naar de functie zelf) - daar is op zich niets mis mee in de meeste gevallen en werkt consistent in verschillende browsers.

Verder vind ik opmerkingen in de trant van "gebruik library X" weinig zinvol. Als topicstarter al een library zou overwegen dan is het nog maar zeer de vraag of "library X" wel het meest aansluit bij zijn/haar situatie - dat is iets dat ieder voor zichzelf zou moeten uitmaken.

Persoonlijk vind ik _Thanatos_' jQuery voorbeeld geen toonbeeld van mooie, duidelijke code

[_Thanatos_]

Je vindt dat je met jQuery geen mooie duidelijke code maakt. Dat zou beter klinken dan je persoonlijke aanval... (gelukkig genuanceerd met het woordje "vind" )

En over smaak MOET men twisten, zei een wijs man ooit. Mijn punt was meer dat je met jQuery die DOM-geneuzel achter de schermen houdt, en je bezighoudt met wat belangrijk is: de eigenlijke functionaliteit. Hoe mooi je de code vind, mag je zeggem, maar is nauwelijks relevant.

Nu ik het dus ook mag zeggen: crisp kent jQuery niet, anders zou hij niet zeggen dat het niet duidelijk is, dus gebied mij om te benoemen dat mijn jQuery-code niets meer doet dan een <div id="div"> met een mouseover aan de body toevoegt. Ik vind het hartstikke elegant. Ik - als vervent jQuery-gebruiker - vind het perfect leesbaar. Veel beter dan enige low-level DOM-plumbing. Maarja, mijn mening heh

[ Voor 4% gewijzigd door _Thanatos_ op 18-06-2008 00:30 ]

[crisp]

_Thanatos_ schreef op woensdag 18 juni 2008 @ 00:28:
Je vindt dat je met jQuery geen mooie duidelijke code maakt. Dat zou beter klinken dan je persoonlijke aanval... (gelukkig genuanceerd met het woordje "vind" )

Ik wou net zeggen, ik schrijf toch dat dat mijn persoonlijke mening is? Ik wil mijn bedenkingen ook wel exact verwoorden hoor (zie onder)

En over smaak MOET men twisten, zei een wijs man ooit. Mijn punt was meer dat je met jQuery die DOM-geneuzel achter de schermen houdt, en je bezighoudt met wat belangrijk is: de eigenlijke functionaliteit. Hoe mooi je de code vind, mag je zeggem, maar is nauwelijks relevant.

Het gaat niet zozeer om smaak, maar een library moet ook aansluiten bij je eigen of je team's doctrine. Alle JS libraries houden het DOM-"geneuzel" grootendeels achter de schermen. Toch is er niets mis met uitleggen waarom sommige dingen in bepaalde browsers niet werken en hoe je dat wel simpel werkend kan krijgen. Ga geen moker gebruiken als je aan een schroevendraaier genoeg hebt zeg ik altijd maar...

Nu ik het dus ook mag zeggen: crisp kent jQuery niet, anders zou hij niet zeggen dat het niet duidelijk is, dus gebied mij om te benoemen dat mijn jQuery-code niets meer doet dan een <div id="div"> met een mouseover aan de body toevoegt. Ik vind het hartstikke elegant. Ik - als vervent jQuery-gebruiker - vind het perfect leesbaar. Veel beter dan enige low-level DOM-plumbing. Maarja, mijn mening heh

Ik ken jQuery wel, net als YUI, DoJo, prototype, MooTools en verschillende anderen. Elke library heeft z'n sterke kanten en zwakke kanten (en bugs ). Van jQuery vind ik juist de chaining-syntax en de vaagheid van $() zwakke punten en zoals beloofd wil ik dat best uitleggen:

JavaScript:

$("body")

Waar matched dat op? Een element met id="body" of het BODY-element?

JavaScript:

.append($("<div id='div'/>")

Hier doet $() blijkbaar ineens iets heel anders - het is ineens geen selector functie meer maar een functie die een element genereert? Frankensteinesque als je het mij vraagt. En waarom opeens die XML-syntax?

JavaScript:

.mousedown(function(e) {
  setObject(this);
}));

En hier wordt de 'on' prefix ineens weggelaten die duidelijker zou maken dat het om een handler gaat...

Verder zijn dergelijke one-liners lastig te debuggen. Je kan niet makkelijk ergens een alert() of console.log() tussen frotten en een breakpoint zetten op zo'n regel heeft ook weinig zin. Sure, jQuery zal best z'n eigen debug-mogelijkheden hebben, maar dat is dan weer zo'n doctrine waar je je aan zal moeten confirmeren...

[Jochemmol]

Bedankt voor jullie reacties.
Ik heb de tip van Bozozo gebruikt. dit werkt perfect.

Ik vond het setAttribute al zo raar omdat op w3schools.com helemaal niks over gezegd werd.
Ik heb het nu helemaal werkend.

De reden dat ik ervoor kies om het zelf te maken is het volgende.
Een libary werkt soms niet zoals ik dat zou willen. Om het dan aan te passen is bijna geen doen (voor mij). Ik had bv motools kunnen gebruiken dan had ik al heel wat aardige javascript dingen kunnen gebruiken.

Daarnaast vind ik het ook leuk om dingen zelf te maken. Zelf tegen deze dingen aan te lopen. en uiteindelijk het ook helemaal te begrijpen wat ik gemaakt heb en wat er gebeurd als ik iets wijzig.
Ik ben gewoon een freak die alles graag zelf maakt omdat ik programmeren ook gewoon leuk ving

[Kiphaas7]

Op 2 van je vragen heb ik in ieder geval antwoord

crisp schreef op woensdag 18 juni 2008 @ 00:58:

JavaScript:

$("body")

Waar matched dat op? Een element met id="body" of het BODY-element?

JavaScript:

$("body") //matched BODY-element
$("#body") //matched element met id="body"

Gewoon css syntax dus.

crisp schreef op woensdag 18 juni 2008 @ 00:58:

JavaScript:

.append($("<div id='div'/>")

Hier doet $() blijkbaar ineens iets heel anders - het is ineens geen selector functie meer maar een functie die een element genereert? Frankensteinesque als je het mij vraagt. En waarom opeens die XML-syntax?

Volgens de jquery docs zou het eigenlijk ook het volgende soort syntax moeten zijn, dus geen tweede $() meer.

JavaScript:

$("p").append("<b>Hello</b>");

[Sebazzz]

W3Schools is imo ook een beetje verouderd

[_Thanatos_]

Volgens de jquery docs zou het eigenlijk ook het volgende syntax moeten zijn, dus geen tweede $() meer.

JavaScript:

$("p").append("<b>Hello</b>");

Maar wel als je aan dat <b> element ook nog ff een event wilt hangen. Dan zul je er echt eerst een jQeury-object van moeten maken. Vandaar dat ik dat ook deed. En ja, er zijn ook andere manieren, bijvoorbeeld door er .children("b").mousedown(...) achter te hangen. Het is maar wat je handiger vindt.

[Verwijderd]

_Thanatos_ schreef op woensdag 18 juni 2008 @ 00:28:
Je vindt dat je met jQuery geen mooie duidelijke code maakt. Dat zou beter klinken dan je persoonlijke aanval... (gelukkig genuanceerd met het woordje "vind" )

Dat was toch geen persoonlijke aanval? Als ik je een idioot noem is dat een persoonlijke aanval. Als ik je code idioot noem is dat geen persoonlijke aanval. Jij bent niet je code.

Overigens kun je met jQuery zeker hele fijne leesbare code schrijven maar juist vanwege de compacte syntax en chaining is het heel makkelijk om er hele onduidelijke code mee te schrijven. De ambiguiteit van $ is zowel een zegen als een vloek. Jouw voorbeeld hangt er een beetje tussenin. In mijn beleving is het duidelijker als je eerst het element definieert dat je aanmaakt, inclusief event handler(s) en dat daarna aan z'n parent hangt.

[_Thanatos_]

Een persoonlijke aanval op m'n code. Daar zit nml hart en ziel in

Mja, net wat je leuk vind. Ik wil gewoon m'n ding voor elkaar krijgen, en als ik dat in 1 regel uit m'n mouw schudt, dan hoef ik niet na te denken over een stuk script van 5 regels wat misschien wel leesbaarder is voor iemand die jQuery minder goed kent, maar wat ook al 349872342x* op andere plekken geschreven is. Snel en netjes schrijven versus minder snel en leesbaarder voor nieuwkomers eigenlijk.

* Een significant percentage daarvan in dezelfde applicatie zelfs