dynamisch een eventhandler koppelen

[Oysterhoys]

Ik heb een functie, bijv:
function effect (a) {a.style.color = red}
Later schrijf ik:
<div onmouseover=effect(this)> bla bla bla </div>

niks aan de hand.

Nu wil ik diezelfde functie koppelen aan een dynamisch toegevoegde div
Ik heb een button voor divs toevoegen op mijn pagina met
onclick= voeg_toe(){
var new_div = document.createElement("div");
new_div.id= "nieuw";
new_div.className = "tekst";
new_div.onmouseover = effect(this);
document.body.appendChild(new_div);
}


Dit gaat dus mis, omdat je alleen kunt doen :
new_div.onmouseover = effect
dwz. zonder (this)

Kan iemand het volgen en heeft iemand er een suggestie voor qua oplossing.

[KillR-B]

Zo moet het denk ik wel lukken:

JavaScript:

new_div.onmouseover = function () { this.style.color = 'red'; };

[Oysterhoys]

Wow, KillR-B,

het werkt. Te gek, scheelt me hoop ellende.
Heb ik een Javascript boek van meer dan 1000 pagina's dik,
staat deze oplossing niet in.

Ik werkelijkheid is de functie veel groter en moet ik hem wel dubbel schrijven
wat niet elegant is, maar ik ben allang tevreden.

Dit gaat nog iets verder, misschien heb je hier ook iets op.
Ik wil ook dat dat mijn nieuwe div ook ge drag-and-dropped kan worden,
zoals de bestaanden, die hebben:

<DIV ONMOUSEDOWN="mouse_down(this)" ONDRAGSTART="return false">bla bla </div>

met als bijbehorende functies:

var move_element="", moving=false;
document.onmousemove=mouse_move; document.onmouseup=mouse_up;

function mouse_down(a){
move_element=a.id;if(window.event){e=window.event};moving=true;
if (window.event){old_x=e.clientX-document.getElementById(move_element).offsetLeft
old_y=e.clientY-document.getElementById(move_element).offsetTop }}

function mouse_move(e){if (!moving) return;if (window.event){e=window.event};
new_x=e.clientX-old_x; new_y=e.clientY-old_y;
document.getElementById(move_element).style.left=new_x; document.getElementById(move_element).style.top=new_y; }

function mouse_up(){moving=false;}

Ik heb nu door hoe ik de mouse_down(this) kan oplossen voor mijn dynamisch toegevoegde div, maar de ondragstart ="return false" is mij een raadsel.

Ik moet eerlijk bekennen dat ik die return true en return false ingredienten in deze functies nooit zo snap, door te proberen heb ik het werkend gekregen.
Maar nu val ik er wel weer mee door de mand, nu kan ik weer duizend dingen proberen , maar misschien weet jij het direct.

Of is het zo simpel als:
new_div.ondragstart ="return false"

[ Voor 96% gewijzigd door Oysterhoys op 22-03-2004 22:32 ]

[Amras]

Als jij de functie effect() als onmouseover aan je new_div hangt, dan is this in de functie effect dus de new_div.

Dit moet dus gewoon werken:

code:

new_div.onmouseover = effect;

met deze effect functie:

code:

function effect() {
    this.style.color = "red";
}

[Oysterhoys]

Zal ik ook eens proberen Amras.

[Verwijderd]

duw je code eens in [code] tags

en de functie hergebruiken kan echt wel:

code:

newDiv.onMouseOver = function() {effect(this)};

evenzo

code:

newDiv.ondragStart = function() {return false};

punt is dat je onmouseover een functiereferentie moet hebben en niet de returnwaarde ervan (of een string).

het retourneren van true of false zorgt ervoor dat de rest van het event wel of niet doorgaat (dat kan iemand vast beter formuleren...)

[ Voor 34% gewijzigd door Verwijderd op 22-03-2004 22:43 ]

[Oysterhoys]

Het wordt steeds mooier deze avond.

Amras zijn oplossing werkt, maar dan werkt die functie niet meer op de gewone divs.

Dus Mophor, jouw oplossing is helemaal top, geen herhaling nodig
Ik ga hem nu even wat uitgebreider testen.


YYYYYYYYYeeeeeeeeessss , het werkt.
Soms schiet het niet op met Tweakers, maar deze avond:

[ Voor 29% gewijzigd door Oysterhoys op 22-03-2004 22:57 ]