Pentru a gestiona evenimentul de bine, nu este suficient să știu că este - „clic“ sau „apăsând“. Poate fi necesar părți: poziția cursorului, caracterul introdus, iar celălalt, în funcție de eveniment.
Detalii despre ceea ce sa întâmplat browser-ul scrie „obiect eveniment“, care este trecut ca primul argument la handler.
Următorul exemplu demonstrează utilizarea obiectului evenimentului:
Proprietățile evenimentului obiect:
event.type tip de eveniment, în acest caz, faceți clic pe elementul event.currentTarget pe care procesorul încărcat. Valoarea - este exact la fel ca și cel al prezentei. dar există situații când rutina de tratare este o metodă a obiectului și a acestuia, folosind această legare este legat de obiect, atunci putem folosi event.currentTarget. coordonatele event.clientX / event.clientY cursorul la momentul clicul (în raport cu fereastra)
Există, de asemenea, o serie de alte proprietăți, în funcție de evenimentele pe care le vom uita la capitolele următoare, când vom face cunoștință în detaliu cu mouse-ul, tastatura și așa mai departe.
Obiectul evenimentului este disponibil în HTML
Atunci când se atribuie un handler în HTML, puteți utiliza, de asemenea, evenimentul variabil. acesta va lucra cross-browser:
Acest lucru este posibil pentru că atunci când browser-ul atributului creează o funcție de tratare, se pare ca acest lucru: Funcția (eveniment)
IE8- în loc de a trece un manipulator de parametru creează un obiect window.event la nivel mondial. Handler se poate referi la ea.
Acesta funcționează în felul următor:
- Mingea după zborul ar trebui să devină un centru exact sub cursor, în cazul în care acest lucru este posibil fără plecarea de la marginea câmpului.
- CSS-animație nu este obligatorie, ci de dorit.
- Mingea trebuie să se oprească la limitele câmpului, în orice caz, nu iau off pentru ei.
- Când derulați la câmpul nu trebuie să se rupă nimic.
- Codul nu trebuie să depindă de dimensiunea si mingea specifice teren.
- Veți avea nevoie de proprietăți event.clientX / event.clientY
Mingea de sub cursorul mouse-ului
Mingea de sub cursorul mouse-ului
Dificultatea principală a primei faze - pentru a muta mingea sub mouse-ul, deoarece Coordonate e.clientX / Y clicuri - în raport cu fereastra, iar mingea este poziționat complet în interiorul câmpului, coordonează din stânga sus / trebuie plasate în raport cu colțul din stânga sus al interne câmpului (în interiorul cadrului!).
Pentru a calcula corect coordonatele mingea, aveți nevoie pentru a obține coordonatele colțul terenului și le scade din clientX / Y:
În continuare, trebuie să mutați mingea la jumătate lățimea și înălțimea ball.clientWidth / clientHeight. că el a fost centrul de sub cursor.
Cod care se aliniază pe deplin mingea, veți găsi soluția completă: