DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Dinamicko setovanje onMouseOver (http://www.devprotalk.com/showthread.php?t=3289)

duki 01. 08. 2007. 22:21

Dinamicko setovanje onMouseOver
 
Pozdrav svima!

Zanima me postoji li način da se dinamički iz JavaScripta postavi onMouseOver/onMouseOut handler...

Standardni način pisanja je:
HTML
Kôd:

<a href="1.php" onMouseOver="mover(1); return true;" onMouseOut="mout(1); return true;"><img name=img1 border=0 src="./Images/Buttons/MenuButton_1B.jpg"></img></a>
<a href="2.php" onMouseOver="mover(2); return true;" onMouseOut="mout(2); return true;"><img name=img2 border=0 src="./Images/Buttons/MenuButton_2B.jpg"></img></a>
<a href="3.php" onMouseOver="mover(3); return true;" onMouseOut="mout(3); return true;"><img name=img3 border=0 src="./Images/Buttons/MenuButton_3B.jpg"></img></a>

I onda JavaScript okida mover(x); i mout(x);

Znaci ja moram u HTML kodu da hardcodujem OnMouseOver i OnMouseOut.

e sad, ono sto bi meni pravilo posao je neki sledeci kod:
HTML
Kôd:

<a href="7.php" id="MojATag"> .... </a>
a u JavaScriptu nesto kao:
Kôd:

function PostaviParametre()
{
var x=document.getElementById("MojATag");
x.onMouseOver="alert('Uradi nesto!');";
}

pa bih onda u HTML-u imao
Kôd:

<body lang="en-US" dir="ltr" onload="PostaviParametre();">
e ovo poslednje x.onMouseOver="alert('Uradi nesto!');"; ne radi :(

radi
Kôd:

x.innerHTML="BlaBla";
x.href="http://www.ibm.com";
x.target="_blank";

ali
Kôd:

x.onMouseOver=...
ne radi...

Primer je namerno osakaćen. Prosleđivali bi se neki parametri itd, ali ovako je čitkije.
Doktori, ima li pomoći? ;)

noviKorisnik 01. 08. 2007. 23:00

Možeš da probaš, za početak ...
Kôd:

x.onmouseover = function () {alert ('Uradi nesto!');}
ili
Kôd:

function nesto () {alert ('Uradi nesto!');}
x.onmouseover = nesto;


duki 01. 08. 2007. 23:14

Citat:

Originalno napisao noviKorisnik (Napišite 39676)
Možeš da probaš, za početak ...
Kôd:

x.onmouseover = function () {alert ('Uradi nesto!');}
ili
Kôd:

function nesto () {alert ('Uradi nesto!');}
x.onmouseover = nesto;


Ma ne radi mi
x.onmouseover
a ne ono sa desne strane jednakosti :)
Ne znam da li postoji uopste "x.onmouseover=..."

Milos Vukotic 01. 08. 2007. 23:44

Na w3c schools kaze da je onmouseover:
Citat:

Supported by the following JavaScript objects:
layer, link
Po tome bi ovo trebalo da radi:

Kôd:

function PostaviParametre()
{
for(i=0; i<document.links.length; i++)
        {
        document.links[i].onmouseover = function() {alert ('Uradi nesto!')};
        }
}


dee 01. 08. 2007. 23:53

vjerojatno zove funkciju u headu, prije nego mu ucita sam div.

stavi cijelu funkciju na kraj html documenta

[Edit] btw, ima li neki elegantan nacin da se sav javascript na strani, gdje god je, pocne izvrsavati tek kad je cijeli body ucitan?

srdjevic 02. 08. 2007. 00:04

pa naravno. onload stranice resava bas to.
1. <body onload="funkcija()">
2. window.onload = funkcija;

Edit: sad skontah ko je pitao... :-)
Ne, nema. jedino sve u funkcije, pa gorenavedeno... :-(

noviKorisnik 02. 08. 2007. 00:56

Evo malo adaptiranog koda iz prototypa:
Kôd:

observe = function (element, name, observer, useCapture) {
    if (element.addEventListener) {
        element.addEventListener (name, observer, useCapture);
    } else if (element.attachEvent) {
        element.attachEvent ('on' + name, observer);
    }
}

Potom nešto poput...
Kôd:

observe (window, funkcija1, 'load', false);
...
observe (window, funkcija45, 'load', false);

... može da se dodaje na proizvoljnim mestima u dokumentu, a sve se izvršava na onload (to je konkretno u primeru zadato - na objektu window postavi funkciju1 da se izvršava kad se desi događaj load). Ista funkcija može da se koristi za postavljanje proizvoljnog hendlera na proizvoljni element, recimo:
Kôd:

// svi linkovi izvrsavaju funkciju mover na mouseover
for (var i = 0; i < document.anchors.length; i++)
    observe (document.anchors [i], mover, 'mouseover', false);


dee 02. 08. 2007. 01:52

to je to

noviKorisnik 02. 08. 2007. 09:15

Btw - pobrkao sam pozicije parametara u navedenim primerima - ide objekat, pa naziv događaja i tek onda hendler funkcija.
Off Topic: (... koliko ovde traje vreme za editovanje poruke? 30 minuta! Iju, brutalno, taknuto-maknuto - nema mi nigde gumba da ispravim brljotine iz prethodnog posta...

Ilija Studen 02. 08. 2007. 09:23

Off Topic: Ranije je bilo par bisera koju su menjali svoje poruke nakon par sati / dana pa je bilo varijanti da se ljudi ispod svađaju sami sa sobom, iz nevezuše... Ah, to su bili dani! :D

duki 02. 08. 2007. 18:40

Citat:

Originalno napisao noviKorisnik (Napišite 39676)
Možeš da probaš, za početak ...
Kôd:

x.onmouseover = function () {alert ('Uradi nesto!');}

Ulažem izvinjotinu!
Ovo radi!
Hvala tisuću puta! :)

duki 02. 08. 2007. 20:29

Citat:

Kôd:

function PostaviParametre()
{
        for(i=0; i<document.links.length; i++)
        {
                document.links[i].onmouseover = function() {alert ('Uradi nesto!')};
        }
}


Da, ovo radi... na sve linkove postavi isti handler...
Nisam uspeo da uradim sledece:
document.links[i].onmouseover = function() {alert ('Uradi nesto! ' + i)};
pa da prvi link ispise Uradi nesto 1, drugi Uradi nesto 2 itd...
nego svi linkovi dobiju identicnu (jednu) krajnju vrednost brojaca kada izađe iz petlje.
Npr ako je document.links.length == 10
onda ce primer:
document.links[i].onmouseover = function() {alert ('Uradi nesto! ' + i)};
uciniti da kada stavim misa na bilo koji link ispisati "Uradi nesto 10",
a ne Uradi nesto 1, drugi Uradi nesto 2 itd...

Moze li se proslediti parametar i ako da koja je sintaksa?
Thanx!

Milos Vukotic 02. 08. 2007. 20:38

Probaj da stavis npr.
Kôd:

function PostaviParametre()
{
        for(i=0; i<document.links.length; i++)
        {
                var broj = i + ''; //dva puta '
                document.links[i].onmouseover = function() {alert ('Uradi nesto!' + broj)};
        }
}


noviKorisnik 02. 08. 2007. 22:33

Kôd:

for(i=1; i <= document.links.length; i++) {
    document.links[i].vrednost = i;
    document.links[i].onmouseover = function() {
        alert ('Uradi nesto!' + this.vrednost);
    }
}


Milos Vukotic 02. 08. 2007. 23:05

Oce li raditi ovo "this.vrednost"? Ili ce "this" referisati na onmouseover?

Edit: Evo skontah, konacno :) Sorry

dee 15. 08. 2007. 15:33

da ne otvaram novi topic...

kako rjesavate prelazak iz jednog u drugi ajax-modul sto se tice eventa? svaki modul ce pri svojoj inicijalizaciji postaviti neke listenere, a poziv novog trebao bi maknuti registrirane evente proslog. neki globalni array sa eventima koji se ocisti pri prelasku na novi modul? ili neki drugi nacin?

ivanhoe 15. 08. 2007. 15:41

mislim da bi "dobra praksa" zahtevala da svaki modul ima metodu kojom pocisti za sobom, nikako ne bi smeli da ostaju registrovani eventi, pa da ih drugi moduli ciste, jer se time gubi smisao modularnosti..

A ukoliko su i stari i novi modul i dalje aktivni onda ne sme da dodje do gazenja eventa. Veliko je pitanje koji je pravi redosled pozivanja eventa kad ih ima vise, mislim da je najbolji dizajn da se zahteva da modulima bude svejedno kojim ces ih redom pozvati...

dee 15. 08. 2007. 15:50

Citat:

Originalno napisao ivanhoe (Napišite 40397)
mislim da bi "dobra praksa" zahtevala da svaki modul ima metodu kojom pocisti za sobom, nikako ne bi smeli da ostaju registrovani eventi, pa da ih drugi moduli ciste, jer se time gubi smisao modularnosti..

nisam mislio da modul cisti 'smece' proslog vec nekakav kostur koji svi moduli dijele i koji je isti svima. scenarij tipa: u kosturu stranice imam 5 linkova koji zovu 5 modula unutar nekog kontejnera/radne povrsine. pri pozivu modula1, on u globalni array trenutno_potrebni_eventi registrira svoje evente. pri kliku na linkN u kosturu, ucitava se modulN, uz nesto kao

Kôd:

linkN.onclick = function(){
ocisti(trenutno_potrebni_eventi);
ucitaj(modulN);
}

postavljeno na link1 - linkN.

na sta ti mislis sa 'modul cisti za sobom'? moze li uopce modul znati kad 'izlazi' iz aplikacije i dolazi novi, posto nemamo window.unload ili tako nesto?

noviKorisnik 16. 08. 2007. 00:10

Koliko razumem, ivanhoe govori o tome da trebaš da vodiš računa o tome koji moduli su aktivni u nekom posmatranom trenutku - ako neki modul aktiviraš to znači da treba da inicijalizuješ njegove listenere i s druge strane - ako neki modul prelazi u neaktivno stanje treba pogasiti njegove.

Ako je tvoja situacija da imaš 5 modula i da je u svakom trenutku aktivan najviše jedan, tada je najbolje da uvedeš objekat koji vodi računa o tome. Pseudo ...
Kôd:

moduleDispatcher.load = function (newModule) {
  if (this.activeModule != null) this.activeModule.unregisterEvents ();
  this.activeModule = newModule;
  this.activeModule.registerEvents ();
}
moduleDispatcher.unload = function () {
  if (this.activeModule != null) this.activeModule.unregisterEvents ();
  this.activeModule = null;
}


dee 16. 08. 2007. 01:02

ja se ispricavam unaprijed za gluposti/osnove koje mogu lupit i ostat ziv...

Citat:

Originalno napisao noviKorisnik (Napišite 40414)
Pseudo ...
Kôd:

moduleDispatcher.load = function (newModule) {
  if (this.activeModule != null) this.activeModule.unregisterEvents ();
  this.activeModule = newModule;
  this.activeModule.registerEvents ();
}
moduleDispatcher.unload = function () {
  if (this.activeModule != null) this.activeModule.unregisterEvents ();
  this.activeModule = null;
}


al kako ovo zapravo radi? odnosno, sta je tocno moduleDispatcher? i gdje ga tocno uvodim? u svaki modul (buni me .load & .unload event)? ili kako?

PS.
ne treba mi toliko kod koliko neki 'ispravan koncept'...

sorry&tnx jos jednom

ivanhoe 16. 08. 2007. 06:13

ovo sto je noviKorisnik napravio je lepa generalizacija problema... globalni objeat koji ima zadatak da pali/gasi module i pamti koji je trenutno aktivan modul. Svaki put kad palis novi modul, on prvo ugasi stari, tj. pozove njegovu metodu koja radi clean-up za modul...

to je otprilike ono sto radi ovaj kod, i to je isto ono sto sam ja predlagao, s tim sto sam ja seljak pa bih ja to sve potrpao u globalne promenjive, ne bih se zezao sa objektima, ali ovako je jos lepse :)


Vreme je GMT +2. Trenutno vreme je 19:32.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.