17-Dars JavaScript - MouseDown, MouseMove ва MouseUp

MouseDown, MouseMove ва MouseUp

Айтиб утганимиздек Java S да MouseDrag ъодисаси йук. Шунинг учун биз Drag ва Drop механизмини хосил килишда MouseDown, MouseMove ва MouseUp ходисаларидан фойдаланишимиз керак. Навбатдаги мисолимизда MouseMove ёрдамида сичкончанинг жорий координаталари холатлар сатрида намоён булади. Куришимиз мумкинки бу скрипт коди олдинги мисол билан бир хил:
< html >
< script lauguage = “ JavaScript '' >
< ! - - hide
Window.Capture Events ( Event. MouseMove ) ;
Wihdow.On MouseMove = displayCoords;
function displayCoords (l) {
status = “x : “ + l.pagex + “ y : “ + l.page y;
}
//--
</script>
Сичконча координаталари холатлар сатрида намоён булади
</html>
Event.MouseMove ни ёзишда сиз MouseMove сузини бош харфлар билан ёзишингиз кераклигига эътиборни каратинг. MouseMove ходисаси содир булганда кайси функция чакирилишини курсатишга келганда эса сиз уни кичкина харфлар билан ёзишингиз керак булади:
Window.on mousemove = …
Энди биз охирги 2 та мисолни бирлаштиришимиз мумкин. Биз фойдаланувчи сичкончани тугмачасини босганда унинг координатаси пайдо булишини хохлаймиз. Мисолнинг коди куйидаги куринишда булади:
< html >
< script lauguage = “ JavaScript '' >
< ! - - hide
Window.CaptureEvents ( Event.MouseDown/Event.MouseUp ) ;
Wihdow.On MouseDown = StartDrag;
Wihdow.On MouseUp = EndDrag;
Wihdow.On MouseMove = MoveIt;
function StartDrag (l) {
Window.CaptureEvents ( Event.MouseMove);
}
function MoveIt (l) {
// Координаталарни курсатиш
status = “x: “ + l.pagex + “ y : “ + l.page y;
}
function EndDrag (l) {
window.releaseEvents (Event.MouseMove);
}
//--
</script>
Сичконча тугмаисини босинг ва уни юбормаган холда сичкончани узини харакатлантиринг. Сичконча координаталари холатлар сатрида номаён булади.
</html>
1 чи дан биз window объектини MouseDown ва MouseUp ходисаси хакида сичкончани кабул килишга мажбур киламиз.
Window.CaptureEvents ( Event.MouseDown/Event.MouseUp ) ;
Куриб турганингиздек биз / (ёки) белгисидан window объекти курсатилган ходисалардан бир нечтасини кабул килиш керак деган максадда фойдаланамиз. Курсатилган ходисалар жойга эга булса унда нима содир булишини куйидаги 2 та сатр оркали тавсифланади.
Wihdow.On MouseDown = StartDrag;
Wihdow.On MouseUp = EndDrag;
Куйидаги сатрда MouseMove ходисаси руй бериб window объекти сигнал кабул килганда нима содир булиши аник булган.
Wihdow.On MouseMove = MoveIt;
Лекин тухтанг ахир биз Event.MouseMove ни window.captureEvents ( ) да аникламадикку! Бу шуни англатадики жорий ходиса window объекти томонидан камраб олинмайди. Унда нимага агар window объекти бу ходиса хакида хеч нимага эга булмаса, биз window объектига MoveIt ( ) функциясини курсатамиз! Бу саволга жавобни MouseDown ходисаси содир булгандан сунг чакириладиган StartDrag ( ) функциясида топишингиз мумкин:
function StartDrag (l) {
Window.CaptureEvents ( Event.MouseMove);
}
Бу шуни билдирадики сичконча тугмачаси босилгандан дарров window объекти MouseMove ходисасини камираб олади. Ва агар MouseUp ходисаси содир булса биз MouseMove ходисасини тухтатишимиз керак. Бу EndDrag ( ) функциясида ReleaseEvents ( ) усули ёрдамида бажарилади.
function EndDrag (l) {
window.releaseEvents (Event.MouseMove);
}
MoveIt ( ) функцияси сичкончани координаталарини холатлар сатрига ёзади. Энди бизда Drag ва Drop механизмини амалга оширувчи скриптнинг барча элементлари бор. Ва биз энди объектларимизни экранда чизишни бошласак хам булади.