jQuery хулгана дээр дарна уу. Javascript хулганы үйл явдлууд. Бүлэглэх цаг боллоо

SSH(eng. Secure SHell - "аюулгүй бүрхүүл") - үйлдлийн системийг алсаас хянах, TCP холболтыг туннел хийх (жишээлбэл, файл дамжуулах) боломжийг олгодог сесс түвшний сүлжээний протокол. Үйл ажиллагааны хувьд Telnet болон rlogin протоколуудтай төстэй боловч тэдгээрээс ялгаатай нь дамжуулагдсан нууц үг зэрэг бүх урсгалыг шифрлэдэг. SSH нь өөр өөр шифрлэлтийн алгоритмуудыг сонгох боломжийг олгодог. SSH клиентүүд болон SSH серверүүд нь ихэнх сүлжээний үйлдлийн системд байдаг.

SSH нь бараг ямар ч сүлжээний протоколыг аюулгүй орчинд найдвартай дамжуулах боломжийг олгодог. Тиймээс та командын бүрхүүлээр дамжуулан компьютер дээр алсаас ажиллахаас гадна шифрлэгдсэн сувгаар (жишээлбэл, вэбкамераас) аудио урсгал эсвэл видео дамжуулах боломжтой. SSH нь дамжуулсан өгөгдлийн шахалтыг дараагийн шифрлэлтэд ашиглах боломжтой бөгөөд энэ нь жишээ нь X Window System клиентүүдийг алсаас ажиллуулахад тохиромжтой.

Ихэнх хостинг үйлчилгээ үзүүлэгчид төлбөртэйгөөр үйлчлүүлэгчдэд өөрсдийн гэрийн лавлах руу SSH хандалтыг олгодог. Энэ нь командын мөрөнд ажиллах болон програмуудыг алсаас ажиллуулахад тохиромжтой байж болно (график програмуудыг оруулаад).

Протоколын анхны хувилбар болох SSH-1-ийг 1995 онд Финландын Хельсинкийн Технологийн Их Сургуулийн судлаач Тату Олёнен боловсруулсан. SSH-1 нь rlogin, telnet, rsh протоколуудаас илүү хувийн шинж чанартай байхаар бичигдсэн. 1996 онд SSH-1-тэй үл нийцэх SSH-2 протоколын илүү найдвартай хувилбарыг боловсруулсан. Протокол улам бүр түгээмэл болж, 2000 он гэхэд хоёр сая орчим хэрэглэгчтэй болжээ. Одоогийн байдлаар "SSH" гэсэн нэр томъёо нь ихэвчлэн SSH-2-ийг хэлдэг, учир нь. Протоколын анхны хувилбар нь мэдэгдэхүйц дутагдалтай байсан тул одоо бараг ашиглагдаагүй байна.

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

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

Delphi бүрэлдэхүүн хэсгүүд нь хулганы хэд хэдэн үйл явдлыг тодорхойлдог. Эдгээр нь дараах үйл явдлууд юм.

OnClick Хулганы бүрэлдэхүүн хэсэг болон бусад хэрэглэгчийн үйлдэл дээр дарна уу.

OnDblClick Бүрэлдэхүүн хэсэг дээр давхар товшино уу.

OnMouseDown Бүрэлдэхүүн хэсэг дээр хулганы товчийг дарах. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой

OnMouseMove Хулганы курсорыг бүрэлдэхүүн хэсэг дээр шилжүүлнэ үү. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой.

OnMouseUp Бүрэлдэхүүн хэсэг дээр өмнө нь дарагдсан хулганы товчийг суллана. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой

OnStartDrag Объектыг чирэх процессыг эхлүүлнэ. Чирүүлсэн объектыг таних боломжтой.

OnDragOver Чирүүлсэн объектыг бүрэлдэхүүн хэсэг дээр зөөнө. Чирүүлсэн объект болон хулганы курсорын координатыг таних боломжтой.

OnDragDrop Объектыг чирсний дараа өмнө нь дарсан хулганын товчлуурыг суллах. Чирэх объект болон хулганы курсорын координатыг таних боломжтой.

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

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

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

OnMouseWheel Хулганы дугуйг дурын чиглэлд эргүүлэх үйл явдал. Дельфи 5-аас хойш

OnMouseWheelUp Хулганы дугуйг дээш эргүүлнэ. Хэрэв эргэлтийг OnMouseWheel үйлдлээр зохицуулаагүй бол үүснэ. Дельфи 5-аас хойш.

OnMouseWheelDown Хулганы дугуйг доош эргүүлнэ. Хэрэв эргэлтийг OnMouseWheel үйлдлээр зохицуулаагүй бол үүснэ. Дельфи 5-аас хойш.

Таны харж байгаагаар эдгээр үйл явдлууд нь хулганыг ашиглах боломжтой бүх үйлдлүүдийг хамарч, тэр ч байтугай тэдгээрийн ихэнхийг давхардсан байдаг. Хамгийн өргөн хэрэглэгддэг үйл явдал onclick.Энэ нь ихэвчлэн хэрэглэгч бүрэлдэхүүн хэсэг дээр товшсон үед тохиолддог, i.e. хулганы заагч бүрэлдэхүүн хэсэг дээр байх үед хулганы товчийг дараад сулласан. Гэхдээ энэ үйл явдал бусад хэрэглэгчийн үйлдлүүдэд бас тохиолддог. Энэ нь дараах тохиолдолд тохиолддог:

Хэрэглэгч сум товчийг дарж сүлжээ, мод, жагсаалт, унадаг зүйлээс сонгосон.

Товчлуур эсвэл заагч анхаарлаа төвлөрүүлж байх үед хэрэглэгч хоосон зайг дарсан.

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

Хэрэглэгч Esc товчийг дарсан бөгөөд идэвхтэй хэлбэр нь шинж чанараар тодорхойлогдсон таслах товчлууртай байна Цуцлах.

Хэрэглэгч товчлуур эсвэл индикаторын гарны товчлолыг дарсан. Жишээлбэл, хэрэв эд хөрөнгө Гарчигзаагчийг “&Bold” гэж бичиж, “P” тэмдэгтийг доогуур зурсан бол хэрэглэгч Alt-P товчлуурын хослолыг дарснаар үйл явдал үүснэ. onclickэнэ үзүүлэлтэд.

Апп суулгасан үнэнөмч Шалгасанрадио товчлуурууд радио товчлуур.

Аппликешн нь өмчийг өөрчилсөн Шалгасанүзүүлэлт шалгах хайрцаг.

Дуудсан арга дарна ууэлемент цэс.

Маягтын үйл явдлын хувьд onclickХэрэглэгч маягтын хоосон хэсэг эсвэл нэвтрэх боломжгүй бүрэлдэхүүн хэсэг дээр товшсон тохиолдолд тохиолддог.

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

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

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

Хүснэгт 1. Фокусыг солих үед хулганы үйл явдлын дараалал

Хэрэглэгчийн үйлдэл
Эхний бүрэлдэхүүн хэсэг дотор хулганы курсорыг хөдөлгөж байна	Эхний бүрэлдэхүүн хэсэг дэх олон OnMouseMove үйл явдал
Маягтын дотор хулганы курсорыг хөдөлгөж байна	Маягт дээрх олон OnMouseMove үйл явдал
Хоёрдахь бүрэлдэхүүн хэсэг дотор хулганы курсорыг хөдөлгөж байна	Хоёрдахь бүрэлдэхүүн хэсэг дэх олон OnMouseMove үйл явдал
Хулгана дарна уу	Эхний бүрэлдэхүүн хэсэгт OnExit
	Хоёрдахь бүрэлдэхүүн хэсэгт OnEnter
	Хоёрдахь бүрэлдэхүүн хэсэгт OnMouseDown
Хулганы товчийг суллаж байна	Хоёрдахь бүрэлдэхүүн хэсэгт OnClick
Хулганы товчийг суллаж байна	Хоёрдахь бүрэлдэхүүн хэсэгт OnMouseUp

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

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

Хүснэгтэнд авч үзсэн. Хоёр дахь бүрэлдэхүүн хэсэг дэх шинж чанар бол үйл явдлын 1 дараалал үүсдэг DragModeөгөгдмөлөөр тохируулсан dmManual (чирэх үйл явцыг гараар эхлүүлэх)-тэй тэнцүү байна. Хэрэв энэ өмч бол dmАвтомат(чирэх, буулгах процессыг автоматаар эхлүүлэх), дараа нь хулганатай холбоотой бүх авч үзсэн үйл явдлуудыг дараах байдлаар солино.

OnMouseDown-г OnStartDrag-ээр сольсон

Хэрэв товчлуурыг дарж, хулганы курсорыг хөдөлгөвөл

OnMouseMove нь хулганы курсор хөдөлж буй бүрэлдэхүүн хэсгийн OnDragOver үйл явдлаар солигдсон.

OnMouseUp нь чирж дуусах бүрэлдэхүүн хэсгийн OnDragDrop үйл явдал (хэрэв бүрэлдэхүүн хэсэг нь чирсэн объектын мэдээллийг хүлээн авах боломжтой бол) болон чирсэн бүрэлдэхүүн хэсгийн дараагийн OnEndDrag үйл явдлаар солигдоно.

Хөгжил гарц дээрболон OnEnterфокус солигддоггүй тул огт тохиолддоггүй. Үйл явдал тохиолддоггүй onclick.

Хүснэгт 1-д үзүүлсэн жишээн дээр тухайн үед аль хэдийн анхаарлаа төвлөрүүлсэн объект дээр товшилт хийвэл ямар ч үйл явдал гарахгүй. гарц дээрболон onEnter. ATЭнэ тохиолдолд товчлуурыг дарахад зөвхөн үйл явдал тохиолдоно MouseDown дээр,мөн товчлуурыг суллах үед - үйл явдлууд OnCлиck болон OnMouseUp.

Одоо бүрэлдэхүүн хэсэг дээр давхар товших үед үйл явдлын дарааллыг авч үзье. Үүнийг Хүснэгтэнд үзүүлэв. 2. Дарагдсан хулганы товчийг таних нь зөвхөн үйл явдалд л боломжтой хэвээр байна OnMouseDown болон OnMouseUp.Хэрэв та хулганы тодорхой товчлуур дээр давхар товшилтыг яг таг таних шаардлагатай бол жишээлбэл, та хоёр товшилтын туг болох тодорхой хувьсагчийг оруулж, үйл явдлын зохицуулагч дээр энэ тугийг тохируулж болно. OnDblClicк, болон үйл явдал зохицуулагчид MouseDown дээрэсвэл OnMouseUpэнэ тугийг шалгаад хэрэв тохируулсан бол дахин тохируулаад төлөвлөсөн үйлдлийг гүйцэтгэнэ үү.

Хүснэгт 2. Бүрэлдэхүүн хэсэг дээр давхар товших үед хулганы үйл явдлын дараалал

Хэрэглэгчийн үйлдэл
Эхний хулганы товшилт	MouseDown дээр. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой.
Хулганы товчлуурын анхны хувилбар
Хулганы товчлуурын анхны хувилбар
Хулганы хоёр дахь товшилт
Хулганы хоёр дахь товшилт	MouseDown дээр. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой.
Хулганы товчлуурын хоёр дахь хувилбар	OnMouseUp. Дарагдсан товчлуур болон хулганы курсорын координатыг таних боломжтой.

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

хулгана, хулгана, товших үйл явдлууд

Хэрэглэгч элемент дээр дарахад дор хаяж 3 хулганы үйл явдал дараах дарааллаар явагдана:

mousedown , хэрэглэгч элемент дээр хулганы товчийг дарсан
mouseup , хэрэглэгч элемент дээр хулганы товчийг гаргав
элемент дээр товших, хулганыг доошлуулах, хулганыг дээш өргөх үйл явдлууд илэрсэн

Ерөнхийдөө mousedown болон mouseup үйл явдлууд нь товшилтын үйл явдлуудаас илүү ашигтай байдаг. Заримдаа хэрэглэгч хулганыг дардаг боловч click үйл явдал идэвхгүй болдог.

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

Ямар ч байсан энэ асуудал зөвхөн та хүсвэл л гарна.Та mousedown/up үйл явдал зохицуулагчийг бүртгүүлэх ёстой, гэхдээ ихэнх тохиолдолд click үйл явдал хангалттай.

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

dblclick үйл явдал (давхар товшилт)

dblclick үйл явдлыг бусад хулганы үйл явдлуудаас хамаагүй бага ашигладаг. Хэрэв та үүнийг ашигладаг бол ижил HTML элемент дээр onclick болон ondblclick үйл явдал зохицуулагчийг ашиглахгүй байгаа эсэхийг шалгаарай. Энэ тохиолдолд хэрэглэгч юу хийснийг тодорхойлох нь бараг боломжгүй юм.

Хэрэглэгч элемент дээр давхар товших үед эхлээд click үйл явдал гарч, дараа нь dblclick . Энд анхааруулах мессеж ашиглах нь маш аюултай.

хулгана хөдөлгөх үйл явдал

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

Element.onmousemove = doSomething;
// дараа нь
element.onmousemove = null;

Mouseover болон mouseout үйл явдлууд

Жижигхэн жишээг харцгаая. Өөр өөр дэвсгэртэй элементүүд дээр хулганаа гүйлгэж үзээрэй. 1-р элемент дээр хулганыг аваачихад бага зэрэг анивчдаг - энэ нь хулганаар гүйх үйлдлийг идэвхжүүлдэг.

Элемент №1

Элемент №2 зай

Гэсэн хэдий ч, таны харж байгаагаар энэ үйл явдал таныг 2-р элемент дээр хулганаа аваачиж, тэр ч байтугай span дээр аваачих үед бас асдаг.

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

"Хулгана хаанаас ирсэн бэ?" эсвэл холбогдохTarget, fromElement болон toElement шинж чанарууд

Майкрософт энэ мэдээллийг хадгалах хоёр шинж чанарыг бий болгосон:

fromElement - хулгана ирсэн элементийг хэлнэ.
toElement - хулганын ирсэн элемент рүү.

Хөтөч хоорондын код

Тиймээс, хэрэв та хулгана дээр хулгана үйлдлийг ашиглан хулгана хаанаас ирснийг мэдэхийг хүсвэл дараах скриптийг ашиглана уу.

doSomething(e) функц (
var relTarg = e.relatedTarget || e.fromElement;
}

Mouseout үйлдлийг ашиглах тохиолдолд (курсор хөдөлж буй элемент):

doSomething(e) функц (
if (!e) var e = window.event;
var relTarg = e.relatedTarget || e.toElement;
}

хулганы оролт ба хулганы хуудас

Microsoft нь асуудлыг шийдэх өөр аргыг санал болгож байна. Тэд mouseenter болон mouseleave гэсэн 2 шинэ арга хэмжээг үүсгэсэн. Эдгээр үйл явдлууд нь хулгана болон хулганатай ижил үйлдэлтэй байдаг. Цорын ганц ялгаа нь үйл явдлууд нь хүүхдийн элементүүд рүү "үсрэх" биш юм. Энэ нь жишээнд үзүүлсэн бидний асуудлыг маш сайн шийдэж байна.

Javascript хулганы үйл явдлын талаар ярихыг хүссэн зүйл минь энэ. Би таны сэтгэгдэлд баяртайгаар хариулах болно.

Бид jQuery-г үргэлжлүүлэн суралцаж байгаа бөгөөд одоо jQuery дээр үйл явдлыг зохицуулах гэх мэт хэсгийг судалж эхэлцгээе.

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

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

alert("Баримт бичиг нь скриптийг гүйцэтгэх боломжтой");
});

Хэрэв та HTML баримт бичиг болон бусад бүх элементүүдийг (жишээ нь, зураг) бүрэн ачаалсны дараа ямар нэгэн үйлдэл хийх шаардлагатай бол та ачаалах () аргыг ашиглаж болно. Аргын синтакс нь дараах байдалтай байна.

ачаалал (Буцах функц)

функц<Название функции>([үйл явдлын объект]) (
// ...
}

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

$(цонх).load(функц(ууд))
alert("Баримт бичиг бүрэн ачаалагдсан");
alert("Үйл явдлын төрөл" + e.type);
});

Гүйцэтгэлийн үр дүнд бид хоёр мессеж хүлээн авах болно.

Баримт бичиг бүрэн ачаалагдсан
ачааллын үйл явдлын төрөл

Unload () арга нь баримтыг буулгахаас өмнө шууд ямар нэгэн үйлдлийг гүйцэтгэх зорилготой юм. Энэ арга нь дараах синтакстай байна.
буулгах (Буцах функц)

Дуудлагын функцийн параметр нь дараах форматын функцийн лавлагааг тодорхойлдог.

функц<Название функции>([<Объект event>]) {
// ...
}
Баримт бичгийг буулгахын өмнө мессежийг харуулах.
$(цонх). буулгах(функц()
(Анхааруулга("Орооройилүү!");
});

Энэ хэсэгт бид өөр хоёр ашигтай аргыг авч үзэх болно.

хэмжээг өөрчлөх (Буцах функц) - Цонхны хэмжээг өөрчлөх үед гүйцэтгэнэ.

гүйлгэх (Буцаан дуудлагын функц) - Хуудас, баримт бичиг, цонх, хүрээ элементийн агуулгыг гүйлгэх үед гүйцэтгэнэ.

Дуудлагын функцийн параметр нь дараах форматын функцийн лавлагааг тодорхойлдог.
функц Функцийн нэр([Үйл явдлын объект]) (
// ...
}

Та цонхны агуулгыг гүйлгэж, үүнтэй төстэй мессежийг харуулах боломжтой.
$(цонх).scroll(функц() (
alert("Цонхны контентыг гүйлгэх");
});

Resize() аргыг ашиглах жишээ болгон бид цонхны хэмжээг өөрчилсний дараа түүний өргөн ба өндрийг авдаг (Жагсаалт 6.1).

Жагсаалт 6.1. Хэмжээг өөрчлөхдөө цонхны өргөн ба өндрийг харуул

Өөрчлөлтийн үед цонхны өргөн ба өндрийг харуулна хэмжээ

Цонхны хэмжээг өөрчлөх үед divl элемент нь цонхны өргөн ба өндрийг харуулах болно.

Хуудас эсвэл JavaScript кодонд алдаа гарсан тохиолдолд алдааны арга (Буцах дуудлагын функц) дуудагдана. Дуудлагын функцийн параметр нь дараах форматын функцийн лавлагааг тодорхойлдог.

функц Функцийн нэр([Мессеж[, URL[, Мөрийн дугаар]]])(
// ...
}

Хэрэв цонхны объектод алдаа гарсан бол буцаан дуудах функцэд гурван параметрийг ашиглах боломжтой болно.

Зурвас - алдааг тайлбарласан текст;
URL - алдаатай баримт бичгийн бүтэн URL;
Мөрийн дугаар - алдаатай мөрийн дугаар.

Хэрэглэгчдээс JavaScript алдааг нуухын тулд буцаан дуудлагын функц дотор үнэнийг буцаана.

$(цонх).алдаа(функц()(
үнэнийг буцаах;
});

error() аргыг ашигласнаар та зураг ачаалах алдааг засах боломжтой.

$("img").алдаа(функц()()
$(энэ).attr("src", "noimage.gif");
});

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

jQuery дээрх хулганы үйл явдлууд

jQuery дээр хулганы үйл явдлыг зохицуулах дараах аргуудыг өгсөн болно.

Click([Буцах дуудлагын функц]) - Элемент эсвэл вэб хуудсыг товших үед гүйцэтгэнэ. Хэрэв параметрийг заагаагүй бол энэ нь элемент дээр товшихыг дуурайна. onclick үйл явдлын өмнө onmousedown болон onmouseup гэсэн хоёр үйл явдал байна. Дурын товчлуур дээр дарсны дараа мессежийг харуулах.
$("ibutton"). дарна уу(функц() (
});

Toggle() - Элемент эсвэл вэб хуудас дээр дарахад олон функцийг хооронд нь солих боломжийг олгоно. Функцуудыг ээлжлэн дууддаг. Эхний товшилт нь эхний функцийг дууддаг, хоёр дахь товшилт нь хоёр дахь, гурав дахь товшилт нь гурав дахь товшилтыг дууддаг. Гурав дахь функц тодорхойлогдоогүй бол эхний функцийг дахин дуудах гэх мэт. toggle() арга нь дараах форматтай байна.
солих(<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Хулгана товших болгоны дараа догол мөрний текстийн өнгийг өөрчилье.
$("p"). сэлгэх
(функц() (
$(энэ).css("өнгө", "улаан");
функц () (
$(энэ).css("өнгө", "цэнхэр");
функц () (
$(энэ).css("өнгө", "ногоон");
}
) .click();

Догол мөр дээр хэд хэдэн удаа товшоод үзээрэй. Текстийн өнгө улаанаас цэнхэр, цэнхэрээс ногоон, ногооноос улаан болж дараалан өөрчлөгдөнө. Жишээний сүүлчийн мөрөнд анхаарлаа хандуулаарай. Үйл явдал зохицуулагчийг томилсны дараа onclick үйл явдлыг ямар ч параметргүйгээр click() аргаар ажиллуулдаг. Ийм учраас догол мөрний өнгө нь эхнээсээ улаан өнгөтэй байх болно.

Dblclick([Дуудлагын функц]) - Элемент эсвэл вэб хуудсыг давхар товших үед гүйцэтгэнэ. Хэрэв параметрийг заагаагүй бол энэ нь элемент дээр давхар товшилтыг дуурайлгана. ondblclick үйл явдлын өмнө onmousedown, onmouseup, onclick гэсэн гурван үйл явдал байдаг. Дурын догол мөр дээр давхар товших үед мессеж гарч ирнэ.
$("p").dblclick(функц() (
alert("Та хоёр товшсон");
});

mousedown (Callback function) - элемент эсвэл хуудсан дээр хулганы товчийг дарахад гүйцэтгэнэ. onmousedown үйл явдал onmouseup болон onclick үйл явдлуудын өмнө тохиолддог.

mouseup (Callback функц) - өмнө нь дарагдсан хулганы товчийг суллахад гүйцэтгэнэ. onmouseup үйл явдал onmousedown болон onclick үйл явдлын хооронд тохиолддог. Догол мөр дээр хулганы товчийг товшиж суллах үед мессежүүдийг харуулах.

$("p"). хулганы доош (функц() ()
$("#divl").append("Onmousedown үйл явдал" + "
");
)) хулгана(функц() (
$("#divl").append("Onmouseup үйл явдал" + "
");
});
<р>намайг дар

Mousemove (Callback Function) - Хулганыг хөдөлгөх бүрт ажиллана. Курсорыг догол мөр дээр шилжүүлэх үед мессежийг харуулах.

$("p") .mousemove(функц() (
$("#divl").append("Onmousemove үйл явдал" + "
");
});

mouseover (Callback функц) - хулганы курсор элемент дээр байх үед гүйцэтгэнэ.

mouseout (Callback функц) - хулганы курсор элементээс гарах үед гүйцэтгэгдэнэ. Холбоос дээр хулганаа аваачихад линкийн өнгийг улаан болгож, мессежийг харуулах ба курсор холбоосоос гарахад өнгийг нь хар болгож, мессежийг харуулна.

$("а").хулганаар (функц() ()
$(энэ).css("өнгө", "улаан");
$("#divl").append("Үйл явдалхулгана дээр" + "
");
)) хулгана(функц() (
$(энэ).css("өнгө", "хар");
$("#divl").append("Үйл явдалonmouseout" + "
");
}>;

hover() - танд нэг аргаар элементийн хулганыг чиглүүлэх, чиглүүлэх үйлдлийг зохицуулах боломжийг олгоно. Энэ нь дараах форматтай.
хулгана(Onmouseover үйл явдлыг буцаан дуудах, onmouseout үйл явдлыг буцаан дуудах)

Өмнөх жишээгээ дахин бичээд hover() аргыг ашиглая.

$("a").hover(функц()()
$(энэ).css("өнгө", "улаан");
$("#divl").append("Onmouseover үйл явдал" + "
"); },
функц () (
$(энэ).css("өнгө", "хар");
$("#divl").append("Onmouseout үйл явдал" + "
");
});

Hover() аргыг ашиглах нь бас нэг давуу талтай. Хэрэв блок дотор өөр блок байгаа бол дотоод блок руу орох, мөн түүнээс гарах үед тусдаа функцууд дуудагдана. Hover() аргыг ашиглах үед эдгээр хөдөлгөөнийг үл тоомсорлох болно (Жагсаалт 6.2).

Жагсаалт 6.2. Hover аргыг ашиглах онцлог()

Hover() аргыг ашиглах онцлог

Тусдаазохицуулагчид:

Шугам 1

2-р мөр

Чиг үүрэгhover():

Шугам 1

2-р мөр

Эхний үүрлэсэн блокийн хувьд бид тусдаа үйл явдал зохицуулагчийг тодорхойлсон. Хэрэв бид хулганы курсорыг бүхэл бүтэн блокийн дундуур хөдөлгөвөл бид дараах үйл явдлын дарааллыг авна.
onmouseover үйл явдал
onmouseout үйл явдал
onmouseover үйл явдал
onmouseout үйл явдал
onmouseover үйл явдал
onmouseout үйл явдал

Хоёрдахь үүрлэсэн блокийн хувьд үйл явдал зохицуулагчийг hover() аргыг ашиглан хуваарилдаг. Үүнтэй ижил үйлдлээр бид зөвхөн хоёр үйл явдлыг хүлээн авах болно.
onmouseover үйл явдал
onmouseout үйл явдал

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

// ...
}

Үйл явдлыг эхлүүлсэн элементэд энэ заагчаар дамжуулан функц дотор хандах боломжтой. Энэ заагч нь jQuery цуглуулгын элемент биш харин Баримт бичгийн объектын загвар дахь элементэд хамаарах болохыг анхаарна уу. Хэрэв үйл явдлын объектын параметрт хувьсагчийг зааж өгсөн бол түүгээр дамжуулан үйл явдлын объектын шинж чанаруудад хандах боломжтой. Хоёр элементийн хувьд хулганы товшилтоор дарагчийг нэг дор бичье. Товшсон үед id divl бүхий элементийн шошгоны нэрийг харуулна.

$("х, div"). дарна уу(функц(ж.нь.).) {
$("#divl")
.append("Элемент" + e.srcElement.tagName + "
");
});

jQuery дээрх гарын үйл явдал

jQuery дээр гарны үйл явдлыг зохицуулах дараах аргуудыг өгсөн болно.

keydown (Буцах дуудлагын функц) - гарын товчлуурыг дарах үед гүйцэтгэнэ.

keyprcss (Буцах дуудлагын функц) - Гарын товчлуур дарагдсан үед ажиллана. keydown() аргатай төстэй боловч Юникод дахь тэмдэгтийн кодын утгыг буцаана. Үйл явдал хэрэглэгч түлхүүрээ гаргах хүртэл тасралтгүй ажиллана.

keyup (Буцах функц) - өмнө нь дарагдсан гарын товчлуурыг суллах үед гүйцэтгэнэ.

Буцаан дуудлагын функцийн параметр нь дараах форматын функцийн лавлагаа юм.

функц Функцийн нэр([Үйл явдлын объект]) (
// ...
}

Хэрэв үйл явдлын объектын параметрт хувьсагчийг зааж өгсөн бол түүгээр дамжуулан үйл явдлын объектын шинж чанаруудад хандах боломжтой. Жишээлбэл, дарагдсан товчлуурын кодыг авахын тулд та түлхүүрийн Code шинж чанарыг ашиглаж болно. Жишээлбэл, бид дарагдсан товчлуурын кодыг авч, үйл явдлын дарааллыг харуулах болно (Жагсаалт 6.3).

Жагсаалт 6.3. Гарны үйл явдал

Хөгжилгарууд

Текстийн талбарыг тодруулаад гар дээрх дурын товчлуурыг дарна уу. Жишээлбэл, орос хэлний гарны байрлалтай A товчийг даръя. Үүний үр дүнд бид дараах мессежийг авна.
товчлуур дарах 70
keyprcss 1072
товчлуур 7 0

jQuery дахь хэлбэр дүрс

Дараах аргууд нь маягтын үйл явдлыг зохицуулахад зориулагдсан болно.

фокус([Буцах дуудлага]) - Фокусыг маягтын элемент хүлээн авах үед гүйцэтгэнэ. Хэрэв параметрийг заагаагүй бол элемент нь оролтын фокусыг хүлээн авах болно.

бүдэгрүүлэх([Буцах дуудлага]) - маягтын элемент фокусаа алдах үед ажиллана. Хэрэв параметрийг заагаагүй бол элемент нь оролтын фокусаа алдах болно.

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

submit([Буцах дуудлагын функц]) - Маягтын өгөгдлийг оруулах үед гүйцэтгэнэ. Хэрэв параметрийг заагаагүй бол маягтыг илгээнэ.

select([ буцаан дуудах функц ]) - элементийн агуулгыг сонгох үед гүйцэтгэнэ. Хэрэв параметрийг заагаагүй бол элементийн агуулгыг бүрэн сонгох болно.

Буцаан дуудлагын функцийн параметр нь дараах форматын функцийн лавлагаа юм.

функц Функцийн нэр([Үйл явдлын объект]) (
// ...
}

Төрөл бүрийн хэлбэрийн үйл явдлуудыг хэрхэн яаж зохицуулахыг үзүүлье (Жагсаалт 6.4).

Хөгжилхэлбэрүүд

!}

id="btn2">

!}

Тиймээс бид гурван элемент бүхий маягт үүсгэсэн. Жагсаалтаас нэг зүйлийг сонгоход сонгосон зүйлийн утга бүхий мессеж гарч ирнэ. Хэрэв та текст талбарыг сонговол дэвсгэрийн өнгө өөрчлөгдөх бөгөөд хэрэв та талбараас фокусыг арилгавал дэвсгэр өнгө буцаж цагаан болж хувирна. Илгээх товчийг дарснаар маягтын өгөгдлийг илгээхийг зогсоох боломжтой харилцах цонх гарч ирнэ. Маягтын доор дөрвөн товчлуур байна. Эхний товчлуур нь текст талбарын агуулгыг сонгох боломжийг танд олгоно. Сонголт хийсний дараа бид тохирох зохицуулагчийг тодорхойлсон тул фрагментийг сонгох тухай мессеж гарч ирнэ. Хэрэв та хулганаар талбарт фрагмент сонговол ижил мессежийг авч болно. Хоёрдахь товчлуур нь оролтын фокусыг текст талбарт тохируулах, гурав дахь нь үүнийг арилгах боломжийг олгоно. Эцэст нь дөрөв дэх товчлуур нь маягтын өгөгдлийг оруулах явдал юм. Энэ товчийг дарснаар өгөгдөл илгээхийг баталгаажуулах харилцах цонх гарч ирнэ.

jQuery дахь ерөнхий үйл явдал зохицуулагчид

Өмнөх хэсгүүдэд бид тодорхой үйл явдал зохицуулагчдыг авч үзсэн. jQuery номын сан нь өөр өөр үйл явдалд (өөрийн үйл явдлуудыг оруулаад) нэг аргаар зохицуулагчийг хуваарилах боломжийг олгодог. Ажиллагчид оноох, дуудах, устгах дараах аргуудыг өгсөн болно.

Бинд(Үйл явдлын төрөл[, Өгөгдөл] , Буцах функц) - цуглуулгын бүх элементүүдэд зохицуулагч оноох боломжийг танд олгоно. Үйл явдлын төрөл параметрт дараах утгуудыг зааж өгч болно.
баримт бичгийн үйл явдал: ачаалах, буулгах, хэмжээг өөрчлөх, гүйлгэх, алдаа;
хулганы үйл явдлууд: товших, dblclick, хулгана, хулгана, хулганыг хөдөлгөх, хулганыг дарах, хулганыг зөөх, хулганыг оруулах, хулганыг орхих;
гарын үйл явдал: keydown, keyprcss, keyup;
хэлбэрийн үйл явдлууд: анхаарлаа төвлөрүүлэх, бүдгэрүүлэх, өөрчлөх, сонгох, илгээх.

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

$(":товчлуур") .bind("товшилт", функц()
( Анхааруулга("Тадарагдсандээртовч");
});

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

Жагсаалт 6.5. mouseenter болон mouseleave үйл явдлууд

Хөгжилmouseenter бахулганы навч

content="text/html; charset=utf-8">

Хөгжилдээр хулгана бахулгана:

Шугам 1

2-р мөр

Хөгжилmouseenter бахулганы навч:

Шугам 1

2-р мөр

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

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

Event type параметрт зайгаар тусгаарлагдсан үйл явдлын хослолыг зааж өгч болно. Хулганы курсорыг дарахад холбоосын ангиллыг өөрчилье, курсор гарахад бид ангиа устгана.

$("а").bind("хулганыг хулганаар оруулах", функц() (
$(энэ).toggleClass("clsl");
});

Та мөн bind() аргыг ашиглан өөрийн үйл явдлуудыг холбож болно. Өөрийн үйл явдлыг дуудах нь trigger () болон triggerHandler () аргуудыг ашиглан хийгддэг. Өөрийнхөө үйл явдлыг үүсгээд дараа нь дуудъя.

$("#divl").bind("myEvent", function() (
alert("Захиалгат үйл явдлыг зохицуулах");
});
$("#divl"). trigger("myEvent11) ; // Үйл явдлыг өдөөх

Буцаан дуудлагын функцийн параметр нь дараах форматын функцийн лавлагаа юм.

функц Функцийн нэр([Үйл явдал[, Аргументууд] ]) (
// ...
}

$ ("#divl") .bind ("myEvent11, функц(e, msg)) (

});
$("#divl").trigger("myEvent", ["Бидний мессеж"]);

Нэмэлт өгөгдлийн параметрийг ашигласнаар та зохицуулагч функцэд утгуудыг дамжуулж болно. Үүнийг хийхийн тулд дамжуулсан параметрүүд болон утгуудыг дараах байдлаар зааж өгөх ёстой.
{
Параметр1: "Утга1",
Параметр2: "Утга2",
Параметрүүд: "утга"
}

Та ийм функц дотор дамжуулсан параметрийн утгыг авах боломжтой.
3утга = Объект үйл явдал.өгөгдөл.Параметр

Жишээ авч үзье.

функц f_click(e) (
var str = "msgl = 11 + e.data.msgl + "\n";
str += "msg2 = 11 + e.data.msg2; alert(str);
худал буцаах;
}
$("a").bind(
"товших", // Үйл явдал
(msgl: "Message 1", msg2: "Message 2"), // Манай өгөгдөл
f_click // Функцийн холбоос
) ;

msgl = Зурвас 1
msg2 = Зурвас 2

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

анхааруулга("Эхлээдзохицуулагч");
});
$("#btnl").bind("товшилт", функц() (
анхааруулга("Хоёр дахьзохицуулагч");
});

ID btnl-тэй элемент дээр дарвал хоёр мессежийг дараалан харуулах болно.
Эхний зохицуулагч
Хоёр дахь зохицуулагч

Нэг(Үйл явдлын төрөл[, Өгөгдөл], Буцах функц) - цуглуулгын бүх элементүүдэд зохицуулагчийг оноох боломжийг танд олгоно. Энэ арга нь bind()-тэй адилхан боловч үйл явдал нь зөвхөн нэг удаа асах бөгөөд үүний дараа зохицуулагч автоматаар устгагдана.
$("ibutton").one("товшилт", функц()
( анхааруулга("Та товчлуур дээр дарсан");
});

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

Trigger (Үйл явдлын төрөл[, Өгөгдлийн массив]) - заасан үйл явдлын зохицуулагчийг дууддаг.
$(баримт бичиг).bind("товшилт", функц() (
// зохицуулагчийн дохио ("Үйл явдал дээр дарах");
});
$(баримт бичиг).триггер("товшилт"); // зохицуулагчийг дууд

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

$("#divl").bind("myEvent", функц(e, msgl, msg2) (
$("#div2") . нэмэх("Үйл явдалmyEvent. " + msgl + " 11 +
msg2).append("br");
});
$("p"). дарна уу(функц() ()
$("#divl").trigger("myEvent", [“Message1”, “Message2” ]);
});

<р>Энд дарна уу

Энэ кодыг ажиллуулсны үр дүнд бид мессеж хүлээн авдаг.
үйл явдал myEvent. Мессеж1 Зурвас2

TgiggerHandleg (Үйл явдлын төрөл[, Өгөгдлийн массив]) - заасан үйл явдлын зохицуулагчийг дууддаг. Trigger() аргаас ялгаатай нь үйл явдал нь зөвхөн цуглуулгын эхний элемент дээр ажилладаг. Мөн triggerHandleg() аргыг ашиглах үед анхдагч үйлдэл байхгүй.
$("маягт").bind("илгээх", функц(e, мессеж) (
хэрэв (мессеж) (
alert("Маягтыг илгээхгүй. " + msg);
}
өөр(
alert("Маягтыг илгээх болно");
});
$(":товчлуур").bind("товшилт", функц() (
$("маягт") . triggerHandler("илгээх", ["Бидний өгөгдөл"]) ;
});

Энэ жишээн дээр Invoke Handler товчийг дарснаар onclick үйл явдлын зохицуулагчийг ажиллуулна. Ажиллагч дотор бид onsubmit үйл явдлыг эхлүүлж, мэдээллээ илгээдэг. Энэ өгөгдөл дээр үндэслэн Илгээх товчийг дарах үед үйл явдал идэвхгүй болсон уу, эсвэл бидний зүгээс зохиомлоор халагдсан эсэхийг тодорхойлох боломжтой. Хэрэв msg хувьсагч тодорхойлогдсон бол triggerHandler() аргыг ашиглан үйл явдлыг эхлүүлсэн. Энэ тохиолдолд мессеж гарч ирсний дараа маягтын өгөгдлийг илгээхгүй. Илгээх товчийг дарвал мессежийн хувьсагч тодорхойгүй болж, мессеж гарч ирсний дараа маягтын өгөгдлийг илгээнэ.

Unbind([Үйл явдлын төрөл[, Үйл ажиллагааны нэр]]) - цуглуулгын бүх элементийн үйл явдал зохицуулагчийг устгана.
$("#btnl").bind("товшилт", функц() (
дохио ("Та товчлуур дээр дарсан");
});
$("#btnl"). unbind("дарна уу");
});

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

функц f__clicl() (
анхааруулга ("Функц f__clickl () ") ;
}
функц f_click2() (
анхааруулга ("Функц f__click2 () ");
}
$("#btnl").bind("дарна уу", f_clicl); $("#btnl")
.bind("товшилт", f_click2);
$("#btn2").bind("товшилт", функц() (
$("#btnl"). unbind("товшилт", f_click2);
});

Чиг үүрэг
f_click1()
Чиг үүрэг
f_clJck2()

Delete Handler товчийг дарахад f_click2 нэртэй үйл явдал зохицуулагч устгагдана. Одоо эхний товчлуур дээр дарсны дараа бид зөвхөн нэг мессеж хүлээн авах болно.
f_clJck1() функц

Хэрэв параметрүүдийг заагаагүй бол бүх зохицуулагч устах болно.
үйл явдал. $("#btnl"). unbind();

jQuery дахь live() болон die() аргууд

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

$(":товчлуур").bind("товшилт", функц() (
varhtml=` `;
$(энэ).дараа("
"+html);
});

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

live() арга нь үйл явдлын зохицуулагчдыг динамикаар хуваарилахад зориулагдсан. Өмнөх жишээгээ дахин бичээд bind()-ийн оронд live() аргыг ашиглая.

$(":button").live("товшилт", функц() (
varhtml=` `;
$(энэ).дараа("
"+html);
});

Энэ тохиолдолд шинэ товчлуур дээр дарвал өөр товчлуур гарч ирнэ. Энэ товчийг дарснаар өөр товчлуур бий болно гэх мэт.

тэмдэглэл
Live() аргыг jQuery 1.3 хувилбараас хойш ашиглах боломжтой болсон. Өмнөх хувилбаруудад та Live Query модулийг ашиглаж болно.

live() арга нь дараах форматтай, live(Үйл явдлын төрөл, буцаан дуудах функц)
Үйл явдлын төрөл параметрт дараах утгуудыг зааж өгч болно.
хулганы үйл явдлууд: товших, dblclick, хулгана, хулгана, хулганыг хөдөлгөх, хулганаар дарах, хулгана;
гарын үйл явдал: keydown, keyprcss, keyup.

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

$("#divl").live("myEvent", function() (
alert("Захиалгат үйл явдлыг зохицуулах");
});
$(":товч"). дарна уу(функц() (
$("#divl").trigger("myEvent"); // Үйл явдлыг дуудах
});

Callback> параметр нь дараах форматын функцийн лавлагаа юм.

функц Функцийн нэр ([Үйл явдал[, Аргументууд] ]) (
// ...
}

Үйл явдлыг эхлүүлсэн элементэд энэ заагчаар дамжуулан функц дотор хандах боломжтой. Энэ заагч нь jQuery цуглуулгын элемент биш харин Баримт бичгийн объектын загвар дахь элементэд хамаарах болохыг анхаарна уу. Хэрэв үйл явдлын объектын параметрт хувьсагчийг зааж өгсөн бол түүгээр дамжуулан үйл явдлын объектын шинж чанаруудад хандах боломжтой. Та Аргументуудын параметрт таслалаар тусгаарлагдсан олон хувьсагчийг зааж өгч болно. trigger() ба triggerHandler() аргын хоёрдахь параметрийг ашиглан эдгээр хувьсагчдад утгыг дамжуулж болно.

$("#divl").bind("myEvent", функц(e, msg) (
alert("Захиалгат үйл явдлыг зохицуулж байна. " + msg);
});
$(":товч"). дарна уу(функц() (
$("#divl").trigger("myEvent", ["МанайЗахиа"]);
});

Та die() аргыг ашиглан үйл явдал зохицуулагчийг устгаж болно. Аргын формат: үхэх(Үйл явдлын төрөл[, Функцийн нэр])
тэмдэглэл
die() аргыг jQuery 1.3 хувилбараас хойш ашиглах боломжтой болсон.

Нэг жишээ авч үзье.

$("#btnl").live("товшилт", функц()
( анхааруулга("Та товчлуур дээр дарсан");
});

$("#btnl").die("дарна уу") ; // зохицуулагчийг устгана уу
});

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

функц f_clickl() (
анхааруулга("Функцf_clickl()");
}
функц f_click2() (
анхааруулга("Функцf_click2()");
$("#btnl").live("дарна уу", f_clicl);
$("#btnl").live("дарна уу", f_click2);
$("#btn2"). дарна уу(функц() ()
$("#btnl").die("дарна уу", f_click2);
});

!}
!}

Энэ жишээн дээр бид эхний товчлуур дээр дарах үйл явдлын хоёр зохицуулагчийг томилсон. Хэрэв та Click me товчийг дарвал хоёр мессеж гарч ирнэ.
f_clJck1() функц
f_clJck2() функц

Delete Handler товчийг дарснаар f_click2 нэртэй үйл явдал зохицуулагчийг устгана. Одоо эхний товчлуур дээр дарсны дараа бид зөвхөн нэг мессеж хүлээн авах болно.
f_click1() функц

JQuery дахь үйл явдлын хөөс

"Үйл явдлын хөөс" гэж юу вэ? Дараах жишээг харцгаая (Жагсаалт 6.6).

Жагсаалт 6.6. Үйл явдлын хөөс

гадаргуутайүйл явдал

дарна уухулгана энд

Энэ жишээнд бид хуудасны бүх элементүүдэд зориулсан onclick үйл явдлын зохицуулагчийг бичсэн. Энд байгаа үгэн дээр хулганы зүүн товчийг дарж үзье. Үүний үр дүнд бид нэг үйл явдлын оронд бүхэл бүтэн үйл явдлын дарааллыг олж авдаг.
SPAN элемент
P элемент
BODY элемент
HTML элемент

Өөрөөр хэлбэл, onclick үйл явдлыг дараагийн эх элемент рүү дараалан дамжуулдаг. span тагийн хувьд эх элемент нь догол мөр юм. Догол мөрийн хувьд эх элемент нь баримт бичгийн үндсэн хэсэг, үндсэн элемент нь html таг юм. Үйл явдлын энэ урсгалыг үйл явдлын хөөс гэж нэрлэдэг.

Заримдаа үйл явдлын хөөсийг зогсоох шаардлагатай болдог. Үүнийг хийхийн тулд дуудлагын функц дотор худал буцаана. Үүнийг жишээгээр харуулъя (Жагсаалт 6.7).

Жагсаалт 6.7. Үйл явдлын хөөсийг тасалдуулж байна

Үйл явдлын хөөсийг тасалдуулж байна

дарна уухулгана энд

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

Худал буцаахаас гадна үйл явдлын хөөсийг зогсоохын тулд үйл явдлын объектын stopPropagation() аргыг (Жагсаалт 6-8) ашиглаж болно.

Жагсаалт 6.8. StopPropagation() аргаар попапыг зогсоож байна

StopPropagation()

Аргын тусламжтайгаар хөөсийг тасалдуулах StopPropagation()

дарна уухулгана энд

jQuery дахь үндсэн үйлдлүүд ба тэдгээрийг цуцлах

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

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

Жагсаалт 6.9 нь имэйлийн талбарт имэйл хаяг оруулахыг баталгаажуулах, алдаа гарсан тохиолдолд гипер холбоосыг цуцлах жишээг харуулж байна.

Жагсаалт 6.9. Өгөгдмөл үйлдлүүдийг тасалдуулж байна

Өгөгдмөл үйлдлүүдийг тасалдуулж байна

Имэйл:

дарна уутөлөөшилжилтдээрхолбоос

Худал буцаахаас гадна анхдагч үйлдлийг цуцлахын тулд үйл явдлын объектын preventDefault() аргыг (Жагсаалт 6-10) ашиглаж болно.

Жагсаалт 6.10. preventDefault() аргаар үйл явдлыг тасалдуулах

урьдчилан сэргийлэхDefault()

Үйл явдлыг арга замаар тасалдуулах урьдчилан сэргийлэхDefault()

Имэйл:

дарна уутөлөөшилжилтдээрхолбоос