Попап үйл явдлын танилцуулга. JavaScript Canceling event bubbling js дээр Event объекттой ажиллах ахисан түвшний

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

Үйл явдлын хөөс

Хэрэв ямар нэгэн элементийн хувьд үйл явдал тохиолдвол "поп гарч ирнэ", өөрөөр хэлбэл. эцэг эх, дараа нь өвөө эмээ гэх мэт тохиолддог.

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

Бид дараах жишээг ашиглан үйл явдал (хөөс) үүссэнийг харуулах болно.

Гарчиг

Зарим маш чухал текст

Бүлэг

Зарим текст

Текстийн үлдсэн хэсэг

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

HTML хуудас үүсгээд дээрх HTML кодыг оруулъя. Скрипт бичсэн JavaScript, хаалтын үндсэн шошгын өмнө оруулна. Үүний дараа веб хөтөч дээр шинээр үүсгэсэн хуудсыг нээж, F12 товчийг дараад консол руу очно уу. Одоо хүчтэй элементэд хамаарах хэсэгт хулганы зүүн товчийг дараад үйл явдал хэрхэн гарч ирэхийг харцгаая.

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

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

Жишээлбэл, дээрх үйл явдал үндсэн дээр хөөс гаргахгүйн тулд дээрх жишээгээ өөрчилье: document.addEventListener("DOMContentLoaded", function() ( var allElements = document.getElementsByTagName("*"); for (var i=0) i

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

Ажиллагчийг дуудсан элементийг авч байна

Үйл явдал зохицуулагч гэж нэрлэдэг DOM элементийг (объект) авахын тулд та түлхүүрийг ашиглах ёстой энэ үг. Өгсөн түлхүүр үг(энэ) нь зөвхөн JavaScript ашиглан үйл явдалд бүртгүүлсэн тохиолдолд л ажиллах боломжтой.

Жишээлбэл, консол дээр үйл явдал зохицуулагчийг дуудсан элементийн id-г харуулъя:

Var myP = document.getElementById("myP"); myP.addEventListener("click",function())( //үйл явдал зохицуулагч гэж нэрлэсэн DOM элементийг авах - энэ //түүний id-ыг аваад console.log(this.id); ));

Та мөн одоогийн элементийг авахын тулд currentTarget шинж чанарыг (event.currentTarget) ашиглаж болно.

Үйл явдлын үе шатууд (үе шатууд).

Аливаа үйл явдал гарч эхлэхээс өмнө (өгсөх үе шат) эхлээд өөр 2 үе шат дамждаг:

1-р шат бол үйл явдлыг үүсгэсэн элемент рүү шумбах үе шат юм. Тэдгээр. энэ үе шатанд дээрээс доошоо чиглэсэн хөдөлгөөн байдаг, i.e. -аас цонхны объектэлемент рүү. Энэ үе шатыг мөн таслан зогсоох үе гэж нэрлэдэг.
2-р шат бол зорилгодоо хүрэх үе шат, өөрөөр хэлбэл. үйл явдлыг үүсгэсэн элемент (объект).

Үйл явдлын бүх үе шатыг харгалзан үзэхэд дараах дүр зураг гарч ирнэ.

Дээрх жишээ скриптийг дараах байдлаар өөрчилье.

Document.addEventListener("DOMContentLoaded", функц() ( var allElements = document.getElementsByTagName("*"); for (var i=0; i)

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

Анхаарна уу: дүрэх үе шатанд үйл явдлыг зөвхөн addEventListener() аргыг ашиглан нэмсэн зохицуулагчид саатуулж болно. Бусад аргуудыг ашиглан нэмсэн зохицуулагч ( HTML шинж чанарэсвэл on[event] шинж чанарыг ашиглан JavaScript-ээр дамжуулан) нь зөвхөн хөөс үүсэх үе шатанд үйл явдлыг таслан зогсоох боломжтой.

Үйл явдлыг үүсгэсэн элементийг авч байна

Зорилтот элементийг авахын тулд, i.e. үйл явдлыг үүсгэсэн элемент нь зорилтот шинж чанарыг (event.target) ашиглах ёстой.

Скрипт элементийн агуулгыг дараах байдлаар өөрчлөх дээрх жишээг авч үзье.

Document.addEventListener("DOMContentLoaded", function() ( var elementBody = document.body; elementBody.addEventListener("click",function())( console.log(this.tagName + " - зохицуулагчийг дуудсан элемент") ; console .log(event.currentTarget.tagName + " - зохицуулагчийг дуудсан элемент"); console.log(event.target.tagName + " - үйл явдлыг үүсгэсэн элемент"); ), худал); )) ;

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

Энэ бүхэн JavaScript болон ангиудыг ашиглахаас эхэлсэн.

Гэсэн хэдий ч надад нэг асуудал байна. Би Bubble Events гэж нэрлэгддэг зүйлийг ашиглахыг хүссэн ч би тарилга хийх ёстой хамаарлыг багасгахыг хүссэн. Би холбогдохыг хүсээгүй jQuery номын сангууд"энэ бяцхан тест"-ийн хувьд зүгээр л попап үйл явдлуудыг ашиглахын тулд.

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

За, ямар асуудал байна вэ? Энгийн жишээг харцгаая:

Бидэнд товчлууруудын жагсаалт байгаа гэж бодъё. Аль нэг дээр нь дарах болгонд энэ нь "идэвхтэй" байх ёстой. Дахин дарсны дараа товчлуур анхны төлөв рүүгээ буцах ёстой.

HTML-ээс эхэлцгээе:

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

For(var i = 0; i< buttons.length; i++) { var button = buttons[i]; button.addEventListener("click", function() { if(!button.classList.contains("active")) button.classList.add("active"); else button.classList.remove("active"); }); }
Сайхан харагдаж байна... Гэхдээ бүтэхгүй. By ядаж, бидний хүлээж байгаа шиг биш.

Хаалтууд ялна. Жаахан функциональ JavaScript мэддэг хүмүүст асуудал тодорхой байна.

Үлдсэн хэсэгт нь би товч тайлбарлах болно - зохицуулагч функц нь товчлуурын хувьсагчид түгжигдсэн байна. Гэхдээ энэ нь нэг хувьсагч бөгөөд давталт болгон дээр дарж бичдэг.

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

Бидэнд функц тус бүрийн хувьд тусдаа контекст хэрэгтэй байна:

Var товчлуурууд = document.querySelectorAll(".toolbar товчлуур"); var createToolbarButtonHandler = function(товчлуур) ( буцах функц() ( if(!button.classList.contains("идэвхтэй")) button.classList.add("идэвхтэй"); else button.classList.remove("идэвхтэй"); ); ); for(var i = 0; i< buttons.length; i++) { buttons[i].addEventListener("click", createToolBarButtonHandler(buttons[i])); }
Хамаагүй дээр! Хамгийн гол нь энэ нь зөв ажилладаг. Бид үйл явдлын зохицуулагчийг буцаадаг createToolbarButtonHandle функцийг үүсгэсэн. Дараа нь бид товчлуур бүрт өөрийн зохицуулагчийг хавсаргана.

Тэгэхээр ямар асуудал байна вэ? Энэ нь сайн харагдаж, ажилладаг. Гэсэн хэдий ч бид кодоо илүү сайн болгож чадна.

Нэгдүгээрт, бид хэт олон зохицуулагч үүсгэдэг. .toolbar доторх товчлуур бүрийн хувьд бид функц үүсгэж, түүнийг үйл явдал зохицуулагч болгон холбодог. Гурван товчлуурын хувьд санах ойн хэрэглээ бага байна.

Гэхдээ бидэнд ийм зүйл байвал:

тэгвэл компьютер халихаас тэсэрч дэлбэрэхгүй нь ойлгомжтой. Гэсэн хэдий ч бидний санах ойн хэрэглээ тийм ч тохиромжтой биш юм. Бид үүнийг хийхгүйгээр хийх боломжтой ч гэсэн асар их хэмжээний мөнгийг хуваарилдаг. Нэг функцийг олон удаа ашиглахын тулд кодоо дахин бичье.

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

Event объект нь үйл явдлын талаарх зарим өгөгдлийг агуулдаг. Бидний хувьд одоогийн Зорилтот талбарыг сонирхож байна. Үүнээс бид товшсон элементийн холбоосыг авах болно:

Var toolbarButtonHandler = функц(e) ( var товч = e.currentTarget; if(!button.classList.contains("идэвхтэй")) button.classList.add("идэвхтэй"); else button.classList.remove("идэвхтэй" ); ); for(var i = 0; i< buttons.length; i++) { button.addEventListener("click", toolbarButtonHandler); }
Агуу их! Бид бүх зүйлийг олон удаа ашигладаг нэг функц болгон хялбаршуулаад зогсохгүй, шаардлагагүй генераторын функцийг устгаснаар кодыг илүү унших боломжтой болгосон.

Гэсэн хэдий ч бид илүү сайн хийж чадна.

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

Магадгүй өөр арга байдаг уу?

Үйл явдлууд хэрхэн явагддаг, бидний DOM дагуу хэрхэн хөдөлж байгааг ойлгож эхэлцгээе.

Тэдний ихэнх нь хэрхэн ажилладаг вэ? Хэрэглэгч элемент дээр дарахад энэ тухай програмд мэдэгдэх үйл явдал үүсдэг. Үйл явдал бүрийн аялал гурван үе шаттайгаар явагдана.

Таслах үе шат

Зорилтот элемент дээр үйл явдал тохиолддог

Өгсөх үе шат

Анхаарна уу: бүх үйл явдал тасалдал эсвэл хөөс үүсэх үе шатанд ордоггүй; зарим нь элемент дээр шууд үүсдэг. Гэсэн хэдий ч энэ нь дүрмээс үл хамаарах зүйл юм.

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

Энд бидний HTML загвар байна:

А товч
Б товчлуур
C товчлуур

Хэрэглэгч А товчлуур дээр дарахад үйл явдал дараах байдлаар явагдана.

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

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

Тодорхой жишээ болгон багаж самбараа авч үзье:

Ul class="toolbar">

Харандаа

Үзэг

баллуур

Одоо бид товчлуур дээр дарахад ul.toolbar элементээр гарч ирэхийг мэдэж байгаа тул түүнд үйл явдал зохицуулагчаа хавсаргая. Аз болоход, бидэнд аль хэдийн байгаа:

Var toolbar = document.querySelector(".toolbar"); toolbar.addEventListener("товшилт", функц(e) ( var товч = e.target; if(!button.classList.contains("идэвхтэй")) button.classList.add("идэвхтэй"); else button.classList. устгах("идэвхтэй"); ));
Бид одоо илүү цэвэр кодтой болж, гогцооноос ч салсан! Гэхдээ бид e.currentTarget-г e.target-ээр сольсон гэдгийг анхаарна уу. Шалтгаан нь бид үйл явдлыг өөр түвшинд боловсруулдагт оршино.

e.target нь үйл явдлын бодит зорилт бөгөөд энэ нь DOM-ээр дамжиж, дараа нь хаанаас хөөс гарах болно.
e.currentTarget - үйл явдлыг зохицуулдаг одоогийн элемент. Манай тохиолдолд энэ нь ul.toolbar юм.

Сайжруулсан Bubble үйл явдлууд Энэ мөчБид ul.toolbar-аар гарч ирэх элемент бүр дээр товшилтыг зохицуулдаг боловч баталгаажуулах нөхцөл нь хэтэрхий энгийн. Хэрэв бид дарахад зориулагдаагүй дүрс болон элементүүдийг багтаасан илүү төвөгтэй DOM-тэй байсан бол юу болох вэ?

Өө! Одоо бид li.separator эсвэл дүрс дээр дарахад бид .active классыг нэмнэ. Наад зах нь энэ нь сайн зүйл биш юм. Бидэнд хэрэгтэй элементэд хариу үйлдэл үзүүлэхийн тулд үйл явдлыг шүүх арга хэрэгтэй.

Үүний тулд жижиг туслах функцийг үүсгэцгээе:

Var delegate = function(шалгуур, сонсогч) ( буцах функц(e) ( var el = e.target; хийх (хэрэв (! шалгуур(el))) үргэлжлүүлэх; e.delegateTarget = el; listener.apply(энэ, аргументууд); буцах; ) while((el = el.parentNode)); ); );
Манай туслах хоёр зүйл хийдэг. Нэгдүгээрт, энэ нь элемент тус бүр болон түүний эцэг эхийг давтаж, шалгуур үзүүлэлтээр дамжуулсан нөхцөлийг хангаж байгаа эсэхийг шалгана. Хэрэв элемент хангагдсан бол туслагч нь delegateTarget хэмээх үйл явдлын объектод бидний нөхцөлийг хангасан элементийг хадгалдаг талбарыг нэмнэ. Тэгээд зохицуулагчийг дууддаг. Үүний дагуу, хэрэв ямар ч элемент нөхцөлийг хангахгүй бол ямар ч зохицуулагч дуудагдахгүй.

Бид үүнийг дараах байдлаар ашиглаж болно.

Var toolbar = document.querySelector(".toolbar"); var buttonsFilter = function(elem) ( буцаах elem.classList && elem.classList.contains("btn"); ); var buttonHandler = функц(e) ( var товч = e.delegateTarget; if(!button.classList.contains("идэвхтэй")) button.classList.add("идэвхтэй"); else button.classList.remove("идэвхтэй" ); ); toolbar.addEventListener("дарна уу", төлөөлөгч(buttonsFilter, buttonHandler));
Эмчийн тушаасан зүйл: бүх ажлыг гүйцэтгэдэг нэг элементэд нэг үйл явдал зохицуулагч холбогдсон. Гэхдээ энэ нь зөвхөн бидэнд хэрэгтэй элементүүдийн хувьд үүнийг хийдэг. Энэ нь DOM-ээс объект нэмэх, хасахад төгс хариу үйлдэл үзүүлдэг.

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

Хэрэв би үүнээс номын сан хийх юм уу кодыг хөгжүүлэлтэд ашиглахыг хүсвэл би хэд хэдэн зүйлийг нэмж оруулах болно:

Объект шалгуурыг хангаж байгаа эсэхийг шалгах туслах функц нь илүү нэгдсэн бөгөөд ажиллагаатай хэлбэрээр. Үүнд:

Var kriteria = ( isElement: function(e) ( буцах e instance of HTMLElement; ), hasClass: function(cls) ( буцах функц(e) ( буцаах criteria.isElement(e) && e.classList.contains(cls); ) ) // Илүү олон шалгуур);
Туслахыг хэсэгчлэн ашиглах нь бас ашигтай байх болно:

Var partialDelgate = функц(шалгуур) ( буцах функц(харьцуулагч) ( буцаах degate(шалгуур, зохицуулагч); ) );
Жинхэнэ нийтлэл: Төлөөлөгдсөн JavaScript үйл явдлуудыг ойлгох
(Орчуулагчаас: миний анхны, хатуу шүү.)

Аз жаргалтай кодчилол!

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

Урьдчилсан нөхцөл: Зорилго:

Компьютерийн үндсэн мэдлэг, HTML болон CSS-ийн үндсэн ойлголт, JavaScript-ийн эхний алхамууд.

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

Азтай үйл явдлуудын цуврал

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

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

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

Та үүнээс (мөн MDN Event-ийн лавлагааг харахад) хариу өгөх боломжтой олон үйл явдал байгааг олж мэдэх боломжтой.

Боломжтой үйл явдал бүр үйл явдал гарвал ажиллах кодын блок (ихэвчлэн програмистын хувьд JavaScript функц) болох үйл явдал зохицуулагчтай байдаг. Ийм блок кодын үйл явдлын хариуд ажиллахаар тодорхойлогдох үед бид үйл явдлын зохицуулагчийг бүртгэж байна гэж хэлдэг. Үйл явдал зохицуулагчдыг заримдаа үйл явдлын сонсогч гэж нэрлэдэг гэдгийг анхаарна уу - тэдгээр нь бидний зорилгын үүднээс солигдох боломжтой боловч хатуухан хэлэхэд тэд хамтдаа ажилладаг. Сонсогч нь болж буй үйл явдлыг сонсдог бөгөөд зохицуулагч нь түүнд хариу үйлдэл үзүүлэх код юм.

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

Энгийн жишээ

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

Өнгө өөрчлөх

Товчлуур (маржин: 10px );

JavaScript дараах байдлаар харагдаж байна.

Const btn = document.querySelector("товч"); функц санамсаргүй(тоо) ( буцаана Math.floor(Math.random() * (тоо+1)); ) btn.onclick = function() ( const rndCol = "rgb(" + random(255) + "," + санамсаргүй(255) + "," + санамсаргүй(255) + ")"; document.body.style.backgroundColor = rndCol; )

Энэ кодонд бид Document.querySelector() функцийг ашиглан btn хэмээх тогтмол дотор товчлуурын лавлагааг хадгалдаг. Бид мөн санамсаргүй тоог буцаадаг функцийг тодорхойлдог. Кодын гурав дахь хэсэг нь үйл явдлын зохицуулагч юм. btn тогтмол нь элементийг заадаг бөгөөд энэ төрлийн объект нь түүн дээр асах боломжтой хэд хэдэн үйл явдлуудтай байдаг тул үйл явдлын зохицуулагчийг ашиглах боломжтой. Бид onclick үйл явдал зохицуулагчийн шинж чанарыг санамсаргүй RGB өнгийг үүсгэж, арын өнгийг түүнтэй тэнцүү болгох код агуулсан нэргүй функцтэй тэнцүү болгож тохируулснаар click үйл явдлын идэвхжлийг сонсож байна.

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

Гаралтын жишээ нь дараах байдалтай байна.

Энэ нь зөвхөн вэб хуудас биш юм

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

Inline үйл явдлын зохицуулагчид - эдгээрийг бүү ашигла

Та өөрийн кодын дотор иймэрхүү хэв маягийг харж болно:

bgChange() функцийг дарна уу ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol;)

Вэбээс олдсон үйл явдал зохицуулагчийг бүртгэх хамгийн эртний арга нь дээр үзүүлсэн шиг үйл явдал зохицуулагчийн HTML шинж чанаруудыг (эсвэл шугаман үйл явдал зохицуулагч) - атрибутын утга нь тухайн үйл явдал тохиолдох үед ажиллуулахыг хүссэн JavaScript код юм. Дээрх жишээ нь нэг хуудсан дээрх элемент дотор тодорхойлогдсон функцийг дуудаж байгаа боловч та JavaScript-г атрибут дотор шууд оруулж болно, жишээлбэл:

Намайг дар

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

Эхлэхийн тулд HTML болон JavaScript-ээ холих нь тийм ч сайн санаа биш, учир нь үүнийг задлан шинжлэхэд хэцүү байдаг - JavaScript-ээ бүгдийг нэг дор хадгалах нь дээр; Хэрэв энэ нь тусдаа файлд байгаа бол та үүнийг олон HTML баримт бичигт хэрэглэж болно.

Ганц файлд ч гэсэн inline үйл явдлын зохицуулагч нь тийм ч сайн санаа биш юм. Нэг товчлуур зүгээр, гэхдээ 100 товчлууртай байсан бол яах вэ? Та файлд 100 атрибут нэмэх шаардлагатай бөгөөд энэ нь маш хурдан засвар үйлчилгээ болж хувирах болно. JavaScript-ийн тусламжтайгаар та хуудасны бүх товчлуур дээр хичнээн олон товчлуур байсан ч гэсэн иймэрхүү зүйлийг ашиглан үйл явдал зохицуулагч функцийг амархан нэмж болно. энэ:

Const товчлуурууд = document.querySelectorAll("товчлуур"); төлөө (i = 0; i< buttons.length; i++) { buttons[i].onclick = bgChange; } buttons.forEach(function(button) { button.onclick = bgChange; });

Тэмдэглэл: Програмчлалын логикоо контентоос нь салгах нь таны сайтыг хайлтын системд илүү ээлтэй болгодог.

addEventListener() ба removeEventListener()

Үйл явдлын механизмын хамгийн шинэ төрлийг Баримт бичгийн объектын загвар (DOM) 2-р түвшний үйл явдлын тодорхойлолтод тодорхойлсон бөгөөд хөтчүүдэд шинэ функцээр хангадаг addEventListener() . Энэ нь үйл явдал зохицуулагчийн шинж чанаруудтай ижил төстэй байдлаар ажилладаг боловч синтакс нь мэдээж өөр юм. Бид санамсаргүй өнгөний жишээг дараах байдлаар дахин бичиж болно.

Const btn = document.querySelector("товч"); функц bgChange() ( const rndCol = "rgb(" + санамсаргүй(255) + "," + санамсаргүй(255) + "," + санамсаргүй(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("товшилт", bgChange);

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

Btn.addEventListener("click", function() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol; ));

Энэ механизм нь дээр дурдсан хуучин механизмуудаас давуу талтай. Эхлэхийн тулд өмнө нь нэмсэн сонсогчийг устгадаг removeEventListener() гэсэн эсрэг функц байдаг. Жишээлбэл, энэ нь энэ хэсгийн эхний кодын блок дахь сонсогчийг устгах болно:

Btn.removeEventListener("товших", bgChange);

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

Хоёрдугаарт, та нэг сонсогчдод олон зохицуулагч бүртгүүлж болно. Дараах хоёр зохицуулагч хоёуланг нь ашиглахгүй:

MyElement.onclick = functionA; myElement.onclick = functionB;

Хоёрдахь мөрөнд эхний мөрөнд тохируулсан onclick-ийн утгыг дарж бичнэ. Гэсэн хэдий ч энэ нь ажиллах болно:

MyElement.addEventListener("товшилт", функцA); myElement.addEventListener("товшилт", функцB);

Элемент дээр дарахад хоёр функц хоёулаа ажиллах болно.

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

Би ямар механизм ашиглах ёстой вэ?

Гурван механизмаас та HTML үйл явдал зохицуулагчийн шинж чанаруудыг ашиглах ёсгүй - эдгээр нь дээр дурдсанчлан хуучирсан, муу үйл ажиллагаа юм.

Нөгөө хоёр нь харьцангуй солигдох боломжтой, наад зах нь энгийн хэрэглээнд:

Үйл явдал зохицуулагчийн шинж чанарууд нь хүч чадал, сонголт багатай, гэхдээ хөтчүүд хоорондын нийцтэй байдал нь илүү сайн байдаг (одоо хүртэл дэмжигдсэн). Internet Explorer 8). Та сурч байхдаа эдгээрээс эхлэх хэрэгтэй байх.
DOM 2-р түвшний үйл явдлууд (addEventListener() гэх мэт) нь илүү хүчирхэг боловч илүү төвөгтэй болж, төдийлөн сайн дэмжигдээгүй (Internet Explorer 9 хүртэл дэмжигдсэн). Та эдгээрийг туршиж үзэх хэрэгтэй бөгөөд боломжтой бол тэдгээрийг ашиглахыг хичээ.

Гурав дахь механизмын гол давуу тал нь хэрэв шаардлагатай бол removeEventListener() ашиглан үйл явдлын зохицуулагчийн кодыг устгаж, шаардлагатай бол элементүүдэд ижил төрлийн олон сонсогч нэмж болно. Жишээлбэл, та addEventListener("click", function() ( ... ))-г хоёр дахь аргументад заасан өөр функцээр хэд хэдэн удаа элемент дээр дуудаж болно. Үйл явдал зохицуулагчийн шинж чанаруудын хувьд энэ нь боломжгүй юм, учир нь шинж чанарыг тохируулах дараагийн оролдлого нь өмнөхийг дарж бичих болно, жишээлбэл:

Element.onclick = функц1; element.onclick = функц2; гэх мэт.

Тэмдэглэл: Хэрэв та ажил дээрээ Internet Explorer 8-аас хуучин хөтчүүдийг дэмжихийг хүсэх юм бол эртний хөтчүүд шинэ хөтчүүдээс ялгаатай үйл явдлын загваруудыг ашигладаг тул танд бэрхшээл тулгарч магадгүй юм. Гэхдээ хэзээ ч бүү ай, ихэнх JavaScript сангууд (жишээ нь jQuery) хөтчүүдийн хоорондын ялгааг арилгадаг суурилуулсан функцуудтай байдаг. Сурах аялалынхаа энэ үе шатанд энэ талаар хэт санаа зовох хэрэггүй.

Бусад үйл явдлын үзэл баримтлал

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

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

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

Функц bgChange(e) ( const rndCol = "rgb(" + санамсаргүй(255) + "," + санамсаргүй(255) + "," + санамсаргүй(255) + ")"; e.target.style.backgroundColor = rndCol ; console.log(e); ) btn.addEventListener("дарна уу", bgChange);

Эндээс бид үйл явдлын объект болох e-г функцэд, мөн e.target дээр дэвсгэр өнгөний хэв маягийг тохируулах функцэд оруулж байгааг харж болно - энэ нь өөрөө товчлуур юм. Үйл явдлын объектын зорилтот шинж чанар нь үргэлж тухайн үйл явдал болсон элементийн лавлагаа байдаг. Тиймээс энэ жишээн дээр бид хуудсан дээр биш харин товчлуур дээр санамсаргүй дэвсгэр өнгө тохируулж байна.

Тайлбар: Та үйл явдлын объектод дуртай нэрээ ашиглаж болно - та үйл явдлын зохицуулагч функц дотор ашиглах нэрээ сонгоход л хангалттай. e/evt/event нь богино бөгөөд санахад хялбар байдаг тул хөгжүүлэгчид ихэвчлэн ашигладаг. Өөртэйгөө, боломжтой бол бусадтай тууштай байх нь үргэлж сайн байдаг.

Хэрэв та олон элемент дээр ижил үйл явдал зохицуулагчийг тохируулж, тэдгээрт үйл явдал тохиолдоход бүгдэд нь ямар нэг зүйл хийхийг хүсвэл e.target нь үнэхээр хэрэгтэй. Жишээлбэл, та 16 хавтантай байж болох бөгөөд тэдгээр нь дээр дарахад алга болно. Аливаа зүйлийг илүү хэцүү аргаар сонгохын оронд зүгээр л e.target гэж алга болгох боломжтой байх нь ашигтай. Дараах жишээнд (бүтэн эх кодыг ашигтай-eventtarget.html-ээс үзнэ үү; мөн энд шууд ажиллаж байгааг харна уу) бид JavaScript ашиглан 16 элемент үүсгэдэг. Дараа нь бид бүгдийг нь document.querySelectorAll() ашиглан сонгоод, тус бүрийг нь гүйлгэж, тус бүр дээр onclick зохицуулагчийг нэмж, дарахад тус бүр дээр санамсаргүй өнгө хэрэглэнэ.

Const divs = document.querySelectorAll("div"); төлөө (i = 0; i< divs.length; i++) { divs[i].onclick = function(e) { e.target.style.backgroundColor = bgChange(); } }

Гаралт нь дараах байдалтай байна (үүн дээр дарж үзээрэй - хөгжилтэй байгаарай):

Далд жишээ Ашигтай үйл явдлын зорилтот жишээ div ( өндөр: 100px; өргөн: 25%; хөвөх: зүүн; ) (let i = 1; i)

Харандаа

Үзэг

баллуур

Сайжруулсан попап үйл явдлууд Одоогоор бид ul.toolbar-аар гарч ирэх элемент бүр дээр товшилтыг зохицуулдаг боловч баталгаажуулах нөхцөл нь хэтэрхий энгийн байна. Хэрэв бид дарахад зориулагдаагүй дүрс болон элементүүдийг багтаасан илүү төвөгтэй DOM-тэй байсан бол юу болох вэ?

Үүний тулд жижиг туслах функцийг үүсгэцгээе:

Бид үүнийг дараах байдлаар ашиглаж болно.

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

Аз жаргалтай кодчилол!

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

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

Хэрэв та дэд тэмдэг дээр дарвал энэ зохицуулагч ажиллах болно. эсвэл:

EM дээр дарвал DIV дээрх зохицуулагч ажиллах болно

Таны харж байгаагаар та үүрлэсэн em элемент дээр дарахад div дээрх зохицуулагч идэвхждэг. Яагаад ийм зүйл болж байна вэ? Үргэлжлүүлэн уншаад олж мэдээрэй.

Өгсөх

Тиймээс өгсөх үндсэн зарчим:

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

Жишээлбэл, FORM > DIV > P гэсэн 3 үүрлэсэн элемент тус бүр дээр үйл явдал зохицуулагчтай байна гэж бодъё:

их бие * ( захын зай: 10px; хүрээ: 1px цул хөх; ) FORM DIV

Бөмбөлөг нь дотоод элемент дээр товшихыг баталгаажуулдаг

Бодит дээр эхлээд дарах зохицуулагчийг (мэдээж байгаа бол) дуудна

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

Зорилтот элементийн үйл явдалд хандаж байна.target

Бид ямар элемент дээр энэ эсвэл тэр үйл явдлыг барьж авсныг мэдэхийн тулд event.target арга байдаг. (үйл явдлын объектын талаар уншина уу).

event.target нь тухайн үйл явдал болсон бодит эх элемент юм.
Энэ нь дандаа бөмбөлөгт хүрсэн одоогийн элемент бөгөөд зохицуулагч үүн дээр ажиллаж байна.

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

Үүнд:

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

Зарчмын хувьд, энэ маягтыг дарж, маягтанд нэмэлт элемент байхгүй бол event.target-тай давхцаж болно.

Өгсөхөө зогсоох

Ер нь үйл явдлын хөөс нь шууд дээд тал руугаа явж, үндсэн цонхны объектод хүрдэг.

Гэхдээ ямар нэгэн завсрын элемент дээр авиралтыг зогсоох боломжтой.

Тархалтыг зогсоохын тулд event.stopPropagation() аргыг дуудах хэрэгтэй.

Жишээг харцгаая: товчлуурыг дарахад body.onclick зохицуулагч ажиллахгүй:

Намайг дар

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

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

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

Усанд шумбах

Стандартад үйл явдлын "өгсөлт" -ээс гадна "шумбах" байдаг.

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

Тиймээс үйл явдлын 3 үе шат байна:

Үйл явдал нь дээрээс доошоо ирдэг. Энэ үе шатыг "таслах үе шат" гэж нэрлэдэг.

Үйл явдал нь тодорхой элементэд хүрсэн. Энэ бол "зорилго үе шат" юм.

Бүх зүйлийн дараа үйл явдал гарч эхэлдэг. Энэ бол "өгсөх шат" юм.

Үүнийг стандартад дараах байдлаар харуулав.

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

Бусад үе шатууд нь ашиглагдахгүй, бидний анзааралгүй өнгөрдөг тул дээр би зөвхөн өгсөх тухай бичсэн.

Ажиллагчид саатуулах үе шатын талаар юу ч мэдэхгүй, харин өгсөлтөөс эхлэн ажиллаж эхэлдэг.

Тасалгааны үе шатанд үйл явдлыг барихын тулд та зүгээр л ашиглах хэрэгтэй:

Маргаан нь үнэн, дараа нь үйл явдал уруудах замд таслагдах болно.
Аргумент нь худал, дараа нь үйл явдал хөөс үүсэх үед баригдах болно.

Жишээ

Жишээн дээр , ,

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

Ажиллагчид дээрээс доош дарааллаар ажиллана: FORM → DIV → P.

JS код нь:

Var elems = document.querySelectorAll("form,div,p"); // (var i = 0; i).< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); }

Хоёр үе шатанд зохицуулагч томилоход хэн ч саад болохгүй, жишээ нь:

Var elems = document.querySelectorAll("form,div,p"); for (var i = 0; i< elems.length; i++) { elems[i].addEventListener("click", highlightThis, true); elems[i].addEventListener("click", highlightThis, false); }

Дотоод элемент дээр дарна уу

Үйл явдлын дарааллыг харахын тулд:
Энэ нь FORM → DIV → P → P → DIV → FORM байх ёстой. элемент гэдгийг анхаарна уу

Хоёр шатанд оролцоно.

Үр дүн

Үйл явдал тохиолдоход тухайн үйл явдал болсон элементийг event.target гэж тэмдэглэнэ.
Үйл явдал эхлээд баримт бичгийн үндэсээс event.target руу шилжиж, addEventListener(…., үнэн)-ээр хангагдсан зохицуулагчдыг замдаа дууддаг.
Үйл явдал нь event.target-аас баримт бичгийн эхэнд шилжиж, addEventListener(…., false)-ээр хангагдсан зохицуулагчдыг дууддаг.

Зохицуулагч бүр үйл явдлын шинж чанаруудад хандах эрхтэй болно:

event.target нь тухайн үйл явдал болсон хамгийн гүн элемент юм.
event.currentTarget (=энэ) – өөрөө зохицуулагч одоогоор идэвхжсэн (үйл явдал “хүрсэн”) элемент.
event.eventPhase – ямар үе шатанд үйл явдал зохицуулагчийг идэвхжүүлсэн (шумбах = 1, дээшлэх = 3).

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