JavaScript-ийн динамик үүсгэх чадвар html хуудаснуудгурван тулгуурт тулгуурласан. Тэдний хоёрыг өмнөх нийтлэлүүдэд аль хэдийн хэлэлцсэн. Гурав дахь нь үйл явдал юм.

• Цонхны объектыг ашиглан хөтчийн цонхыг удирдах.
• Цонхны доторх объектуудыг удирдах нь DOM юм.
• Үйл явдал дээр JavaScript кодыг ажиллуул.

Үйл явдал нь хэрэглэгчийн үйлдэлд компьютерийн хариу үйлдэл юм. Жишээлбэл, t.z-тэй хамт. JavaScript үйл явдал нь гар товчлуурыг дарах, хулганын товчлууруудыг хөдөлгөх, товших, хөтчийн цонхыг хаах үйл явц гэж тооцогддог. t.z-тэй бүх арга хэмжээ. javaScript нь баримт бичиг болон хөтчийн объектуудаар үүсгэгддэг ("хэрэглэгч" гэсэн ойлголт байхгүй). Жишээлбэл, та догол мөр дээр дарахад хулганы товшилтыг объект - догол мөр үүсгэнэ.

Үйл явдалд хариу үйлдэл үзүүлэх зарим JavaScript кодыг ажиллуулахын тулд та энэ кодыг тодорхой объектоос үүсгэсэн үйл явдалтай холбох хэрэгтэй, жишээлбэл. тодорхой объектоос тодорхой үйл явдалтай. Энэ үйлдлийг үйл явдалд бүртгүүлэх гэж нэрлэдэг.

Захиалга гэдэг нь бид хөтчийн объектын загвар дахь тодорхой объектоос функцийг тодорхой үйл явдалд холбодог гэсэн үг юм. Мөн энэ объект энэ үйл явдлыг үүсгэх (үүсгэх) үед энэ функц автоматаар ажиллах болно.

• onclick - хулганы товчийг дарна уу.
• ondblclick - хулганы товчийг давхар товш.
• onmousedown - хулганы товч дарагдсан (доош хөдөлсөн).
• onmousemove - хулгана объект дээр хөдөлдөг (олон үйл явдал тохиолддог, хулганы хөдөлгөөн 1px = 1 үйл явдал).
• onmouseout - хулгана объектыг орхино.
• onmouseover - хулганыг хүссэн объектын дээгүүр хөдөлгөдөг.
• onmouseup – хулганы товчийг суллана (дээш өргөв).
• onkeydown – гарын товчлуур дарагдсан (доош хөдөлсөн).
• onkeypress - гарын товчлуурыг дарах.
• onkeyup – гарын товчлуурыг сулласан (дээш өргөгдсөн).
• onblur - оролтын фокус алдагдсан (курсор анивчдаг).
• onfocus - оролтын фокусыг энэ элемент хүлээн авах мөч.
• onchange – хэрэв текст өөрчлөгдсөн бол (жишээ нь, текст талбарт) фокус алдсаны дараа удирдлага үүсгэнэ. Үл хамаарах зүйл бол "сонгох" жагсаалтын элемент бөгөөд энэ үйл явдал нь анхаарал алдсаны дараа биш шууд үүсгэгддэг.
• onload - цонхонд хуудсыг ачаалж дууссаны дараа үүсдэг. Хуудсыг бүрэн ачаалсны дараа JavaScript кодыг ажиллуулах шаардлагатай үед ихэвчлэн ашигладаг.
• onunload – баримтыг цонхноос буулгахаас өмнө (энэ баримтыг хаах эсвэл өөр баримт руу шилжих үед) үүсдэг.
• дахин тохируулах - маягтыг дахин тохируулсан.
• onsubmit - өгөгдлийн маягтыг илгээсэн.

Үйл явдалд бүртгүүлэх

• JavaScript-ээр дамжуулан захиалга хийх. Энэ аргыг ихэнх тохиолдолд ашигладаг. Нэгдүгээрт, бид бүртгүүлэхийг хүсч буй элементийнхээ объектыг олох хэрэгтэй, жишээлбэл, getElementById аргаар (хүссэн элементийн id-г зааж өгнө).

функц myFunc () ( //энгийн функцийн дохиолол үүсгэсэн ("сайн уу"); ) функц pageInit () ( var p= баримт бичиг. getElementById ("1"); p. onclick= myFunc; ) //функцийг галд дуудсан цонхны үйл явдал. onload=pageInit; // хуудас ачаалах үед үйл явдал асах болно< p id= 1 >1-р догол мөр //догол мөрөнд id тохируулна

• -ээр дамжуулан бүртгүүлнэ үү html код. Энэ аргын сул тал нь html код нь javaScript кодоор бөглөрдөг; Үүнээс гадна хэд хэдэн хязгаарлалт байдаг бөгөөд нарийн төвөгтэй тохиолдолд хэрэглэхэд тохиромжгүй байдаг.

< script type= "text/javascript" >myFunc функц () ( //энгийн функцийн сэрэмжлүүлэг үүсгэсэн ("сайн уу"); )< p onclick= "myFunc()" >2-р догол мөр //Үйл явдал боловсруулах загвар функц гэж нэрлэдэг

Элемент дээр үйл явдал тохиолдоход ижил төстэй үйл явдлууд хуудасны дээд хэсэг хүртэл (баримт бичгийн үндсэн хэсэг учраас "бие" хүртэл) түүний бүх эх элементүүдэд тохиолдох ёстой. Тиймээс хуудсан дээр тохиолдсон аливаа үйл явдал нь биед тохиолддог.

Ийм үйл явдал ямар дарааллаар гарах вэ гэсэн асуулт гарч ирнэ. Орчин үеийн хөтчүүдэд үйл явдлыг зохицуулах загварыг "хөөсний загвар" гэж нэрлэдэг. Үүний мөн чанар: эхлээд товшсон элемент дээр, дараа нь түүний эцэг эх дээр, мөн хамгийн дээд хэсэгт - "бие" хүртэл үйл явдал тохиолддог.

Элемент --> элемент 2 --> баримт --> цонх

Үйл явдлын параметрүүд (үйл явдлын объект)

Олон шинж чанартай үйл явдлын объект байдаг. Эдгээр шинж чанаруудыг уншсанаар та үйл явдлын талаар мэдээлэл авах боломжтой. Мэдээлэл авахын тулд эхлээд объектыг өөрөө авах ёстой.

Энэ объектын үндсэн шинж чанарууд:

• x, y - үйл явдал тохиолдох агшинд хулганы координатууд.
• clientX, clientY - адилхан.
• ofsetX, offsetY - ижил зүйл, гэхдээ энэ нь хулганы офсет харьцангуй юм эх элемент.
• screenX, screenY - дэлгэцийн координат.
• товчлуур - хулганы аль товчийг дарсан (0 - дарагдаагүй, 1 - зүүн товчлуур дарагдсан, 2 - баруун товчлуур дарагдсан, 4 - дунд товчлуур дарагдсан).
• keyCode - дарагдсан гарын товчлуурын тоон код.
• srcElement - үйл явдлыг үүсгэсэн элемент.
• fromElement - хулгана хөдөлсөн элемент.
• toElement - хулгана гүйсэн объектын заалт.
• cancelBubble бол стандарт бус арга юм үнэн, дараа нь "поп-ап бөмбөлөг" цуцлагдах болно; эсвэл хэрэглэгчийн дарсан товчлуурын кодыг сольж болно.

Энэ хичээлээр бид зарим кодыг ажиллуулахын тулд JavaScript ашиглан таслан зогсоож болох үйл явдлын үндсэн төрлүүдийг авч үзэх болно.

Үйл явдлын ангилал

JavaScript-ийн бүх үйл явдлыг дараах ангилалд хувааж болно: Хулганы үйл явдал, гарын үйл явдал, хүрээ/объект үйл явдал, маягтын үйл явдал, чирэх үйл явдал, хөдөлгөөнт үйл явдал, санах ойн үйл явдал, медиа үйл явдал, шилжилтийн үйл явдал, серверээс илгээсэн үйл явдал, мэдрэгчтэй үйл явдал, хэвлэх үйл явдлууд (Хэвлэх үйл явдлууд), төрөл бүрийн үйл явдлууд (Төрөл бүрийн үйл явдлууд).

Анхаар: JavaScript дахь бүх үйл явдлууд жижиг (жижиг) үсгээр бичигдсэн байдаг.

Хулганы үйл явдлууд

• mousedown - зарим элемент дээр хулганы товчийг дарах үед үйл явдал тохиолддог, гэхдээ хараахан гараагүй байна.
• mouseup - зарим элемент дээрх хулганы товчлуур дарагдсан төлөвөөс суллагдсан төлөв рүү шилжих үед тохиолддог.
• click - хэрэглэгч элемент дээр хулганыг дарахад үйл явдал үүснэ. Дарах үйл явдлуудын дараалал (хулганы зүүн болон дунд товчлуурын хувьд) нь хулганы доош -> хулгана -> дарна.
• contextmenu - тухайн элемент дээр хэрэглэгч хулганы баруун товчийг дарахад үйл явдал үүснэ. Контекст цэстэй холбоотой үйл явдлын дараалал (хулганы баруун товчлуурын хувьд) нь хулганы доош -> хулгана -> контекст цэс юм.
• dblclick - хэрэглэгч элемент дээр давхар товших үед үйл явдал тохиолддог. dblclick-тэй холбоотой үйл явдлын дараалал нь: mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick.
• mouseover - хулганын курсор нь элемент эсвэл түүний хүүхдийн аль нэгний эзэмшдэг талбарт орох үед тохиолддог.
• mouseout - хулганын курсор элемент эсвэл түүний хүүхдийн аль нэгний эзэмшдэг хэсгээс гарах үед тохиолддог.
• mousemove - тухайн элементэд хамаарах хэсэг дотор хулганы курсор шилжих үед үйл явдал үүснэ.
• mouseenter - хулганын заагч элементийн эзэмшдэг талбарт орох үед үйл явдал тохиолддог. Энэ үйл явдлыг ихэвчлэн хулганы заагч элементийн эзэмшдэг хэсгээс гарах үед тохиолддог хулганы навчны үйл явдалтай хамт хэрэглэгддэг. Mouseenter үйл явдал нь mouseover үйл явдалтай төстэй бөгөөд гагцхүү mouseenter үйл явдал нь хөөсөрдөггүй гэдгээрээ ялгаатай (бид хэсэг хугацааны дараа хөөс үүсэх үйл явцын тухай ойлголттой болно).
• mouseleave - хулганын заагч тухайн элементийн эзэмшдэг хэсгээс гарах үед үйл явдал үүснэ. Mouseleave үйл явдал нь mouseout үйл явдалтай төстэй бөгөөд гагцхүү mouseleave үйл явдал нь хөөсөрдөггүй гэдгээрээ ялгаатай (бид үйл явдлын хөөс гэсэн ойлголттой бага зэрэг танилцах болно).

Гарны үйл явдал

Үйл явдлын дараалал нь: keydown -> keypress -> keyup .

• keydown - тухайн элемент дээрх гар дээрх товчлуур дарагдсан боловч хараахан гараагүй байгаа үед тохиолддог.
• keyup - элемент дээрх гар дээрх дарагдсан товчлуур суллагдсан төлөв рүү шилжих үед тохиолддог.
• товчлуур дарах - тухайн элемент дээр хэрэглэгч гар дээрх товчлуурыг дарахад үйл явдал үүснэ.

Объект ба хүрээний үйл явдлууд

• beforeunload - баримтыг буулгахаас өмнө үйл явдал тохиолддог. Энэ үйл явдал нь баталгаажуулах харилцах цонхонд "Та энэ хуудаснаас гарахдаа итгэлтэй байна уу?" гэсэн нэмэлт мессежийг харуулах боломжийг танд олгоно. Баримт бичгийг хаах үед гарч ирэх стандарт мессеж нь үүнээс хамаарч өөр өөр байж болно өөр өөр хөтөч. Гэхдээ та үүнийг өөрчлөх эсвэл устгах боломжгүй, зөвхөн энэ аргыг ашиглан өөрийн мессежийг өгөгдмөл мессежийн хамт харуулах болно.
• алдаа - гадаад файл (жишээ нь, баримт бичиг эсвэл зураг) ачаалах үед тохиолддог алдаа гарах үед үйл явдал үүснэ.
• hashchange - одоогийн URL-ийн зангуу хэсэг ("#" тэмдгээр эхэлдэг) өөрчлөгдөх үед үйл явдал тохиолддог.
• ачаалал - объектыг ачаалж дуусах үед үйл явдал тохиолддог. Вэб хуудсыг бүрэн ачаалсны дараа шууд скриптийг гүйцэтгэхийн тулд ачаалах үйл явдлыг ихэвчлэн биеийн элемент дээр ашигладаг.
• буулгах - үйл явдал нь хуудсыг буулгах үед тохиолддог (жишээлбэл, хөтчийн таб (цонх) хаагдсан үед).
• pageshow - хэрэглэгч вэб хуудас руу шилжих үед үйл явдал тохиолддог, i.e. хуудас хэрэглэгчдэд нээлттэй болсны дараа. Pageshow үйл явдал нь load үйл явдалтай төстэй бөгөөд зөвхөн кэшээс ачаалагдсан байсан ч хуудсыг ачаалах бүрт идэвхждэг. Хуудсыг анх ачаалах үед pageshow үйл явдал ачаалах үйл явдлын дараа шууд ажилладаг.
• pagehide - хэрэглэгч хуудсыг орхих үед үйл явдал тохиолддог (хуудас нуух үйл явдал нь буулгах үйл явдлын өмнө тохиолддог). Нэмж дурдахад, энэ үйл явдал нь буулгах үйл явдлаас ялгаатай нь хуудсыг кэш хийхээс сэргийлдэггүй.
• хэмжээг өөрчлөх - хөтчийн цонхны хэмжээг өөрчлөх үед үйл явдал үүснэ.
• гүйлгэх - Гүйлгэх мөр бүхий элементийн агуулгыг гүйлгэх үед үйл явдал үүснэ.

Маягт ба хяналтын үйл явдлууд

• фокус - тухайн элемент фокусыг хүлээн авах үед үйл явдал тохиолддог. Энэ үйл явдал гарч ирэхгүй.
• бүдэгрүүлэх - объект анхааралаа алдах үед тохиолддог. Энэ үйл явдал гарч ирэхгүй.
• Focusin - тухайн элемент фокус авах үед тохиолддог. Фокусын үйл явдал нь фокусын үйл явдалтай төстэй боловч хөөсөрдөгөөрөө ялгаатай. Тиймээс, хэн анхаарлаа алдаж байгааг олж мэдэх шаардлагатай үед үүнийг ашиглаж болно: элемент эсвэл түүний хүүхэд үү?
• fokusout - элемент нь анхаарлаа төвлөрүүлэх дөхсөн үед тохиолддог. Focusout үйл явдал нь бүдгэрүүлэх үйл явдалтай төстэй боловч хөөсөрдөгөөрөө ялгаатай. Тиймээс, хэн анхаарлаа алдаж байгааг олж мэдэх шаардлагатай үед үүнийг ашиглаж болно: элемент эсвэл түүний хүүхэд үү?
• өөрчлөлт - тухайн элементийн утга өөрчлөгдөхөд тухайн элементийн анхаарлыг алдсаны дараа тохиолддог. Өөрчлөлтийн үйл явдлаас гадна JavaScript нь ижил төстэй оролтын үйл явдалтай бөгөөд энэ нь элементийн утга өөрчлөгдсөний дараа шууд тохиолддог өөрчлөлтийн үйл явдлаас ялгаатай. Өөрчлөлтийн үйл явдал нь оролтын үйл явдлаас ялгаатай нь мөн keygen болон сонгох элементүүдтэй ажилладаг. Radiobuttons болон checkbox-ын хувьд өөрчлөлтийн үйл явдал эдгээр элементийн төлөв өөрчлөгдөх үед тохиолддог.
• оролт - оролтын элемент эсвэл текст талбайн элементийн утга өөрчлөгдсөний дараа үйл явдал тохиолддог.
• хүчингүй - Энэ үйл явдал сервер рүү бусад маягтын өгөгдлийн хамт илгээх шаардлагатай оролтын элемент хүчингүй өгөгдөл агуулж байгаа үед тохиолддог.
• дахин тохируулах - маягтыг цэвэрлэхээс өмнө үйл явдал тохиолддог бөгөөд үүнийг type="reset" -тэй оролтын элемент хийдэг.
• хайлт - Хэрэглэгч Enter товчийг дарах эсвэл type="search" бүхий оролтын элемент дээрх " x" (цуцлах) товчийг дарсны дараа үйл явдал үүснэ.
• сонгох - элемент доторх зарим текстийг сонгосны дараа үйл явдал үүснэ. Сонгох үйл явдлыг ихэвчлэн type="text" эсвэл textarea бүхий оролтын элементэд ашигладаг.
• submit - маягтыг серверт илгээхээс өмнө үйл явдал тохиолддог.

Үйл явдлыг чирэх

Чирүүлсэн объекттой холбоотой үйл явдлууд (чирж болох зорилт, эх объект):

• dragstart - хэрэглэгч элементийг чирж эхлэх үед үйл явдал тохиолддог;
• drag - хэрэглэгч элементийг чирэх үед үйл явдал тохиолддог;
• dragend - хэрэглэгч элементийг чирж дууссаны дараа үйл явдал тохиолддог, өөрөөр хэлбэл. би хулганы курсорыг суллахад.

Чирэх зорилтыг хүлээн авах буулгах зорилттой холбоотой үйл явдлууд:

• dragenter - чирж болох бай нь чирж болох зорилтыг хүлээн авах боломжтой буулгах зорилтын талбарт орсон үед үйл явдал тохиолддог.
• ragleave - чирсэн объект (чирж болох зорилт) үүнийг хүлээн авах боломжтой элементийн хил хязгаараас гарах үед тохиолддог.
• dragover - чирж болох зорилт нь түүнийг хүлээн авах боломжтой элементийн хэсэг рүү шилжих үед тохиолддог.
• уналт - хэрэглэгч чирж болох объектыг хүлээн авах боломжтой элементийн талбарт (унагах зорилт) гаргах үед үйл явдал тохиолддог.

Хөдөлгөөнт үйл явдлууд

CSS хөдөлгөөнт дүрс ажиллаж байх үед тохиолдож болох гурван үйл явдал:

• animationstart - CSS хөдөлгөөнт дүрс эхлэх үед үүснэ.
• animationiteration - CSS хөдөлгөөнт дүрсийг дахин дахин гүйцэтгэх үед үүсдэг.
• animationend - үед тохиолддог CSS хөдөлгөөнт дүрсдууссан.

Түр санах ойн үйл явдлууд

• copy - хэрэглэгч элементийн агуулгыг хуулах үед үйл явдал тохиолддог. Хуулбарлах үйл явдал нь хэрэглэгч элементийг (жишээ нь, img элементээр үүсгэсэн зургууд) хуулах үед бас тохиолддог. Хуулбарлах үйл явдлыг үндсэндээ type="text"-тэй оролтын элементүүдэд ашигладаг.
• cut - хэрэглэгч элементийн агуулгыг таслах үед үйл явдал тохиолддог.
• paste - хэрэглэгч зарим контентыг элементэд буулгахад үйл явдал тохиолддог.

Үйл явдлыг хэвлэх

• afterprint - Хуудас хэвлэж эхлэх үед (өөрөөр хэлбэл харилцах цонхны Print товчийг дарсны дараа) эсвэл Print харилцах цонхыг хаасан тохиолдолд энэ үйл явдал тохиолддог.
• өмнө хэвлэх - үйл явдал хуудас хэвлэгдэхээс өмнө тохиолддог, өөрөөр хэлбэл. Хэвлэх харилцах цонхыг нээхээс өмнө.

Шилжилтийн үйл явдлууд

• transitionend - CSS шилжилт дуусмагц үйл явдал идэвхжинэ. Тайлбар: Хэрэв шилжилтийг дуусгахаас өмнө устгасан бол (жишээлбэл, хэрэв CSS өмч transition-property устгагдсан), дараа нь шилжилтийн үйл явдал идэвхгүй болно.

Серверээс илгээсэн үйл явдлууд

• алдаа - үйл явдлын эх сурвалжид алдаа гарсан үед үйл явдал тохиолддог. Алдаа нь ихэвчлэн харилцаа холбоо тасарсан үед тохиолддог. Хэрэв ийм зүйл тохиолдвол EventSource объект автоматаар серверт холбогдохыг оролдох болно.
• нээлттэй - үйл явдлын эх үүсвэртэй холболт нээлттэй үед үйл явдал тохиолддог.
• мессеж - үйл явдлын эх сурвалжаар дамжуулан мессеж хүлээн авах үед үйл явдал тохиолддог.
  Мессежийн үйл явдлын объект нь дараах шинж чанаруудыг дэмждэг:
  • өгөгдөл - мессежийг агуулсан.
  • гарал үүсэл - үйл явдлыг өдөөсөн баримт бичгийн URL.
  • lastEventId - хамгийн сүүлд хүлээн авсан мессежийн танигч (id).

Хэвлэл мэдээллийн үйл явдал

Аудио/видео ачаалах явцад үйл явдлууд дараах дарааллаар явагдана: loadstar -> Durationchange -> loadedmetdata -> loadeddata -> progress -> canplay -> canplaythrough.

• цуцлах - аудио/видео ачаалах тасалдсан үед үйл явдал тохиолддог. Энэ үйл явдал нь алдаа гарснаас биш медиа өгөгдлийг татаж авах ажиллагаа тасалдсан (цуцлагдсан) үед тохиолддог.
• алдаа - аудио/видео ачаалах явцад алдаа гарсан тохиолдолд үйл явдал үүснэ.
• зогссон - хөтөч медиа өгөгдлийг хүлээн авахыг оролдох үед энэ үйл явдал тохиолддог, гэхдээ өгөгдөл байхгүй байна.
• - хөтөч заасан аудио/видео бичлэгийг хайж эхлэх үед үйл явдал тохиолддог, өөрөөр хэлбэл. татаж авах процесс эхлэх үед.
• Durationchange - аудио/видео бичлэгийн үргэлжлэх хугацаа өөрчлөгдөх үед үйл явдал тохиолддог. Хэрэв аудио/видео ачаалагдсан бол үргэлжлэх хугацаа нь "NaN"-аас аудио/видеоны бодит үргэлжлэх хугацаа хүртэл өөр өөр байх болно.
• loadedmetadata - заасан аудио/видеоны мета өгөгдөл ачаалагдсан үед гарсан үйл явдал. Аудио/видео мета өгөгдөл нь үргэлжлэх хугацаа, хэмжээ (зөвхөн видео) болон текст бичлэгээс бүрдэнэ.
• loadeddata - үйл явдал зөөвөрлөгчийн эхний фрейм ачаалагдсаны дараа тохиолддог.
• дэвшил - хөтөч заасан аудио/видеог татаж авах үед үйл явдал тохиолддог.
• canplay - хөтөч заасан аудио/видео бичлэгийг тоглуулж эхлэх үед (өөрөөр хэлбэл, аудио/видео урсгал нь хөтөч тоглож эхлэхэд хангалттай буфер болсон үед) үйл явдал тохиолддог.
• canplaythrough - хөтөч нь заасан медиаг буферлэхэд зогсолтгүй тоглуулж чадах тэр мөчид үйл явдал тохиолддог.
• дууссан - аудио/видео тоглуулж дуусмагц (төгсгөлд нь хүрсэн) үйл явдал тохиолддог. Энэ үйл явдлыг "Анхаарал тавьсанд баярлалаа", "Үзсэнд баярлалаа" гэх мэт мессежүүдийг харуулахад ашиглаж болно.
• түр зогсоох - аудио/видео тоглуулахыг хэрэглэгч эсвэл кодоор (программын хувьд) түр зогсоох үед үйл явдал тохиолддог.
• тоглох - аудио/видео тоглуулж эхлэх үед үйл явдал тохиолддог. Энэ нь аудио/видео бичлэгийг түр зогсоож, тоглож эхлэх үед бас тохиолддог.
• тоглож байна - Аудио/видео бичлэгийг түр зогсоосны дараа тоглуулж байх үед энэ үйл явдал үүснэ.
• ratechange - аудио/видео тоглуулах хурд өөрчлөгдөх үед үйл явдал тохиолддог.
• хайх - хэрэглэгч гулсагчийг (шилжилтийг) тоглуулж буй аудио/видео бичлэгийн шинэ цагийн байрлал руу шилжүүлж эхлэх үед үйл явдал тохиолддог.
• хайсан - хэрэглэгч гулсагчийг (шилжилтийг) тоглуулж буй аудио/видео бичлэгийн түр зуурын шинэ байрлал руу шилжүүлж дууссаны дараа үйл явдал тохиолддог. Хайж буй үйл явдал нь хайж буй үйл явдлын эсрэг юм. Одоогийн тоглуулах байрлалыг авахын тулд Аудио / Видео объектын currentTime шинж чанарыг ашиглана уу.
• timeupdate - тоглуулж буй аудио/видеоны цагийн байрлал өөрчлөгдөх үед үйл явдал тохиолддог.
  Энэ үйл явдал тохиолддог:
  • аудио/видео урсгалыг тоглуулах үед.
  • гулсагчийг тоглуулж буй аудио/видео цагийн шинэ байрлал руу шилжүүлэх үед.
  Timeupdate үйл явдлыг ихэвчлэн Аудио/Видео объектын currentTime шинж чанартай хослуулан ашигладаг бөгөөд энэ нь одоо тоглож байгаа аудио/видеоны одоогийн цагийн байрлалыг секундын дотор буцаадаг.
• эзлэхүүнийг өөрчлөх – энэ үйл явдал тоглуулж буй видео/аудио урсгалын дууны хэмжээ өөрчлөгдөх бүрт тохиолддог.
  Энэ үйл явдал дараах үед тохиолддог:
  • эзлэхүүнийг нэмэгдүүлэх эсвэл багасгах;
  • дууг хаах эсвэл тайлах.
• хүлээж байна - видеог буфер хийхээр зогсоох үед үйл явдал тохиолддог.

Төрөл бүрийн үйл явдлууд

• солих - Хэрэглэгч дэлгэрэнгүй элементийг нээх эсвэл хаах үед үйл явдал тохиолддог. Дэлгэрэнгүй мэдээлэл нь хэрэглэгч шаардлагатай бол харах эсвэл нуух боломжтой нэмэлт мэдээллийг бий болгоход зориулагдсан.
• дугуй - хулганын дугуй элемент дээр урагш эсвэл арагшаа гүйлгэх үед үйл явдал тохиолддог.

Даалгаврууд

"Keyboard on keyboard (onkeypress)" үйл явдлын цогцолбор уу? Хэрэв тийм бол ямар энгийн үйл явдлын үр дүнд үүсдэг вэ?

Жишээлбэл, танд 2 p элемент байгаа бөгөөд хэрэглэгч хулганаа нэг p элементийн хэсгээс өөр p элементийн хэсэг рүү шилжүүлнэ. Энэ тохиолдолд ямар үйл явдал тохиолдож, ямар элементүүд тэдгээрийг үүсгэдэг вэ?

Үйл явдлын сэдэв нь маш чухал бөгөөд маш сонирхолтой юм. Үүний ачаар та хэрэглэгчдэд таалагдах олон сонирхолтой зүйлийг хийж чадна. JavaScript дахь үйл явдал нь хэрэглэгч эсвэл хөтөчөөс өдөөгдсөн тодорхой үйлдэл юм. Жишээлбэл, үйл явдал нь товчлуур дээр хулгана дарах, хулганыг хөдөлгөх, элемент дээр анхаарлаа төвлөрүүлэх, текст талбар дахь утгыг өөрчлөх, хөтчийн цонхны хэмжээг өөрчлөх гэх мэт байж болно.

Би бүх үйл явдлуудтай ширээ бэлдсэн (миний мэддэг ядаж) JavaScript дээр. Үүнээс та эхлээд үйл явдлын нэр, энэ үйл явдлыг үүсгэж болох элементүүд болон JavaScript үйл явдлын тайлбарыг олох болно.

Үйл явдал	Объект	Үүссэн шалтгаан
Үр хөндөлт	Зураг	Зургийг ачаалахад саад болж байна
Бүдгэрүүлэх		Элементийн фокус алдагдсан
Өөрчлөх	FileUpload, Select, Text, Textarea	Утгыг өөрчлөх
дарна уу	Талбай, Товч, Шалгах хайрцаг, Баримт бичиг, Холбоос, Радио, Дахин тохируулах, Илгээх	Элемент дээр хулганаар дарна уу
DblClick	Талбай, Баримт бичиг, Холбоос	Элемент дээр давхар товшино уу
DragDrop	Цонх	Хөтөч цонх руу шилжих
Төвлөр	Товч, шалгах хайрцаг, файл байршуулах, хүрээ, давхарга, нууц үг, радио, дахин тохируулах, сонгох, илгээх, текст, текст, цонх	Элемент дээр анхаарлаа төвлөрүүлж байна
KeyDown		Гар дээрх товчлуурыг дарж байна
Товч дарна уу	Баримт бичиг, Зураг, Холбоос, Текст талбай	Гар дээрх товчлуурыг барьж байна
Товчлуур	Баримт бичиг, Зураг, Холбоос, Текст талбай	Гар дээрх товчлуурыг суллаж байна
Ачаалал	Баримт бичиг, зураг, давхарга, цонх
Хулганы доош	Товч, Баримт бичиг, Холбоос	Хулганы товчийг дарсан
Хулганы хөдөлгөх	Цонх	Хулгана хөдөлгөөнд байна
MouseOut	Талбай, давхарга, холбоос	Хулгана нь элементийн хил хязгаараас давж гардаг
Mouse Over	Талбай, давхарга, холбоос	Хулгана элемент дээр байна
MouseUp	Товч, Баримт бичиг, Холбоос	Хулганы товчлуурыг суллав
Хөдлөх	Хүрээ	Элементийг зөөж байна
Дахин тохируулах	Маягт	Маягтыг дахин тохируулах
Хэмжээ өөрчлөх	Хүрээ, цонх	Хэмжээг өөрчлөх
Сонго	Текст, Текстареа	Текст сонголт
Илгээх	Маягт	Өгөгдөл дамжуулах
Буулгах	Цонх	Одоогийн хуудсыг буулгаж байна

Одоо JavaScript дээр үйл явдлыг хэрхэн ашиглахыг олж мэдье. Үйл явдал зохицуулагч гэж нэрлэгддэг хүмүүс байдаг. Үйл явдал зохицуулагчид тодорхой үйл явдал тохиолдоход юу болохыг тодорхойлдог. JavaScript дахь үйл явдал зохицуулагчид дараах ерөнхий хэлбэртэй байна:

OnEventName

Өөрөөр хэлбэл, эхлээд "on" гэсэн угтвар, дараа нь үйл явдлын нэр, жишээлбэл, дараах үйл явдал зохицуулагч: onFocus, onClick, onSubmit гэх мэт. Энд асуулт байхгүй гэж бодож байна. Одоо гол асуулт: "JavaScript дээр үйл явдлыг хэрхэн ашиглах вэ?". Тэдний хэрэглээний цар хүрээ асар том бөгөөд одоо бид нэг асуудлыг авч үзэх болно. Хуудас дээр гурван холбоос байна. Холбоос бүр нь өөр өөр дэвсгэр өнгийг (жишээлбэл, цагаан, шар, ногоон) хариуцдаг. Эхлээд дэвсгэр нь цагаан өнгөтэй байна. Тодорхой холбоос дээр хулганаа гүйлгэхэд дэвсгэрийн өнгө өөрчлөгдөнө. Хулганаа холдуулахад дэвсгэр өнгө нь үндсэн өнгө рүү буцна. Холбоос дээр дарахад дэвсгэр өнгө нь анхдагч байдлаар хадгалагдана.

а (
өнгө: цэнхэр;
текстийн чимэглэл: доогуур зураас;
курсор: заагч;
}


var default_color = "цагаан";

функц setTempColor(өнгө) (
document.bgColor = өнгө;
}

функцийн багцDefaultColor(өнгө) (
анхдагч_өнгө = өнгө;
}

функц defaultColor() (
document.bgColor = default_color;
}



Цагаан
Шар
Ногоон

Энэ скриптийг, эс тэгвээс JavaScript болон CSS дэмжлэгтэй HTML хуудсыг бүхэлд нь харцгаая (өөрөөр хэлбэл энэ нь DHTML-ийн жишээ юм). Эхлээд ямар ч HTML хуудас эхэлдэг ердийн HTML хаягууд ирдэг. Дараа нь бид тухайн хуудсан дээрх бүх холбоосууд цэнхэр өнгөтэй, доогуур зураастай, хулганы заагч нь "Заагч" хэлбэртэй байхыг шаарддаг хэв маягийг бий болгодог. Та: "Та яагаад хэв маягийг тохируулах хэрэгтэй байна вэ? Эцсийн эцэст холбоосууд нь яг адилхан байх болно." Энэ нь зөв, холбоосууд, гэхдээ бидэнд ийм холбоос байхгүй (эцэст нь шошгонд href шинж чанар байхгүй), тиймээс тэдгээр нь анхдагчаар энгийн хар текст байх болно (гэхдээ та текст дээр дарж болно). Тиймээс хэв маяг нь заавал байх ёстой. Та үүнийг устгаад юу болохыг харж болно. Илүү сайн, href атрибутыг (ямар ч утгатай, бүр хоосон) нэмээд скрипт яагаад ажиллахаа больсныг тайлбарлана уу. Дараа нь JavaScript эхэлнэ. Бид анхдагч өнгийг хариуцдаг default_color хувьсагчийг үүсгэдэг. Дараа нь гурван функц гарч ирнэ:

setTempColor() функц нь өнгийг түр өөрчлөх үүрэгтэй.

setDefaultColor() функц нь анхдагч өнгийг өөрчлөх үүрэгтэй.

defaultColor() функц нь үндсэн дэвсгэр өнгийг тохируулдаг.

Дараа нь үйл явдлын зохицуулагч хэлбэрээр шинж чанаруудтай холбоосууд байдаг. Холбоос дээр хулганаа аваачихад MouseOver үйл явдал үүснэ, үүний дагуу onMouseOver үйл явдлын зохицуулагч setTempColor() функцийг дуудаж харгалзах параметрийг дамжуулна. Элементээс хулганыг устгах үед MouseOut үйл явдал гарч, дараа нь defaultColor() функц дуудагдах бөгөөд энэ нь дэвсгэр өнгийг үндсэн өнгө болгон тохируулдаг. Эцэст нь хулгана холбоос дээр дарахад (onClick зохицуулагч) setDefaultColor() функц дуудагддаг бөгөөд энэ нь параметрт заасан өнгийг үндсэн дэвсгэр өнгө болгон тохируулдаг. Таны харж байгаагаар бүх зүйл маш энгийн.

Энэ бол JavaScript дахь үйл явдлуудыг ашиглах зарчим байсан бөгөөд дараа нь бүх зүйл зөвхөн таны төсөөллөөс хамаарна!

Зарим програмуудыг ашиглаж байна JavaScript үйл явдалхэрэглэгчийн оруулгатай шууд ажиллах. Ийм харилцан үйлчлэлийн үе, дарааллыг урьдчилан таамаглах боломжгүй юм.

Үйл явдал зохицуулагчид

Түлхүүрийг дахин суллахаас өмнө дарах агшинг барьж авахын тулд түүний төлөвийг байнга уншиж, товчлуур дарахад хариу үйлдэл үзүүлж болно.

Өгөгдлийн оролтыг анхдагч машинууд дээр ингэж боловсруулсан. Илүү дэвшилтэт зүйл бол товчлуурын цохилтыг илрүүлж, дараалалд оруулах явдал юм. Дараа нь програм нь шинэ үйл явдлын дарааллыг үе үе шалгаж, тэндээс олж мэдсэн зүйлдээ хариу үйлдэл үзүүлэх боломжтой. Энэ тохиолдолд програм нь дарааллыг сканнердахаа санаж, байнга хийх ёстой.

Товчлуур дарахаас эхлээд програм нь энэ үйл явдлыг илрүүлэх хүртэлх хугацаанд энэ нь хүсэлтэд хариу өгөхгүй. Энэ аргыг санал асуулга (судалгаа) гэж нэрлэдэг.

Ихэнх програмистууд боломжтой бол үүнээс зайлсхийхийг хичээдэг.

Үйл явдал тохиолдоход нь хариу үйлдэл үзүүлэх чадварыг кодонд өгөх системийг хэрэгжүүлэх нь хамгийн сайн арга юм. Хөтөчүүд үүнийг тодорхой JavaScript үйл явдлуудын зохицуулагч функцийг бүртгэх замаар хэрэгжүүлдэг:

Энэ документ дээр дарж зохицуулагчийг идэвхжүүлнэ үү.

addEventListener("товшилт", функц() ( console.log("Та дарсан!"); ));

addEventListener функц нь бүртгэгдсэн тул эхний аргументаар тайлбарласан үйл явдал тохиолдох бүрт түүний хоёр дахь аргумент дуудагдана.

Үйл явдал ба DOM зангилаа

Хөтөч үйл явдлын зохицуулагч бүр контекстээр бүртгэгдсэн. AddEventListener функцийг дуудах үед энэ нь бүхэл бүтэн цонхны арга гэж дуудагддаг, учир нь хөтөч дээр глобал хүрээ нь дараахтай тэнцүү байдаг. цонхны объект. DOM элемент бүр өөрийн гэсэн addEventListener аргатай бөгөөд энэ нь тухайн элемент дээрх үйл явдлыг тусгайлан сонсох боломжийг олгодог:

Над дээр дарна уу

Энд зохицуулагч байхгүй.

var товч = document.querySelector("товчлуур"); button.addEventListener("товшилт", функц() ( console.log("Товчлуур дарагдсан."); ));

IN энэ жишээндзохицуулагч нь товчлуурын зангилаатай холбогдсон байна. JavaScript хулганы үйл явдлууд нь зохицуулагчийг ажиллуулдаг боловч баримт бичгийн бусад хэсэгт товших нь тийм биш юм.

Зангилааны onclick шинж чанарыг тохируулснаар бид ижил үр дүнд хүрнэ. Гэхдээ зангилаа нь зөвхөн нэг onclick шинж чанартай байдаг тул та зангилаа бүрт зөвхөн нэг зохицуулагч бүртгүүлэх боломжтой. addEventListener арга нь танд ямар ч тооны зохицуулагч нэмэх боломжийг олгодог. Ингэснээр бид аль хэдийн бүртгэгдсэн процессорыг санамсаргүйгээр солихоос даатгалд хамрагдах болно.

RemoveEventListener аргыг addEventListener -тэй төстэй аргументуудаар дууддаг. Энэ нь зохицуулагчийг устгана:

Нэг удаагийн товчлуур var товчлуур = document.querySelector("товч"); функц нэг удаа() ( console.log("Дууссан."); button.removeEventListener("товшилт", нэг удаа); ) button.addEventListener("товшилт", нэг удаа);

Ажиллагч функцийг цуцлахын тулд бид түүнд нэр өгдөг (жишээлбэл, нэг удаа). Тиймээс бид үүнийг addEventListener болон removeEventListener хоёуланд нь дамжуулдаг.

Үйл явдлын объектууд

Дээрх жишээнүүдэд бид үүнийг дурдаагүй ч JavaScript-н үйл явдал зохицуулагч функцэд аргумент дамжуулагдсан: үйл явдлын объект. Энэ нь үйл явдлын талаар нэмэлт мэдээлэл өгдөг. Жишээлбэл, хэрэв бид хулганы аль товчийг дарсныг мэдэхийг хүсвэл ямар үйл явдлын объектын шинж чанарын утгыг авах хэрэгтэй:

Миний дээр хулганы дурын товчлуураар дарна уу var товч = document.querySelector("button"); button.addEventListener("хулганы доош", функц(үйл явдал) ( if (үйл явдал.which == 1) console.log("Зүүн товчлуур"); else if (event.which == 2) console.log("Дунд товч" ); else if (event.which == 3) console.log("Баруун товч"); ));

Тухайн объектод хадгалагдсан мэдээлэл нь үйл явдлын төрлөөс хамаарч өөр өөр байдаг. Объектийн төрлийн шинж чанар нь үйл явдлыг тодорхойлох мөрийг үргэлж агуулж байдаг (жишээ нь, "товших" эсвэл "хулганаа доошлуулах").

Тархаж байна

Эцэг эхийн зангилаанд бүртгүүлсэн үйл явдал зохицуулагчид (JavaScript-ийн мэдрэгчтэй үйл явдлууд гэх мэт) мөн хүүхэд элементүүд дээр тохиолдох үйл явдлыг хүлээн авах болно. Хэрэв догол мөр доторх товчлуурыг дарсан бол догол мөрийн үйл явдал зохицуулагчид мөн хүлээн авах болно үйл явдлыг товшино уу.

Үйл явдал болсон зангилаанаас эх цэг болон баримт бичгийн үндэс рүү тархдаг. Тодорхой зангилаанд бүртгэгдсэн бүх зохицуулагчид ээлжлэн арга хэмжээ авсны дараа бүхэл цонхонд бүртгэгдсэн зохицуулагчид үйл явдалд хариу өгөх боломжтой болно.

Ямар ч үед үйл явдлыг зохицуулагч нь үйл явдлыг цаашид тархахаас сэргийлэхийн тулд үйл явдлын объект дээрх stopPropagation аргыг дуудаж болно. Хэрэв та өөр интерактив элемент дотор товчлуур байгаа бол энэ нь ашигтай байж болох бөгөөд та гадаад элементүүд дээр дарахад тодорхойлогдсон үйлдлийг өдөөх товчлуурыг дарахыг хүсэхгүй байна.

Дараах жишээнд бид товчлуур болон догол мөрийн аль алинд нь "MouseDown" зохицуулагчийг бүртгэдэг. Таныг хулганы баруун товчийг дарахад (JavaScript хулганы үйл явдал) зохицуулагч stopPropagation аргыг дууддаг бөгөөд энэ нь догол мөр зохицуулагчийг ажиллуулахаас сэргийлдэг. Та өөр хулганы товчлуураар товчлуур дээр дарахад хоёр зохицуулагчийг ажиллуулна:

Догол мөр ба товчлуур.

var para = document.querySelector("p"); var товч = document.querySelector("товчлуур"); para.addEventListener("хулгана доош буулгах", функц() ( console.log("Догол мөрийг зохицуулагч."); )); button.addEventListener("хулганы доош буулгах", функц(үйл явдал) ( console.log("Товчлуурыг зохицуулагч."); if (event.which == 3) event.stopPropagation(); ));

Ихэнх үйл явдлын объектууд нь үүссэн цэгийг заадаг зорилтот шинж чанартай байдаг. Та зангилаанаас дээш тархаж буй үйл явдлыг санамсаргүйгээр зохицуулахаас зайлсхийхийн тулд энэ өмчийг ашиглаж болно.

Та мөн тодорхой төрлийн үйл явдлын хамрах хүрээг өргөтгөхийн тулд JavaScript үйл явдлын зорилтыг ашиглаж болно. Жишээлбэл, хэрэв танд товчлууруудын урт жагсаалт агуулсан зангилаа байгаа бол бүх товчлуурын зохицуулагчийн тохиолдлуудыг бүртгэхийн оронд гадна талын зангилаанд нэг товшилтын зохицуулагчийг бүртгэж, товчлуур дарагдсан эсэхийг хянах зорилтот шинж чанарыг ашиглах нь илүү тохиромжтой.

A B C document.body.addEventListener("товшилт", функц(үйл явдал) (хэрэв (event.target.nodeName == "BUTTON") console.log("Clicked", event.target.textContent); ));

Өгөгдмөл үйлдлүүд

Олон үйл явдал нь тэдгээртэй холбоотой анхдагч үйлдлүүдтэй байдаг. Хэрэв та холбоос дээр дарвал энэ нь таныг холбоосын зорилтот элемент рүү хөтлөх болно. Хэрэв та доош сумыг дарвал хөтөч хуудсыг доош гүйлгэх болно. Хэрэв та хулганы баруун товчийг дарвал контекст цэс нээгдэнэ.

Ихэнх үйл явдлын төрлүүдийн хувьд өгөгдмөл үйлдлүүдийг хийхээс өмнө JavaScript үйл явдлын зохицуулагчийг дууддаг. Хэрэв та анхдагч үйлдэл гарахыг хүсэхгүй байгаа бол үйл явдлын объект дээр preventDefault аргыг дуудах ёстой.

Гарын товчлол эсвэл контекст цэсийг хэрэгжүүлэхийн тулд үүнийг ашиглана уу. Эсвэл хэрэглэгчдийн хүлээж буй зан үйлийг хүчингүй болгох. Доорх холбоосыг дагаж мөрдөх боломжгүй.

MDN var холбоос = document.querySelector("a"); link.addEventListener("товшилт", функц(үйл явдал) ( console.log("Үгүй."); event.preventDefault(); ));

Хэрэв танд хангалттай шалтгаан байхгүй бол үүнийг хийхгүй байхыг хичээгээрэй.

Хөтөчөөс хамааран зарим үйл явдлыг таслан зогсоохгүй байж болно. IN Гүүгл Кромжишээлбэл, одоогийн табыг (Ctrl-W эсвэл Command-W) хаах гарын товчлолыг (JavaScript үйл явдлын түлхүүр код) JavaScript ашиглан боловсруулах боломжгүй.

Гол үйл явдлууд

Хэрэглэгч гар дээрх товчлуурыг дарахад хөтөч нь "keydown" үйлдлийг ажиллуулдаг. Тэр түлхүүрийг гаргахад "keyup" үйл явдал асна:

V товчийг дарахад энэ хуудас нил ягаан өнгөтэй болно.

addEventListener("keydown", функц(үйл явдал) (хэрэв (event.keyCode == 86) document.body.style.background = "violet"; )); addEventListener("keyup", функц(үйл явдал) (хэрэв (event.keyCode == 86) document.body.style.background = ""; ));

Энэ үйл явдал нь хэрэглэгч товчлуурыг дарж, дарсан үед эсвэл товчлуурыг дарж байх үед бас асдаг. Жишээлбэл, хэрэв та тоглоомын дүрийн хурдыг сумтай товчлуур дээр дарж нэмэгдүүлэхийг хүсч байгаа бол товчлуурыг суллаж дахин багасгахыг хүсвэл товчлуур дарах бүрт хурдыг нэмэгдүүлэхээс болгоомжлох хэрэгтэй.

Өмнөх жишээ нь үйл явдлын объектын JavaScript-н түлхүүр кодыг ашигласан. Түүний тусламжтайгаар аль товчлуур дарагдсан эсвэл суллагдсаныг тодорхойлно. Түлхүүрийн тоон кодыг бодит түлхүүр рүү хэрхэн хөрвүүлэх нь үргэлж тодорхой байдаггүй.

Юникод тэмдэгтийн код нь үсэг болон тооны түлхүүрийн утгыг уншихад ашиглагддаг. Энэ нь товчлуур дээр заасан үсэг (том үсэг) эсвэл тоотой холбоотой байдаг. Мөртүүдийн charCodeAt арга нь дараах утгыг авах боломжийг танд олгоно.

console.log("Violet".charCodeAt(0)); // → 86 console.log("1".charCodeAt(0)); // → 49

Бусад түлхүүрүүд нь тэдэнтэй холбоотой урьдчилан таамаглах боломжгүй түлхүүр кодуудтай байдаг. Хамгийн зөв замТанд хэрэгтэй кодыг тодорхойлох нь туршилтын асуудал юм. Хүлээн авсан товчлуурын кодыг авч хүссэн товчлуурыг дарах товчлуур дарах үйл явдлын зохицуулагчийг бүртгүүлнэ үү.

Shift, Ctrl, Alt зэрэг товчлуурууд нь ердийн товчлуурууд шиг үйл явдлуудыг үүсгэдэг. Гэхдээ товчлуурын хослолыг хянахдаа эдгээр товчлуурууд нь гарын үйл явдал болон JavaScript хулганы үйл явдлын шинж чанараар дарагдсан эсэхийг тодорхойлох боломжтой: shiftKey , ctrlKey , altKey болон metaKey :

Үргэлжлүүлэхийн тулд Ctrl-Space товчийг дарна уу.

addEventListener("keydown", функц(үйл явдал) (if (event.keyCode == 32 && event.ctrlKey) console.log("Үргэлжлэл!"); ));

"Keldown" болон "keyup" үйл явдлууд нь бодит товчлуур даралтын талаарх мэдээллийг өгдөг. Гэхдээ бидэнд оруулах текст өөрөө хэрэгтэй бол яах вэ? Түлхүүр кодуудаас текст авах нь тохиромжгүй. Үүний тулд "keypress" гэсэн үйл явдал байдаг бөгөөд энэ нь "keydown"-ын дараа шууд ажилладаг. Энэ нь товчлуурыг дарах үед "keydown"-ын хамт давтагдана. Гэхдээ зөвхөн тэмдэгт оруулах товчлууруудын хувьд.

Үйл явдлын объект дээрх charCode шинж чанар нь Юникод тэмдэгтийн код гэж тайлбарлах кодыг агуулдаг. Бид энэ кодыг нэг тэмдэгтийн мөр болгон хөрвүүлэхийн тулд String.fromCharCode функцийг ашиглаж болно.

Энэ хуудсанд оруулах фокусыг тохируулаад ямар нэг зүйл бичнэ үү.

addEventListener("товчлуур дарах", функц(үйл явдал) ( console.log(String.fromCharCode(event.charCode)); ));

Үйл явдал болох DOM зангилаа нь товчлуур дарахад оролтын фокустай байсан элементээс хамаарна. Энгийн зангилаанууд нь оролтын фокустай байж болохгүй (хэрэв та tabindex шинж чанарыг тэдэнд тохируулахгүй бол), гэхдээ холбоос, товчлуур, маягтын талбар зэрэг элементүүд боломжтой.

Хэрэв ямар ч тодорхой элемент оролтын фокус байхгүй бол гол үйл явдлууд болон JavaScript мэдрэгчтэй үйл явдлын зорилтот зангилаа нь document.body болно.

Хулгана товших

Мөн хулганы товчийг дарснаар хэд хэдэн үйл явдлууд гарч ирдэг. "Mousedown" болон "mouseup" үйл явдлууд нь "keydown" болон "keyup" үйл явдлуудтай төстэй. Хулганы товчлуурыг дарж, суллахад тэдгээр нь идэвхждэг. Эдгээр үйл явдлууд нь үйл явдал тохиолдох үед дээр хулганыг байрлуулсан DOM зангилаанууд дээр тохиолддог.

Хулгана дарах, суллах аль аль нь байдаг хуваалцсан зангилааны хувьд mouseup үйл явдлын дараа товших үйл явдал идэвхждэг. Жишээлбэл, хэрэв та нэг зүйл дээр хулганы товчийг дарж, курсорыг өөр зүйл рүү шилжүүлж, товчлуурыг суллавал эдгээр хоёр зүйлийг агуулсан элемент дээр дарах үйл явдал тохиолдох болно.

Хэрэв хоёр товшилт нь хоорондоо ойрхон байвал "dblclick" (давхар товшилт) үйл явдлыг мөн ажиллуулдаг. Энэ нь хоёр дахь товшилтын дараа гарч ирнэ. Хулганы үйл явдал болсон байршлын талаар нарийн мэдээлэл авахын тулд баримтын зүүн дээд буланд хамаарах үйл явдлын координатыг (пикселээр) агуулсан pageX болон pageY шинж чанаруудын утгыг авах шаардлагатай.

Доорх нь энгийн зургийн программын хэрэгжилт юм. Баримт бичигт хулганыг дарах бүрт (курсорын доор) цэг нэмэгдэнэ.

их бие ( өндөр: 200px; дэвсгэр: шаргал; ) .цэг (өндөр: 8px; өргөн: 8px; хүрээ-радиус: 4px; /* дугуйрсан булан */ дэвсгэр: цэнхэр; байрлал: үнэмлэхүй; ) addEventListener("товшилт", функц (үйл явдал) ( var dot = document.createElement("div"); dot.className = "цэг"; dot.style.left = (event.pageX - 4) + "px"; dot.style.top = (үйл явдал) .pageY - 4) + "px"; document.body.appendChild(цэг); ));

ClientX болон clientY шинж чанарууд нь pageX болон pageY -тэй төстэй боловч тэдгээр нь баримт бичгийн харагдах хэсэгтэй холбоотой. Тэдгээрийг хулганын координатыг getBoundingClientRect функцээр буцаасан координаттай харьцуулахад ашиглаж болно.

Хулганы хөдөлгөөн

Хулганыг хөдөлгөх бүрт JavaScript хулганы үйл явдлын багцаас "mousemove" үйл явдал идэвхждэг. Үүнийг хулганы байрлалыг хянах боломжтой. Үүнийг хулганаар элементүүдийг чирэх чадварыг хэрэгжүүлэхэд ашигладаг.

Дараах жишээн дээр програм нь самбарыг харуулж, үйл явдал зохицуулагчийг тохируулж, чирэх үед самбарыг нарийсгах эсвэл илүү өргөн болгоно.

Самбарын өргөнийг өөрчлөхийн тулд ирмэгийг чирнэ үү:

var lastX; // Хулганы сүүлийн X байрлалыг хянах var rect = document.querySelector("div"); rect.addEventListener("хулганыг доош буулгах", функц(үйл явдал) ( хэрэв (үйл явдал.which == 1) ( lastX = event.pageX; addEventListener("mousemove", шилжсэн); event.preventDefault(); // Сонголтоос сэргийлнэ ) ) ); function buttonPressed(event) ( if (event.buttons == null) return event.whh != 0; else return event.buttons != 0; ) function moved(event) ( if (!buttonPressed(event))) ( removeEventListener( "хулганыг хөдөлгөх", зөөгдсөн); ) else ( var dist = event.pageX - lastX; var newWidth = Math.max(10, rect.offsetWidth + dist); rect.style.width = newWidth + "px"; lastX = үйл явдал .pageX; ) )

"Mousemove" зохицуулагч нь бүхэл цонхонд бүртгэгдсэн гэдгийг анхаарна уу. Хэмжээг өөрчлөх үед хулгана самбараас гарсан ч бид самбарын өргөнийг шинэчилж, хулганы товчлуурыг суллахад JavaScript-ийн мэдрэгчтэй үйлдлийг зогсооно.

Хэрэглэгч хулганы товчийг суллахад бид самбарын хэмжээг өөрчлөхөө зогсоох ёстой. Харамсалтай нь бүх хөтчүүд хулгана хөдөлгөх үйл явдлуудын аль шинж чанарыг тохируулдаггүй. Үүнтэй төстэй мэдээллийг өгдөг стандарт товчлуурын шинж чанар байдаг боловч бүх хөтөч дээр үүнийг дэмждэггүй. Аз болоход, бүх гол хөтчүүд нэг зүйлийг дэмждэг: товчлуур эсвэл аль нь . Дээрх жишээн дээрх buttonPressed функц нь эхлээд товчлуурын шинж чанарыг ашиглахыг оролдох бөгөөд хэрэв боломжгүй бол аль .

Хулгана зангилааны дээгүүр хөдөлж эсвэл орхих үед "хулгана гүйх" эсвэл "хулганаас гарах" үйл явдлууд идэвхждэг. Тэдгээрийг хулганын эффект үүсгэх, зарим төрлийн тайлбарыг харуулах эсвэл элементийн хэв маягийг өөрчлөхөд ашиглаж болно.

Ийм эффектийг бий болгохын тулд хулганаар гүйх үйл явдал тохиолдоход үүнийг зүгээр л харуулж эхэлж, хулганыг хөдөлгөсний дараа дуусгах нь хангалтгүй юм. Хулгана зангилаанаас түүний хүүхдүүдийн аль нэг рүү шилжих үед эх зангилаанд "хулгана гарах" үйл явдал үүснэ. Хэдийгээр хулганы заагч зангилааны тархалтын хүрээнээс гараагүй байна.

Бүр дордуулахын тулд эдгээр JavaScript-н үйл явдлууд нь бусад үйл явдлуудын нэгэн адил тархдаг. Хулгана зохицуулагч бүртгэгдсэн хүүхдийн зангилааны аль нэгийг орхих үед "mouseout" үйл явдал үүснэ.

Энэ асуудлыг шийдвэрлэхийн тулд та холбогдохTarget үйл явдлын объектын шинж чанарыг ашиглаж болно. "Хулганаар гүйх" үйл явдал тохиолдоход өмнө нь аль элемент дээр хулганыг аваачиж байсныг заана. Мөн "хулгана" гарсан тохиолдолд заагчийг аль элемент рүү шилжүүлнэ. Холбогдох Зорилтот нь зорилтот зангилааны гадна байгаа үед л бид хулганы гүйлтийн эффектийг өөрчлөх болно.

Энэ тохиолдолд хулгана зангилааны гадна талд (эсвэл эсрэгээр) гүйж байсан тул бид зан төлөвийг өөрчилж байна.

Энэ догол мөр дээр хулганаа ав.

var para = document.querySelector("p"); function isInside(зангилаа, зорилт) ( хувьд (; зангилаа != null; зангилаа = node.parentNode) хэрэв (зангилаа == зорилт) үнэнийг буцаана; ) para.addEventListener("хулганы гүйлгэх", функц(үйл явдал) ( хэрэв ( !isInside (event.relatedTarget, para)) para.style.color = "улаан"; )); para.addEventListener("mouseout", function(event) ( if (!isInside(event.relatedTarget, para)) para.style.color = ""; ));

isInside функц нь тухайн зангилааны эх холбоосыг эсвэл түүнд хүрэх хүртэл хянадаг дээд хэсэгбаримт бичиг (зангилаа null байх үед). Эсвэл бидэнд хэрэгтэй эх элемент олдохгүй.

Дараах жишээнд үзүүлсэн шиг CSS: hover псевдо сонгогчийг ашиглан hover эффект үүсгэх нь илүү хялбар байдаг. Хэрэв хулганын эффект нь зорилтот зангилааны хэв маягийг өөрчлөхөөс илүү төвөгтэй зүйлтэй холбоотой бол та хулганы гүйлгэх, хулганыг зөөх үйл явдлуудыг (JavaScript хулганы үйл явдлууд) ашиглан заль мэхийг ашиглах хэрэгтэй.

Үйл явдлыг гүйлгэх

Элементийг гүйлгэх болгонд JavaScript гүйлгэх үйл явдал түүн дээр ажилладаг. Үүнийг юу байгааг хянахад ашиглаж болно Энэ мөчхэрэглэгч үзсэн; харах цонхны гадна байрлах хөдөлгөөнт дүрсийг идэвхгүй болгох.

Дараах жишээнд бид баримт бичгийн баруун дээд буланд ахиц дэвшлийн мөрийг үзүүлж, хуудсыг доош гүйлгэх үед хэсэг хэсгээр нь өөр өнгөөр ​​дүүргэхийн тулд шинэчилнэ.

.progress ( хүрээ: 1px цул цэнхэр; өргөн: 100px; байрлал: тогтмол; дээд: 10px; баруун: 10px; ) .progress > div (өндөр: 12px; дэвсгэр: цэнхэр; өргөн: 0%; ) их бие ( өндөр: 2000px ;)

Намайг гүйлгэ...

var bar = document.querySelector(".progress div"); addEventListener("scroll", function() ( var max = document.body.scrollHeight - innerHeight; var хувь = (pageYOffset / max) * 100; bar.style.width = хувь + "%"; ));

Элементийн байрлал эсвэл тогтмол шинж чанарыг тохируулснаар бид байрлал:абсолютыг тохируулахтай ижил үр дүнд хүрнэ. Гэхдээ энэ нь элементийг баримт бичгийн бусад хэсэгтэй хамт гүйлгэхээс хаадаг. Үүний үр дүнд ахиц дэвшлийн үзүүлэлт дээд буланд статик байдлаар бэхлэгдэх болно. Дотор нь өөр нэг элемент байгаа бөгөөд хэмжээ нь одоогийн ахиц дэвшлийн дагуу өөрчлөгддөг.

Өргөнийг тохируулахдаа бид px биш харин % хэмжигдэхүүнийг ашигладаг бөгөөд ингэснээр элементийн хэмжээсүүд явцын талбарын хэмжээтэй пропорциональ өөрчлөгддөг.

Глобал хувьсагч innerHeight нь цонхны өндрийг агуулдаг бөгөөд бид үүнийг баримт бичгийн нийт боломжтой гүйлгэх өндрөөс хасах ёстой. Та баримт бичгийн доод хэсэгт хүрэх үед цонхыг доош гүйлгэх боломжгүй. innerHeight-тай innerWidth-ийг мөн ашиглаж болно. pageYOffset (одоогийн гүйлгэх хайрцагны байрлал)-ыг зөвшөөрөгдсөн хамгийн их гүйлгэх байрлалд хувааж, 100-аар үржүүлэх нь явцын талбарын хувийг өгнө.

JavaScript гүйлгэх үйл явдал дээр preventDefault дуудах нь гүйлгэхээс сэргийлдэггүй. Үйл явдал зохицуулагчийг зөвхөн гүйлгэж дууссаны дараа дууддаг.

Фокус үйл явдлыг оруулах

Элемент нь оролтын фокустай үед хөтөч үүн дээр "фокус" үйл явдлыг ажиллуулдаг. Оролтын фокусыг арилгах үед "бүдэгрүүлэх" үйл явдал идэвхждэг.

Энэ хоёр үйл явдал тархдаггүй. Хүүхдийн элемент нь оролтын фокустай үед эх элементийн зохицуулагчид мэдэгддэггүй.

Дараах жишээ нь зааварчилгааг харуулж байна текст талбар, одоогоор оролтод анхаарлаа хандуулж байна:

Нэр:

Нас:

var help = document.querySelector("#help"); var талбарууд = document.querySelectorAll("оролт"); for (var i = 0; i< fields.length; i++) { fields[i].addEventListener("focus", function(event) { var text = event.target.getAttribute("data-help"); help.textContent = text; }); fields[i].addEventListener("blur", function(event) { help.textContent = ""; }); }

Цонхны объект нь тухайн баримт бичгийг харуулсан хөтчийн цонх руу шилжих эсвэл гарах үед "фокус" болон "бүдгэрүүлэх" үйл явдлуудыг хүлээн авдаг.

Үйл явдлыг ачаалах

Хуудсыг ачаалж дуусахад баримт бичгийн бие болон цонхны объектуудад JavaScript-н "ачаалах" үйл явдал гарч ирнэ. Энэ нь баримт бичгийг бүхэлд нь ачаалах шаардлагатай үйлдлүүдийг эхлүүлэх хуваарь гаргахад ашиглагддаг. Энэ шошготой тулгарах үед контент шууд нээгддэг гэдгийг бүү мартаарай. Заримдаа хэтэрхий эрт байдаг. Жишээлбэл, скрипт нь .

мөн гадаад файлуудыг ачаалах скрипт хаягууд нь мөн "ачаалах" үйл явдлыг агуулна. Энэ нь тэдэнтэй холбоотой файлыг татаж авсныг харуулж байна. Оролтын фокусын үйл явдлуудын нэгэн адил ачааллын үйл явдлууд тархдаггүй.

Бид хуудсыг хаах эсвэл өөр хуудас руу шилжих үед (жишээ нь, холбоос дээр дарж) "буулгахаас өмнө" үйл явдал идэвхждэг. Энэ нь хэрэглэгчийг баримт бичгийг хаасны дараа ажиллаж байсан зүйлээ санамсаргүйгээр алдахаас урьдчилан сэргийлэхэд ашиглагддаг.

Хуудсыг буулгахаас урьдчилан сэргийлэх нь preventDefault аргыг ашиглан хийгддэггүй. Үүний оронд зохицуулагчаас тэмдэгт мөрийг буцаана. Энэ нь хэрэглэгчээс хуудсан дээр үлдэх эсвэл орхих эсэхийг асуух харилцах цонхонд ашиглагддаг. Энэ механизм нь зочдыг хуудсан дээр байлгах зорилготой хортой скрипт ажиллаж байсан ч гэсэн хэрэглэгч хуудсыг орхих боломжийг олгодог.

Скриптийг гүйцэтгэх дараалал

Янз бүрийн хүчин зүйлүүд скриптийн гүйцэтгэлийг өдөөж болно: шошгыг унших, үйл явдал тохиолдох. requestAnimationFrame арга нь дараагийн хуудсыг дахин бүтээхээс өмнө функцийн дуудлагыг зааж өгдөг. Энэ бол скриптүүдийг ажиллуулах өөр нэг арга юм.

JavaScript-н үйл явдлуудыг сонгох ба бусад нь хүссэн үедээ ажиллах боломжтой боловч нэг баримт бичигт хоёр скрипт нэгэн зэрэг асахгүй. Хэрэв скрипт аль хэдийн ажиллаж байгаа бол өөр скриптээр төлөвлөсөн үйл явдал зохицуулагчид болон кодын хэсгүүд ээлжээ хүлээх хэрэгтэй болно. Энэ нь скрипт удаан хугацаанд ажиллах үед баримт бичиг хөлддөг шалтгаан юм. Хөтөч нь товшилт болон бусад үйл явдлуудад хариу өгөхгүй, учир нь одоогийн скрипт ажиллаж дуусах хүртэл үйл явдал зохицуулагчийг ажиллуулж чадахгүй.

Зарим програмчлалын орчин нь нэгэн зэрэг ажилладаг хэд хэдэн гүйцэтгэлийн хэлхээ үүсгэх боломжийг танд олгодог. Олон ажлыг нэгэн зэрэг гүйцэтгэх боломжийг өгснөөр та програмын гүйцэтгэлийн хурдыг нэмэгдүүлэх боломжтой. Гэхдээ бид системийн ижил хэсгүүдэд нэгэн зэрэг нөлөөлөх олон үйлдэлтэй байх үед программ үүнийг гүйцэтгэхэд илүү хэцүү болно.

Хэрэв та процессуудыг ажиллуулах шаардлагатай бол дэвсгэрХуудсыг царцаахгүйгээр хөтчүүд бидэнд вэб ажилчид гэж нэрлэгддэг зүйлсийг өгдөг. Энэ нь үндсэн програмын зэрэгцээ баримт бичиг дээр ажилладаг JavaScript хамгаалагдсан хязгаарлагдмал орчин бөгөөд зөвхөн мессеж илгээх, хүлээн авах замаар түүнтэй харилцах боломжтой.

code/squareworker.js нэртэй файлд дараах код байна гэж бодъё:

addEventListener("мессеж", функц(үйл явдал) ( postMessage(үйл явдал.дата * үйл явдал.өгөгдөл); ));

Таны квадрат болгож буй тоо нь маш том, тооцоолоход урт бөгөөд та арын дэвсгэр дээр тооцоолол хийх хэрэгтэй гэж төсөөлөөд үз дээ. Энэ код нь вэб ажилчдыг эхлүүлж, түүнд зарим мессеж илгээж, хариултуудыг хэвлэдэг:

var squareWorker = new Worker("code/squareworker.js"); squareWorker.addEventListener("мессеж", функц(үйл явдал) ( console.log("Ажилчин хариулсан:", event.data); )); squareWorker.postMessage(10); squareWorker.postMessage(24);

PostMessage функц нь хүлээн авагч дээр мессежийн үйл явдлыг өдөөдөг мессежийг илгээдэг. Вэб ажилчдыг үүсгэсэн скрипт нь Worker объектоор дамжуулан мессеж илгээж, хүлээн авдаг. Энэ объектыг ашигласнаар орчин нь түүнийг үүсгэсэн скрипттэй харилцаж, мэдээлэл илгээж, анхны скриптээрээ глобал хэмжээнд нь сонсдог.

Цаг хэмжигчийг тохируулах

setTimeout функц нь requestAnimationFrame-тэй төстэй. Энэ нь дараа нь дуудагдах өөр функцийг дууддаг. Гэхдээ дараагийн удаа хуудсыг үзүүлэхэд функцийг дуудахын оронд тодорхой тооны миллисекунд хүлээх болно. Тэр нь JavaScript жишээХоёр секундын дараа хуудасны дэвсгэр цэнхэрээс шар болж хувирна:

document.body.style.background = "цэнхэр"; setTimeout(функц() ( document.body.style.background = "шар"; ), 2000);

Заримдаа бид төлөвлөсөн функцээ цуцлах хэрэгтэй болдог. Үүнийг setTimeout-ийн буцаах утгыг хадгалж, түүн дээр clearTimeout дуудах замаар хийдэг.

var bombTimer = setTimeout(function() ( console.log("BOOM!"); ), 500); хэрэв (Math.random()< 0.5) { // 50% chance console.log("Defused."); clearTimeout(bombTimer); }

cancelAnimationFrame функц нь clearTimeout-тай адил ажилладаг. Хүрээг цуцлахын тулд (хэрэв дуудаагүй бол) requestAnimationFrame-ийн буцаасан утгаар дуудагдана.

Х миллисекунд тутамд үйлдлийг давтах таймер тохируулахад ижил төстэй багц функцууд болох setInterval болон clearInterval-ийг ашигладаг:

var ticks = 0; var clock = setInterval(function() ( console.log("шалз", хачиг++); if (хачигдах == 10) (clearInterval(цаг); console.log("зогсоох."); ) ), 200);

Хагалах

Зарим үйл явдлын төрлийг богино хугацаанд олон удаа ажиллуулж болно ("mousemove" болон javascript scroll үйл явдал гэх мэт). Ийм үйл явдлуудтай харьцахдаа энэ нь хэтэрхий удаан хугацаа шаардахгүй гэдгийг анхаарах хэрэгтэй, эс тэгвээс зохицуулагч үйлдэл хийхэд удаан хугацаа шаардагдах тул баримт бичигтэй харилцах нь удаан, тасархай болно.

Хэрэв та ийм зохицуулагч дээр стандарт бус зүйл хийх шаардлагатай бол энэ нь хэтэрхий удаан үргэлжлэхгүй байхын тулд setTimeout ашиглаж болно. Үүнийг ихэвчлэн үйл явдлыг хуваах гэж нэрлэдэг. Бутлах хэд хэдэн өөр арга байдаг.

Эхний жишээнд бид хэрэглэгч бичиж байх үед ямар нэгэн зүйл хийхийг хүсч байна. Гэхдээ бид товчлуур дарах үйлдэл бүрийн дараа үүнийг хийхийг хүсэхгүй байна. Хэрэглэгч хурдан бичиж байх үед та завсарлага авах хүртэл хүлээх хэрэгтэй. Үйлдлийн зохицуулагч дээрх үйлдлийг шууд гүйцэтгэхийн оронд бид саатал тогтоосон. Бид мөн өмнөх саатлыг (хэрэв байгаа бол) арилгана. Хэрэв үйл явдал богино хугацаанд (бидний тогтоосон саатлаас бага) тохиолдвол өмнөх үйл явдлын саатал цуцлагдана:

Энд ямар нэг зүйл бичнэ үү... var textarea = document.querySelector("textarea"); var timeout; textarea.addEventListener("keydown", function() ( clearTimeout(цаг хугацаа); timeout = setTimeout(function() ( console.log("Та бичихээ больсон."); ), 500); ));

clearTimeout-д тодорхойгүй утгыг дамжуулах эсвэл аль хэдийн ажиллаж байгаа саатал дээр дуудах нь ямар ч нөлөө үзүүлэхгүй. Бид үүнийг хэзээ дуудах талаар болгоомжтой байх шаардлагагүй болсон, бид үүнийг зөвхөн үйл явдал болгонд хийдэг.

Хэрэв та хариултуудыг богино хугацаанд салгах шаардлагатай бол өөр скрипт ашиглаж болно. Гэхдээ үүнтэй зэрэгцэн тэдгээрийг зөвхөн дараа нь биш хэд хэдэн арга хэмжээний үеэр эхлүүлэх хэрэгтэй. Жишээлбэл, та хулганы хөдөлгөх үйл явдлуудын хариуд (JavaScript хулганы үйл явдлууд) одоогийн хулганы координатыг илгээж болно, гэхдээ зөвхөн 250 миллисекунд тутамд:

function displayCoords(event) ( document.body.textContent = "хулгана " + event.pageX + ", " + event.pageY; ) var scheduled = false, lastEvent; addEventListener("mousemove", function(event) ( lastEvent = үйл явдал; хэрэв (! хуваарьтай) ( хуваарьтай = үнэн; setTimeout(функц) ( хуваарьтай = худал; displayCoords(lastEvent); ), 250); ) ));

Дүгнэлт

Үйл явдал зохицуулагчид бидэнд шууд хяналт тавих боломжгүй үйл явдлыг илрүүлж, хариу өгөх боломжийг олгодог. Ийм зохицуулагчийг бүртгүүлэхийн тулд addEventListener аргыг ашиглана уу.

Үйл явдал бүр нь түүнийг тодорхойлдог тодорхой төрөлтэй ("товчлуур", "фокус" гэх мэт). Ихэнх үйл явдлууд нь тодорхой DOM элемент дээр үүсэж, дараа нь элементийн эх зангилаа руу тархдаг. Энэ нь эдгээр элементүүдтэй холбоотой зохицуулагчдад тэдгээрийг боловсруулах боломжийг олгодог.

Зохицуулагчийг дуудах үед түүнд үйл явдлын объект дамжуулагдана нэмэлт мэдээлэлүйл ажиллагааны талаар. Энэ объект нь үйл явдлын цаашдын тархалтыг зогсоох (stopPropagation) эсвэл анхдагч хөтөч нь үйл явдлыг боловсруулахаас урьдчилан сэргийлэх аргуудыг агуулдаг (preventDefault).

Товчлуур дарснаар "товчлуур", "товчлуур" болон "товчлуур" үйл явдлууд үүсдэг. Хулганыг дарснаар "хулгана доошлуулах", "хулгана дээшлэх", "товших" үйл явдлууд үүсдэг. Хулганыг хөдөлгөх - "хулгана хөдөлгөх", "хулгана оруулах" болон "хулгана".

JavaScript гүйлгэх үйл явдлыг "scroll" үйл явдлыг ашиглан тодорхойлж, фокусыг өөрчлөхийг "фокус" болон "бүдгэрүүлэх" ашиглан тодорхойлж болно. Баримт бичгийг ачаалж дууссаны дараа цонхонд "ачаалах" үйл явдал гарч ирнэ.

JavaScript програмын зөвхөн нэг хэсэг нь нэгэн зэрэг ажиллах боломжтой. Үйл явдал зохицуулагчид болон бусад хуваарьт скриптүүд дараалалд байгаа бусад скриптүүдийг гүйцэтгэж дуусахыг хүлээх ёстой.

Энэхүү нийтлэл нь төслийн найрсаг хамт олны бэлтгэсэн "Үйл явдлыг зохицуулах" нийтлэлийн орчуулга юм

JavaScript үйл явдлууд

JavaScript нь бусад объект хандалтат хэлний нэгэн адил баримт бичгийн элементүүдтэй холбоотой хэд хэдэн үйл явдлыг тодорхойлдог. Зохицуулагчид нь скриптээс үйл явдал тохиолдоход үзүүлэх хариу үйлдлийг зохион байгуулах боломжийг олгодог. Энэ тохиолдолд харгалзах зохицуулагчийг HTML баримт бичгийн элементийн шинж чанар болгон зааж өгсөн болно; Энэ атрибутын утга нь JavaScript илэрхийлэл юм. Жишээлбэл,

- Хулганы курсорыг элемент дээр аваачиж, зөөвөрлөхөд дэвсгэр өнгө өөрчлөгдөнө.

- хэрэглэгч цонхоо хааж, баримтыг буулгахыг оролдох үед мессеж гарч ирнэ

- Зураг дээр дарахад тодорхой showPict() функц ажиллана

Барилгачдын тал хувь нь бараг бүх HTML элементүүдээр дэмжигддэг (). Зарим үйл явдлыг тохирох аргуудыг ашиглан дуурайж болно. Үүний дагуу үйл явдлын жагсаалтыг доор харуулав HTML үзүүлэлтүүд 4.0 болон MS IE дэмждэг зарим үйл явдлууд. Хөтөчүүдийн тайлбар нь зохицуулагчийг тодорхой элементүүдэд ашиглах боломжийн хувьд стандартаас ялгаатай байж болно.

Үйл явдал зохицуулагч	HTML элементүүдийг дэмжих	Тодорхойлолт	Арга дуураймал
onAbort	IMG	Зургийг ачаалахад саад болж байна
onBlur		Одоогийн элемент нь фокусаа алддаг, i.e. өөр элемент рүү шилжих. Элементийн гадна талд хулганыг дарах эсвэл tab товчийг дарах үед тохиолддог.	бүдгэрүүлэх()
onChange	ОРУУЛАЛТ, СОНГОХ, TEXTAREA	Маягтын элементүүдийн утгыг өөрчлөх. Элемент фокусаа алдсаны дараа тохиолддог, i.e. бүдгэрүүлсэн үйл явдлын дараа	өөрчлөх()
onClick		Нэг товшилт (хулганы товчийг дараад суллана)	дарна уу()
onDblClick	Бараг бүх HTML элементүүд	Хоёр дарж
onError	IMG, ЦОНХ	Скриптийг гүйцэтгэхэд алдаа гарлаа
onFocus	A, AREA, TUTTON, INPUT, LABEL, SELECT, TEXTAREA	Элементэд анхаарлаа төвлөрүүлэх (элемент дээр дарах эсвэл Tab товчийг дахин дарах)	фокус()
onKeyDown	Бараг бүх HTML элементүүд	Гар дээр товчлуур дарагдсан
onKeyPress	Бараг бүх HTML элементүүд	Гар дээрх товчлуурыг дараад суллана
onKeyUp	Бараг бүх HTML элементүүд	Гарны товчлуурыг гаргалаа
ачаалалтай	BODY, FRAMESET
onMouseDown	Бараг бүх HTML элементүүд	Одоогийн элемент дотор хулганы товчийг дарна
onMouseMove	Бараг бүх HTML элементүүд	Хулганы курсорыг одоогийн элемент дотор шилжүүлнэ үү
onMouseOut	Бараг бүх HTML элементүүд	Хулганы курсор нь одоогийн элементийн гадна байна
onMouseOver	Бараг бүх HTML элементүүд	Хулганы курсор одоогийн элемент дээр байна
onMouseUp	Бараг бүх HTML элементүүд	Хулганы товчийг одоогийн элемент дотор гаргасан
onMove	ЦОНХ	Цонх хөдөлж байна
onReset	МАЯГТ	Маягтын өгөгдлийг дахин тохируулах (товчлуур дээр дарна уу )	дахин тохируулах()
onResize	ЦОНХ	Цонхны хэмжээг өөрчлөх
onSelect	INPUT, TEXTAREA	Одоогийн элемент дэх текстийг сонгоно уу
onSubmit	МАЯГТ	Маягтын өгөгдлийг илгээж байна (товчлуур дээр дарна уу )	илгээх()
дээр буулгах	BODY, FRAMESET	Хөтчийн цонхыг хааж, баримтыг буулгахыг оролдож байна