მოვლენები არის მოქმედებები ან მოვლენები, რომლებიც ხდება თქვენს მიერ დაპროგრამებულ სისტემაში, რომლის შესახებაც სისტემა გეუბნებათ, რათა სურვილის შემთხვევაში მათზე რაიმე ფორმით უპასუხოთ. მაგალითად, თუ მომხმარებელი დააწკაპუნებს ღილაკზე ვებგვერდზე, შეიძლება დაგჭირდეთ პასუხის გაცემა ინფორმაციის ყუთის ჩვენებით. ამ სტატიაში განვიხილავთ რამდენიმე მნიშვნელოვან კონცეფციას მოვლენების გარშემო და ვნახოთ, როგორ მუშაობენ ისინი ბრაუზერებში. ეს არ იქნება ამომწურავი კვლევა მხოლოდ ის, რაც თქვენ უნდა იცოდეთ ამ ეტაპზე.
| კომპიუტერის საბაზისო ცოდნა, HTML და CSS-ის საბაზისო გაგება, JavaScript პირველი ნაბიჯები. |
| მოვლენების ფუნდამენტური თეორიის გასაგებად, როგორ მუშაობენ ისინი ბრაუზერებში და როგორ შეიძლება განსხვავდებოდეს მოვლენები სხვადასხვა პროგრამირების გარემოში. |
როგორც ზემოთ აღინიშნა, მოვლენები არის მოქმედებები ან მოვლენები, რომლებიც ხდება სისტემაში, რომელსაც თქვენ პროგრამირებთ - სისტემა აწარმოებს (ან "ასხივებს") რაიმე სახის სიგნალს, როდესაც ხდება მოვლენა, და ასევე უზრუნველყოფს მექანიზმს, რომლითაც შესაძლებელია რაიმე სახის მოქმედება. ავტომატურად მიიღება (ანუ ზოგიერთი კოდი გაშვებული) როდესაც მოხდება მოვლენა. მაგალითად, აეროპორტში, როდესაც ასაფრენი ბილიკი ნათელია, რომ თვითმფრინავი აფრენს, სიგნალი ეგზავნება პილოტს და შედეგად, ისინი იწყებენ თვითმფრინავის პილოტს.
ინტერნეტის შემთხვევაში, მოვლენები ირთვება ბრაუზერის ფანჯარაში და მიმაგრებულია მასში არსებულ კონკრეტულ ელემენტზე - ეს შეიძლება იყოს ერთი ელემენტი, ელემენტების ნაკრები, მიმდინარე ჩანართში ჩატვირთული HTML დოკუმენტი ან მთელი ბრაუზერის ფანჯარა. არსებობს უამრავი სხვადასხვა ტიპის მოვლენა, რომელიც შეიძლება მოხდეს, მაგალითად:
- მომხმარებელიმაუსის დაწკაპუნება გარკვეულ ელემენტზე ან კურსორის გადატანა გარკვეულ ელემენტზე.
- მომხმარებელი კლავიატურაზე კლავიშს აჭერს.
- მომხმარებელი ზომავს ან ხურავს ბრაუზერის ფანჯარას.
- ფორმა წარდგენილია.
- ვიდეოს დაკვრა ან დაპაუზება ან დაკვრის დასრულება.
- მოხდა შეცდომა.
აქედან (და MDN ღონისძიების მითითების გადახედვისას) შეგიძლიათ გაიგოთ, რომ უამრავი მოვლენაა, რომლებზეც პასუხის გაცემა შეიძლება.
თითოეულ ხელმისაწვდომი მოვლენას აქვს მოვლენის დამმუშავებელი, რომელიც არის კოდის ბლოკი (ჩვეულებრივ JavaScript ფუნქცია, რომელსაც თქვენ, როგორც პროგრამისტი ქმნით), რომელიც გაშვებული იქნება ღონისძიების გაშვებისას. როდესაც კოდის ასეთი ბლოკი განისაზღვრება მოვლენის გასროლის საპასუხოდ გასაშვებად, ჩვენ ვამბობთ, რომ ვარეგისტრირებთ მოვლენის დამმუშავებელს. გაითვალისწინეთ, რომ მოვლენის დამმუშავებლებს ზოგჯერ უწოდებენ მოვლენის მსმენელებს - ისინი საკმაოდ ურთიერთშემცვლელნი არიან ჩვენი მიზნებისთვის, თუმცა მკაცრად რომ ვთქვათ, ისინი ერთად მუშაობენ. მსმენელი უსმენს მოვლენის მიმდინარეობას, ხოლო დამმუშავებელი არის კოდი, რომელიც იწარმოება მის განხორციელების საპასუხოდ.
შენიშვნა: ვებ მოვლენები არ არის JavaScript-ის ძირითადი ენის ნაწილი - ისინი განისაზღვრება, როგორც ბრაუზერში ჩაშენებული API-ების ნაწილი.
მარტივი მაგალითიმოდით შევხედოთ მარტივ მაგალითს, რათა ავუხსნათ, თუ რას ვგულისხმობთ აქ თქვენ უკვე ნახეთ მოვლენები და ღონისძიების დამმუშავებლები, რომლებიც გამოიყენება ამ კურსში არსებულ ბევრ მაგალითში, მაგრამ მოდით შევაჯამოთ ჩვენი ცოდნა შემდეგიმაგალითად, გვაქვს ერთი , რომელიც დაჭერით ცვლის ფონის შემთხვევით ფერს:
ფერის შეცვლა
ღილაკი (ზღვარი: 10 პიქსელი);
JavaScript ასე გამოიყურება:
Const btn = document.querySelector("ღილაკი"); ფუნქცია random(number) ( return Math.floor(Math.random() * (number+1)); ) btn.onclick = function() (const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random (255) + ")" document.body.style.backgroundColor = rndCol )
ამ კოდში ჩვენ ვინახავთ ღილაკზე მითითებას მუდმივში, რომელსაც ეწოდება btn, Document.querySelector() ფუნქციის გამოყენებით. ჩვენ ასევე განვსაზღვრავთ ფუნქციას, რომელიც აბრუნებს შემთხვევით რიცხვს. კოდის მესამე ნაწილი არის მოვლენის დამმუშავებელი. btn მუდმივი მიუთითებს ელემენტზე და ამ ტიპის ობიექტს აქვს მრავალი მოვლენა, რომელსაც შეუძლია მასზე გასროლა და, შესაბამისად, ხელმისაწვდომია მოვლენის დამმუშავებლები. ჩვენ ვუსმენთ დაწკაპუნების მოვლენის გასროლას, onclick event handler თვისების ტოლფასად ანონიმურ ფუნქციას, რომელიც შეიცავს RGB-ის შემთხვევით ფერს და ადგენს მის ტოლფას ფონის ფერს.
ეს კოდი იშვება, როდესაც დაწკაპუნების მოვლენა ჩნდება ელემენტზე, ანუ როდესაც მომხმარებელი დააწკაპუნებს მასზე.
მაგალითის გამომავალი ასეთია:
ეს არ არის მხოლოდ ვებ გვერდებიკიდევ ერთი რამ, რაც ამ ეტაპზე უნდა აღინიშნოს, არის ის, რომ მოვლენები არ არის უნიკალური JavaScript-ისთვის - პროგრამირების ენების უმეტესობას აქვს რაიმე სახის მოვლენის მოდელი და მოდელის მუშაობის წესი ხშირად განსხვავდება JavaScript-ისგან. სინამდვილეში, ღონისძიების მოდელი JavaScript-ში. ვებ გვერდებისთვის განსხვავდება JavaScript-ის მოვლენის მოდელისგან, რადგან ის გამოიყენება სხვა გარემოში.
ინლაინ მოვლენის დამმუშავებლები - არ გამოიყენოთ ისინითქვენ ასევე შეგიძლიათ ნახოთ ასეთი ნიმუში თქვენს კოდში:
დააჭირეთ me ფუნქცია bgChange() ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol)
ინტერნეტში ნაპოვნი მოვლენების დამმუშავებლების რეგისტრაციის ყველაზე ადრეული მეთოდი მოიცავდა მოვლენების დამმუშავებლის HTML ატრიბუტებს (ან ინლაინ მოვლენის დამმუშავებლებს), როგორიცაა ერთიზემოთ ნაჩვენები - ატრიბუტის მნიშვნელობა ფაქტიურად არის JavaScript კოდი, რომლის გაშვებაც გსურთ, როდესაც მოხდება მოვლენა. ზემოაღნიშნული მაგალითი იწვევს იმავე გვერდზე ელემენტის შიგნით განსაზღვრულ ფუნქციას, მაგრამ ასევე შეგიძლიათ JavaScript-ის ჩასმა პირდაპირ ატრიბუტის შიგნით, მაგალითად:
დამიჭირე
თქვენ შეგიძლიათ იპოვოთ HTML ატრიბუტის ეკვივალენტები მოვლენის დამმუშავებლის მრავალი თვისებისთვის; თუმცა, თქვენ არ უნდა გამოიყენოთ ეს - ისინი განიხილება ცუდ პრაქტიკაში. შეიძლება მოგეჩვენოთ, რომ ივენთების დამმუშავებლის ატრიბუტის გამოყენება მარტივია, თუ რაღაცას აკეთებთ ძალიან სწრაფად, მაგრამ ისინი ძალიან სწრაფად ხდებიან უმართავი და არაეფექტური.
დასაწყისისთვის, არ არის კარგი იდეა თქვენი HTML-ისა და JavaScript-ის შერევა, რადგან ძნელია მისი გარჩევა - უკეთესია თქვენი JavaScript-ის ერთ ადგილზე შენახვა; თუ ის ცალკე ფაილშია, შეგიძლიათ გამოიყენოთ იგი მრავალ HTML დოკუმენტზე.
ერთ ფაილშიც კი, ინლაინ მოვლენის დამმუშავებლები არ არის კარგი იდეა. ერთი ღილაკი კარგია, მაგრამ რა მოხდება, თუ გქონდეს 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(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body.style.backgroundColor = rndCol; ) btn.addEventListener("click", bgChange);
addEventListener() ფუნქციის შიგნით, ჩვენ განვსაზღვრავთ ორ პარამეტრს - მოვლენის სახელს, რომელზედაც გვინდა დაარეგისტრიროთ ეს დამმუშავებელი, და კოდი, რომელიც შეიცავს დამმუშავებლის ფუნქციას, რომლის გაშვებაც გვინდა მის საპასუხოდ. გაითვალისწინეთ, რომ სავსებით მიზანშეწონილია დააყენოთ ყველა კოდი addEventListener() ფუნქციის შიგნით, ანონიმურ ფუნქციაში, როგორიცაა:
Btn.addEventListener("click", function() ( var rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; document.body .style.backgroundColor = rndCol);
ამ მექანიზმს აქვს გარკვეული უპირატესობები ადრე განხილულ ძველ მექანიზმებთან შედარებით. დასაწყისისთვის, არის კოლეგას ფუნქცია, removeEventListener(), რომელიც შლის ადრე დამატებულ მსმენელს. მაგალითად, ეს წაშლის მსმენელ კომპლექტს ამ განყოფილების პირველ კოდის ბლოკში:
Btn.removeEventListener("click", bgChange);
ეს არ არის მნიშვნელოვანი მარტივი, პატარა პროგრამებისთვის, მაგრამ უფრო დიდი, უფრო რთული პროგრამებისთვის მას შეუძლია გააუმჯობესოს ეფექტურობა ძველი გამოუყენებელი ღონისძიების პლიუსების გაწმენდისთვის, მაგალითად, ეს საშუალებას გაძლევთ გქონდეთ ერთი და იგივე ღილაკი, რომელიც ახორციელებს სხვადასხვა მოქმედებებს სხვადასხვა გარემოებებში. ყველაფერი რაც თქვენ უნდა გააკეთოთ, არის საჭიროებისამებრ დაამატოთ ან წაშალოთ მოვლენის დამმუშავებლები.
მეორე, თქვენ ასევე შეგიძლიათ დაარეგისტრიროთ მრავალი დამმუშავებელი ერთი და იგივე მსმენელისთვის. შემდეგი ორი დამმუშავებელი ორივე არ იქნება გამოყენებული:
MyElement.onclick = functionA; myElement.onclick = functionB;
მეორე სტრიქონი გადაწერს პირველი ხაზის მიერ დაყენებული onclick-ის მნიშვნელობას. თუმცა ეს იმუშავებს:
MyElement.addEventListener("click", functionA); myElement.addEventListener("click", functionB);
ორივე ფუნქცია ახლა იმუშავებს ელემენტზე დაწკაპუნებისას.
გარდა ამისა, არსებობს მრავალი სხვა ძლიერი ფუნქცია და ვარიანტი, რომლებიც ხელმისაწვდომია ამ ღონისძიების მექანიზმით. ამ სტატიისთვის ეს ცოტა არ არის, მაგრამ თუ გსურთ მათი წაკითხვა, გადახედეთ addEventListener() და removeEventListener() საცნობარო გვერდებს.
რა მექანიზმი უნდა გამოვიყენო?სამი მექანიზმიდან, თქვენ ნამდვილად არ უნდა გამოიყენოთ HTML მოვლენის დამმუშავებლის ატრიბუტები - ეს არის მოძველებული და ცუდი პრაქტიკა, როგორც ზემოთ აღინიშნა.
დანარჩენი ორი შედარებით ურთიერთშემცვლელია, ყოველ შემთხვევაში მარტივი გამოყენებისთვის:
- მოვლენის დამმუშავებლის თვისებებს აქვს ნაკლები სიმძლავრე და ოფციები, მაგრამ უკეთესი თავსებადობა ბრაუზერებს შორის (მხარდაჭერილია ჯერ კიდევ Internet Explorer 8). თქვენ ალბათ უნდა დაიწყოთ ამით, როცა სწავლობთ.
- DOM დონის 2 მოვლენები (addEventListener() და ა.შ.) უფრო ძლიერია, მაგრამ ასევე შეიძლება გახდეს უფრო რთული და ნაკლებად მხარდაჭერილი (მხარდაჭერილი ჯერ კიდევ Internet Explorer 9-ში). თქვენ ასევე უნდა სცადოთ მათზე და მიზნად ისახოთ მათი გამოყენება, სადაც ეს შესაძლებელია.
მესამე მექანიზმის მთავარი უპირატესობებია ის, რომ საჭიროების შემთხვევაში შეგიძლიათ წაშალოთ მოვლენის დამმუშავებლის კოდი, removeEventListener()-ის გამოყენებით, და საჭიროების შემთხვევაში შეგიძლიათ დაამატოთ იგივე ტიპის მრავალი მსმენელი ელემენტებს. მაგალითად, შეგიძლიათ რამდენჯერმე გამოძახოთ addEventListener("click", function() ( ... )) ელემენტზე, მეორე არგუმენტში მითითებული სხვადასხვა ფუნქციებით. ეს შეუძლებელია მოვლენის დამმუშავებლის თვისებებთან დაკავშირებით, რადგან თვისების დაყენების ნებისმიერი შემდგომი მცდელობა გადაწერს ადრინდელ მცდელობებს, მაგ.:
Element.onclick = ფუნქცია1; ელემენტი.onclick = ფუნქცია2; და ა.შ.
შენიშვნა: თუ მოგიწოდებთ თქვენს მუშაობაში მხარი დაუჭიროთ Internet Explorer 8-ზე უფრო ძველი ბრაუზერებს, შესაძლოა სირთულეები წააწყდეთ, რადგან ასეთი უძველესი ბრაუზერები იყენებენ სხვადასხვა მოვლენის მოდელებს ახალი ბრაუზერებისგან. მაგრამ არასოდეს შეგეშინდეთ, JavaScript ბიბლიოთეკების უმეტესობას (მაგალითად, jQuery) აქვს ჩაშენებული ფუნქციები, რომლებიც აშორებს ბრაუზერის განსხვავებებს. არ ინერვიულოთ ამაზე ზედმეტად თქვენი სასწავლო მოგზაურობის ამ ეტაპზე.
სხვა ღონისძიების კონცეფციებიამ განყოფილებაში ჩვენ მოკლედ განვიხილავთ რამდენიმე მოწინავე კონცეფციას, რომლებიც დაკავშირებულია მოვლენებთან. ამ ეტაპზე არ არის მნიშვნელოვანი ამ ცნებების სრულად გაგება, მაგრამ ისინი შეიძლება ემსახურებოდეს ზოგიერთი კოდის შაბლონის ახსნას, რომელსაც, სავარაუდოდ, დროდადრო შეხვდებით.
ღონისძიების ობიექტებიხანდახან მოვლენის დამმუშავებლის ფუნქციის შიგნით შეიძლება იხილოთ პარამეტრი, რომელიც მითითებულია სახელით, როგორიცაა event , evt ან უბრალოდ e . ამას ეწოდება მოვლენის ობიექტი და ის ავტომატურად გადაეცემა მოვლენის დამმუშავებლებს, რათა უზრუნველყონ დამატებითი ფუნქციები და ინფორმაცია. მაგალითად, მოდით გადავიწეროთ ჩვენი შემთხვევითი ფერის მაგალითი ისევ ოდნავ:
ფუნქცია bgChange(e) ( const rndCol = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")"; e.target.style.backgroundColor = rndCol console.log(e);
აქ ხედავთ, რომ ჩვენ ჩავრთავთ მოვლენის ობიექტს, e , ფუნქციაში და ფუნქციის დაყენებისას ფონის ფერის სტილის e.target-ზე - რაც თავად ღილაკია. მოვლენის ობიექტის სამიზნე თვისება ყოველთვის არის მითითება იმ ელემენტზე, რომელზეც მოვლენა ახლახან მოხდა. ამ მაგალითში ჩვენ ვაყენებთ შემთხვევით ფონის ფერს ღილაკზე და არა გვერდზე.
შენიშვნა: თქვენ შეგიძლიათ გამოიყენოთ ნებისმიერი სახელი, რომელიც მოგწონთ მოვლენის ობიექტისთვის - თქვენ უბრალოდ უნდა აირჩიოთ სახელი, რომელიც შეგიძლიათ გამოიყენოთ მასზე მითითებისთვის მოვლენის დამმუშავებლის ფუნქციის შიგნით. e/evt/event ყველაზე ხშირად გამოიყენება დეველოპერების მიერ, რადგან ისინი მოკლე და ადვილად დასამახსოვრებელია. ყოველთვის კარგია იყო თანმიმდევრული - საკუთარ თავთან და სხვებთან, თუ ეს შესაძლებელია.
e.target წარმოუდგენლად სასარგებლოა, როდესაც გსურთ დააყენოთ ერთი და იგივე მოვლენის დამმუშავებელი რამდენიმე ელემენტზე და გააკეთოთ რაღაც ყველა მათგანს, როდესაც მათზე მოხდება მოვლენა. თქვენ შეიძლება, მაგალითად, გქონდეთ 16 ფილისგან შემდგარი ნაკრები, რომლებიც გაქრება, როდესაც მათ დააწკაპუნებთ. სასარგებლოა ყოველთვის შეგეძლოთ უბრალოდ დააყენოთ ის, რომ გაქრეს როგორც e.target, ვიდრე უნდა აირჩიოთ ის უფრო რთული გზით. შემდეგ მაგალითში (იხილეთ სასარგებლო-eventtarget.html სრული წყაროს კოდისთვის; ასევე იხილეთ აქ პირდაპირ ეთერში), ჩვენ ვქმნით 16 ელემენტს JavaScript-ის გამოყენებით. შემდეგ ჩვენ ვირჩევთ ყველა მათგანს 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 ( სიმაღლე: 100 პიქსელი; სიგანე: 25%; float: მარცხნივ; ) for (მოვუშვათ i = 1; i DIV > P , თითოეულზე დამმუშავებლით:კოდი: FORM
DIV
ბუშტუკები უზრუნველყოფს შიდაზე დაწკაპუნებას
დაურეკავს onclick დამმუშავებელს (ასეთის არსებობის შემთხვევაში) ჯერ რეალურად 
ამიტომ, თუ ზემოთ მოცემულ მაგალითში დააჭირეთ P-ს, მაშინ გაფრთხილება გამოჩნდება თანმიმდევრულად: p → div → ფორმა.
ამ პროცესს ასვლა ეწოდება, რადგან მოვლენები „მიცურავს“ შინაგანი ელემენტიდან ზევით მშობლების გავლით, ისევე როგორც ჰაერის ბუშტი წყალში ცურავს.
მოვლენა.სამიზნეარ აქვს მნიშვნელობა რომელ ელემენტს მივაღწევთ მოვლენას, ყოველთვის შეგვიძლია გავარკვიოთ ზუსტად სად მოხდა იგი.
ყველაზე ღრმა ელემენტს, რომელიც ახორციელებს მოვლენას, ეწოდება "სამიზნე" ან "წყარო" ელემენტი და ხელმისაწვდომია როგორც event.target.
განსხვავებები ამისგან (=event.currentTarget):
- event.target არის ორიგინალური ელემენტი, რომელზეც მოხდა მოვლენა, ის უცვლელი რჩება ბუშტუკების პროცესის დროს.
- ეს არის ამჟამინდელი ელემენტი, რომელსაც ბუშტუკები მიაღწია მასზე ამჟამად მუშაობს.
მაგალითად, თუ არსებობს მხოლოდ ერთი form.onclick დამმუშავებელი, მაშინ ის „დაიჭერს“ ყველა დაწკაპუნებას ფორმის შიგნით. სადაც არ უნდა იყოს დაწკაპუნება შიგნით, ის გამოჩნდება ელემენტზე, რომელზეც იმუშავებს დამმუშავებელი.
ამ შემთხვევაში:
- ეს (=event.currentTarget) ყოველთვის იქნება თავად ფორმა, ვინაიდან დამმუშავებელი მასზე ამოქმედდა.
- event.target შეიცავს ბმულს კონკრეტული ელემენტის ფორმაში, ყველაზე მეტად ჩადგმულ ელემენტზე, რომელზეც მოხდა დაწკაპუნება.
ასევე შესაძლებელია, რომ event.target და ეს იყოს იგივე ელემენტი, მაგალითად, თუ ფორმაში სხვა ტეგები არ არის და დაწკაპუნება მოხდა თავად ელემენტზე.
მოვლენის ბუშტუკების შეჩერებააღმართი პირდაპირ ზევით მიდის. როგორც წესი, მოვლენა ბუშტუკებს აწვება და მაღლა, ელემენტამდე, შემდეგ დოკუმენტირებამდე და ზოგჯერ ფანჯარაშიც კი, დარეკავს ყველა დამმუშავებელს გზაზე.
მაგრამ ნებისმიერ შუალედურ დამმუშავებელს შეუძლია გადაწყვიტოს, რომ მოვლენა სრულად დამუშავდა და შეწყვიტოს ბუშტუკები.
გავრცელების შესაჩერებლად, თქვენ უნდა გამოძახოთ event.stopPropagation() მეთოდი.
მაგალითად, აქ, როდესაც დააჭირეთ ღილაკს body.onclick დამმუშავებელი არ იმუშავებს:
კოდი:
დააწკაპუნეთ მე
თუ ელემენტს აქვს რამდენიმე დამმუშავებელი ერთი მოვლენისთვის, მაშინაც კი, თუ ბუშტუკები შეჩერდება, ყველა მათგანი შესრულდება.
ანუ stopPropagation ხელს უშლის მოვლენის წინსვლას, მაგრამ ყველა დამმუშავებელი იმუშავებს მიმდინარე ელემენტზე.
დამუშავების სრულად შესაჩერებლად, თანამედროვე ბრაუზერებიღონისძიება.stopImmediatePropagation() მეთოდის მხარდაჭერა. ის არა მხოლოდ ხელს უშლის ბუშტუკებს, არამედ აჩერებს მოვლენის დამუშავებას მიმდინარე ელემენტზე.
განსხვავებები IE8-ნავიგაციის გასაადვილებლად, მე შევკრიბე IE8- განსხვავებები, რომლებიც დაკავშირებულია ზედაპირის ერთ განყოფილებაში.
მათი ცოდნა დაგჭირდებათ, თუ გადაწყვეტთ სუფთა JS-ში წერას, ჩარჩოების გარეშე და გჭირდებათ IE8-ის მხარდაჭერა.
არ არის event.currentTarget თვისება
გთხოვთ გაითვალისწინოთ, რომ დამმუშავებლის მინიჭებისას on თვისების საშუალებით გვაქვს ეს, ასე რომ event.currentTarget, როგორც წესი, არ არის საჭირო, მაგრამ attachEvent-ის მეშვეობით მინიჭებისას დამმუშავებელი არ იღებს ამას, ამიტომ მიმდინარე ელემენტი, საჭიროების შემთხვევაში, აღება შესაძლებელია მხოლოდ დახურვისგან.
IE8-ში event.target-ის ნაცვლად გამოიყენება event.srcElement
თუ ჩვენ ვწერთ დამმუშავებელს, რომელიც მხარს დაუჭერს როგორც IE8, ასევე თანამედროვე ბრაუზერებს, მაშინ შეგვიძლია დავიწყოთ ასე:
კოდი: elem.onclick = ფუნქცია(მოვლენა) (
მოვლენა = მოვლენა || ფანჯარა.ღონისძიება;
var სამიზნე = მოვლენა.სამიზნე || მოვლენა.srcElement;
// ...ახლა გვაქვს მოვლენის ობიექტი და მიზანი
...
}
აღმართის შესაჩერებლად გამოიყენეთ კოდი event.cancelBubble=true
თქვენ შეგიძლიათ შეაჩეროთ ბრაუზერის ბუშტუკები ასე:
კოდი: event.stop გავრცელება ? event.stopPropagation() : (event.cancelBubble=true);
სულ- როდესაც მოვლენა ხდება, ელემენტი, რომელზეც ის მოხდა, აღინიშნება, როგორც "სამიზნე" (event.target).
- შემდეგი, ღონისძიება ჯერ გადადის დოკუმენტის root-დან event.target-ზე, გზადაგზა დარეკავს კურატორებს, რომლებიც მოწოდებულია addEventListener-ის (...., true) მეშვეობით.
- შემდეგი, ღონისძიება გადადის event.target-დან დოკუმენტის ძირამდე, გზადაგზა გამოიძახებს დამმუშავებლებს, რომლებიც მოწოდებულია on* და addEventListener (...., false) მეშვეობით.
- event.target არის ყველაზე ღრმა ელემენტი, რომელზეც მოხდა მოვლენა.
- მოვლენა.currentTarget (=ეს) – ელემენტი, რომელზეც მომენტშიდამმუშავებელი (რომელსაც მიაღწია მოვლენამ) ამოქმედდა.
- event.eventPhase – რომელ ფაზაში გამოიწვია ის (ჩაყვინთვის = 1, ასვლა = 3).
ენის ერთ-ერთი მნიშვნელოვანი მახასიათებელია მოვლენის ჩარევა. თუ ვინმე დააჭერს ღილაკს, მაგალითად, გამოიძახება onClick მოვლენის დამმუშავებელი, რომელიც შეესაბამება ამ ღილაკს. მოვლენის დამუშავებით, შეგიძლიათ უზრუნველყოთ, რომ თქვენი ფანჯრის, დოკუმენტის ან ფენის შესაბამისი ობიექტი წყვეტს და ამუშავებს მოვლენას მანამ, სანამ ღონისძიების დამმუშავებელი გამოიძახება ამ მიზნით მითითებული ღილაკის ობიექტის მიერ. ანალოგიურად, თქვენს ფანჯარას, დოკუმენტს ან ფენის ობიექტს შეუძლია მოვლენის სიგნალის დამუშავება, სანამ ის ნორმალურ დანიშნულებამდე მიაღწევს.
იმის გასაგებად, თუ რისთვის შეიძლება ეს სასარგებლო იყოს, მოდით შევხედოთ შემდეგ მაგალითს:
window.onclick=handle;
ფუნქციის სახელური (ე) (
alert ("ფანჯრის ობიექტი წყვეტს ამ მოვლენას!");
დაბრუნება true; // ე.ი. მიჰყევით ბმულს
}
დააწკაპუნეთ ამ ბმულზე
როგორც ხედავთ, ჩვენ არ ვაკონკრეტებთ მოვლენის დამმუშავებლებს ტეგში . სამაგიეროდ ვწერთ
window.captureEvents(Event.CLICK);
მოვლენის ჩაჭრის მიზნით დააწკაპუნეთფანჯრის ობიექტი. ჩვეულებრივ, ფანჯრის ობიექტი არ მუშაობს მოვლენასთან დააწკაპუნეთ. თუმცა, მას შემდეგ რაც ჩავუღრმავდით მას, ჩვენ გადავიყვანთ ფანჯრის ობიექტზე. გაითვალისწინეთ, რომ ში ღონისძიება.CLICKფრაგმენტი დააწკაპუნეთუნდა დაიწეროს დიდი ასოებით. თუ გსურთ რამდენიმე მოვლენის ჩაჭრა, მაშინ ისინი ერთმანეთისგან უნდა გამოყოთ სიმბოლოებით. მაგალითად:
window.captureEvents(Event.CLICK | Event.MOVE);
ამას გარდა ფუნქციაში სახელური (), რომელიც ჩვენ მივენიჭეთ მოვლენის დამმუშავებლის როლს, ვიყენებთ ინსტრუქციას დაბრუნება true;. ეს რეალურად ნიშნავს, რომ ბრაუზერმა თავად უნდა დაამუშაოს ბმული ფუნქციის დასრულების შემდეგ. სახელური (). თუ მის მაგივრად დაწერ დაბრუნება false;, მაშინ ეს ყველაფერი დასრულდება.
თუ ახლა ტეგში თქვენ მიუთითებთ მოვლენის დამმუშავებელს onClick, მიხვდებით, რომ ეს პროგრამა აღარ იქნება გამოძახებული, როდესაც ეს მოვლენა მოხდება. ეს გასაკვირი არ არის, რადგან ფანჯრის ობიექტი წყვეტს მოვლენის სიგნალს, სანამ ის მიაღწევს ლინკ ობიექტს. თუ განსაზღვრავთ ფუნქციას სახელური ()როგორ
ფუნქციის სახელური (ე) (
alert ("ფანჯრის ობიექტმა დააფიქსირა ეს მოვლენა!");
window.routeEvent(e);
დაბრუნება true;
}
შემდეგ კომპიუტერი შეამოწმებს, განსაზღვრულია თუ არა სხვა მოვლენის დამმუშავებლები ამ ობიექტისთვის. ცვლადი e არის ჩვენი Event ობიექტი, რომელიც გადაეცემა მოვლენის ფუნქციას, როგორც არგუმენტი.
გარდა ამისა, თქვენ შეგიძლიათ პირდაპირ გაგზავნოთ მოვლენის სიგნალი ობიექტზე. ამისათვის შეგიძლიათ გამოიყენოთ მეთოდი handleEvent (). ეს ასე გამოიყურება:
window.captureEvents(Event.CLICK);
window.onclick=handle;
ფუნქციის სახელური (ე) (
document.links.handleEvent(e);
}
"დააწკაპუნეთ" ამ ბმულზე
მეორე ლინკი
ყველა Click ღონისძიების სიგნალი იგზავნება მეორე ბმულზე დასამუშავებლად - მაშინაც კი, თუ თქვენ საერთოდ არ დააწკაპუნეთ რომელიმე ბმულზე!
შემდეგი სკრიპტი აჩვენებს, თუ როგორ შეუძლია თქვენს სკრიპტს უპასუხოს კლავიშების დაჭერის სიგნალებს. დააჭირეთ ნებისმიერ ღილაკს და ნახეთ, როგორ მუშაობს ეს სკრიპტი.
window.captureEvents(Event.KEYPRESS);
window.onkeypress= დაჭერილია;
ფუნქცია დაჭერილია (e) (
alert("გასაღები დაჭერილია! ASCII-მნიშვნელობა: " + e.which);
}
ეს ყველაფერი 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");
});
}
კარგად გამოიყურება... მაგრამ არ გამოდგება. ყოველ შემთხვევაში არა ისე, როგორც ჩვენ ველოდებით.
დანარჩენს, მოკლედ აგიხსნით - დამმუშავებლის ფუნქცია ჩაკეტილია ღილაკის ცვლადზე. თუმცა, ეს არის ერთი ცვლადი და გადაწერილია ყოველი გამეორებით.
პირველ გამეორებაში, ცვლადი ეხება პირველ ღილაკს. შემდეგში - მეორემდე და ა.შ. მაგრამ, როდესაც მომხმარებელი დააჭერს ღილაკს, მარყუჟი უკვე დასრულდა და ღილაკის ცვლადი მიუთითებს ბოლო ღილაკზე, რომელიც ყოველთვის იძახებს ამისთვის მოვლენის დამმუშავებელს. განუკითხაობა.
ჩვენ გვჭირდება ცალკე კონტექსტი თითოეული ფუნქციისთვის:
Var ღილაკები = document.querySelectorAll(". Toolbar button"); var createToolbarButtonHandler = ფუნქცია(ღილაკი) ( დაბრუნების ფუნქცია() (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 ობიექტი შეიცავს გარკვეულ მონაცემებს მოვლენის შესახებ. ჩვენს შემთხვევაში, ჩვენ გვაინტერესებს currentTarget ველი. მისგან მივიღებთ ბმულს ელემენტზე, რომელზეც დააწკაპუნეთ:
Var toolbarButtonHandler = ფუნქცია(ე) ( 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 შაბლონი:
- ღილაკი A
- ღილაკი B
- ღილაკი C
როდესაც მომხმარებელი დააჭერს ღილაკს A, ღონისძიება ასე მოძრაობს:
დაწყება
| #დოკუმენტი
| ჩარევის ფაზა
| HTML
| სხეული
| UL
| LI#li_1
| ღილაკი A< - Событие возникает для целевого элемента
| ასვლის ფაზა
| LI#li_1
| UL
| სხეული
| HTML
v #დოკუმენტი
გაითვალისწინეთ, რომ ჩვენ შეგვიძლია მივაკვლიოთ გზას, რომელსაც მოვლენა გადის სამიზნე ელემენტის მისაღწევად. ჩვენს შემთხვევაში, თითოეული დაჭერილი ღილაკისთვის, შეგვიძლია დარწმუნებული ვიყოთ, რომ ღონისძიება ბუშტებს დაუბრუნდება და გაივლის მის მშობელს - ul ელემენტს. ჩვენ შეგვიძლია გამოვიყენოთ ეს და განვახორციელოთ ამომხტარი მოვლენები.
Bubble Events ბუშტის მოვლენები არის ის მოვლენები, რომლებიც მიმაგრებულია მშობელ ელემენტზე, მაგრამ შესრულებულია მხოლოდ იმ შემთხვევაში, თუ ისინი აკმაყოფილებენ გარკვეულ პირობას.ავიღოთ ჩვენი ხელსაწყოების პანელი, როგორც კონკრეტული მაგალითი:
Ul class="toolbar">
ახლა, როცა ვიცით, რომ ღილაკზე ნებისმიერი დაწკაპუნება გამოჩნდება ul.toolbar ელემენტის მეშვეობით, მოდით დავურთოთ მას ჩვენი ღონისძიების დამმუშავებელი. საბედნიეროდ, ჩვენ უკვე გვაქვს:
Var toolbar = document.querySelector(".toolbar"); toolbar.addEventListener("click", ფუნქცია(e) ( var button = e.target; if(!button.classList.contains("active")) button.classList.add("active"); else button.classList. ამოღება ("აქტიური"));
ჩვენ ახლა გაცილებით სუფთა კოდი გვაქვს და მარყუჟებიც კი მოვიშორეთ! თუმცა გაითვალისწინეთ, რომ ჩვენ e.currentTarget შევცვალეთ e.target-ით. მიზეზი იმაში მდგომარეობს, რომ ჩვენ მოვლენებს განსხვავებულ დონეზე ვამუშავებთ.
e.target არის ღონისძიების რეალური სამიზნე, სადაც ის თავის გზას ადგას DOM-ში და საიდანაც ბუშტუკდება.
e.currentTarget - მიმდინარე ელემენტი, რომელიც მართავს მოვლენას. ჩვენს შემთხვევაში, ეს არის ul.toolbar.
უი! ახლა, როდესაც ვაწკაპუნებთ li.separator-ზე ან ხატულაზე, მას ვამატებთ .active კლასს. სულ მცირე, ეს არ არის კარგი. ჩვენ გვჭირდება გზა, რათა გავფილტროთ მოვლენები ისე, რომ ჩვენ ვუპასუხოთ საჭირო ელემენტს.
მოდით შევქმნათ მცირე დამხმარე ფუნქცია ამისათვის:
Var delegate = ფუნქცია(კრიტერიუმი, მსმენელი) ( return function(e) ( var el = e.target; do ( if (!criteria(el)) გაგრძელება; e.delegateTarget = el; listener.apply(this, არგუმენტები); return; ) while((el = el.parentNode));
ჩვენი თანაშემწე აკეთებს ორ რამეს. პირველ რიგში, ის გაიმეორებს თითოეულ ელემენტს და მის მშობლებს და შეამოწმებს, აკმაყოფილებენ თუ არა ისინი კრიტერიუმების პარამეტრში მიღებულ პირობას. თუ ელემენტი აკმაყოფილებს, დამხმარე ამატებს ველს მოვლენის ობიექტს, სახელწოდებით delegateTarget, რომელიც ინახავს ელემენტს, რომელიც აკმაყოფილებს ჩვენს პირობებს. და შემდეგ ურეკავს დამრიგებელს. შესაბამისად, თუ არცერთი ელემენტი არ აკმაყოფილებს პირობას, არც ერთი დამმუშავებელი არ იქნება გამოძახებული.
ჩვენ შეგვიძლია გამოვიყენოთ ასე:
Var toolbar = document.querySelector(.toolbar"); var buttonsFilter = ფუნქცია(elem) ( return elem.classList && elem.classList.contains("btn"); ); var buttonHandler = ფუნქცია(ე) ( var button = e.delegateTarget; if(!button.classList.contains("აქტიური")) button.classList.add("აქტიური"); else button.classList.remove("აქტიური" ); toolbar.addEventListener("click", delegate(buttonsFilter, buttonHandler));
ზუსტად ის, რაც ექიმმა უბრძანა: ერთი მოვლენის დამმუშავებელი მიმაგრებულია ერთ ელემენტზე, რომელიც ასრულებს ყველა სამუშაოს. მაგრამ ის ამას აკეთებს მხოლოდ იმ ელემენტებისთვის, რომლებიც ჩვენ გვჭირდება. და ის მშვენივრად რეაგირებს DOM-დან ობიექტების დამატებასა და ამოღებაზე.
თუ მსურს ამისგან ბიბლიოთეკის შექმნა ან კოდის გამოყენება განვითარებაში, დავამატებდი რამდენიმე რამეს:
დამხმარე ფუნქცია შესამოწმებლად, აკმაყოფილებს თუ არა ობიექტი კრიტერიუმებს უფრო ერთიანი და ფუნქციონალური ფორმით. მოსწონს:
Var კრიტერიუმები = ( isElement: ფუნქცია(e) ( return e instanceof HTMLElement; ), hasClass: function(cls) ( return function(e) ( return kriter.isElement(e) && e.classList.contains(cls); ) ) //მეტი კრიტერიუმი);
ასევე სასარგებლო იქნება ასისტენტის ნაწილობრივი გამოყენება:
Var partialDelgate = ფუნქცია(კრიტერიუმი) ( return function( handler) ( return delgate (კრიტერიუმები, დამმუშავებელი); ) );
ორიგინალური სტატია: დელეგირებული JavaScript მოვლენების გაგება
(მთარგმნელისგან: ჩემი პირველი, მკაცრად განსაჯეთ.)
ბედნიერი კოდირება!
ამ გაკვეთილზე ჩვენ გავეცნობით მოვლენის ბუშტუკების კონცეფციას და ასევე შევხედავთ, თუ როგორ შეიძლება მისი შეწყვეტა. გარდა ამისა, ჩვენ გავარკვევთ, რა სხვა ეტაპებს (ფაზებს) გადის მოვლენა, სანამ არ დაიწყებს გაჩენას.
ღონისძიების ბუშტითუ მოვლენა ხდება რომელიმე ელემენტისთვის, ის იწყებს „ამოღებას“, ე.ი. ხდება მშობელში, შემდეგ ბებიაში და ა.შ.
აქედან გამომდინარეობს, რომ ზოგიერთი ელემენტის მიერ წარმოქმნილი მოვლენის ჩაჭრა შესაძლებელია მისი მშობლის, ბებია-ბაბუის და ა.შ. დამმუშავებლის გამოყენებით.
ჩვენ ვაჩვენებთ მოვლენის (ბუშტის) გაჩენას შემდეგი მაგალითის გამოყენებით:
სათაური
რამდენიმე ძალიან მნიშვნელოვანი ტექსტი
თავირაღაც ტექსტი
დანარჩენი ტექსტი
დავწეროთ პატარა სკრიპტი, რომლითაც დავამატებთ „დაწკაპუნების“ ღონისძიების დამმუშავებელს გვერდის ყველა ელემენტისთვის, ასევე დოკუმენტისა და ფანჯრის ობიექტებისთვის.
document.addEventListener("DOMContentLoaded", ფუნქცია() ( var allElements = document.getElementsByTagName("*"); for (var i=0; i< allElements.length; i++) { allElements[i].addEventListener("click",function() {console.log(this.tagName);},false); }; document.addEventListener("click",function() {console.log(this);},false); window.addEventListener("click",function() {console.log(this);},false); });
მოდით შევქმნათ HTML გვერდი და ჩავსვათ მასში ზემოაღნიშნული HTML კოდი. სკრიპტი დაწერილი JavaScript, ჩასვით სხეულის დახურვის ტეგამდე. ამის შემდეგ გახსენით ახლად შექმნილი გვერდი ვებ ბრაუზერში, დააჭირეთ F12 ღილაკს და გადადით კონსოლზე. ახლა მოდით დავაწკაპუნოთ მაუსის მარცხენა ღილაკით ძლიერი ელემენტის კუთვნილ არეზე და ვნახოთ, როგორ გამოჩნდება მოვლენა.
მოვლენის (ბუშტის) აწევა შეიძლება შეწყდეს. ამ შემთხვევაში, ეს მოვლენა არ გააქტიურდება უფრო მაღალი (მშობელი) ელემენტებისთვის. მეთოდს, რომელიც შექმნილია მოვლენის (ბუშტის) გავრცელების შესაჩერებლად, ეწოდება stopPropagation().
მაგალითად, მოდით შევცვალოთ ჩვენი ზემოთ მოყვანილი მაგალითი ისე, რომ მოვლენა არ იყოს ბუშტუკოვანი ტანის ზემოთ: document.addEventListener("DOMContentLoaded", function() ( var allElements = document.getElementsByTagName("*"); for (var i=0 ი
ეჭვგარეშეა, ზედაპირი ძალიან მოსახერხებელი და არქიტექტურულად გამჭვირვალეა. არ შეაჩეროთ ის, თუ აბსოლუტურად აუცილებელი არ არის.
იმ ელემენტის მიღება, რომელმაც გამოიძახა დამმუშავებელიიმისათვის, რომ მიიღოთ DOM ელემენტი (ობიექტი), რომელმაც გამოიძახა მოვლენის დამმუშავებელი, თქვენ უნდა გამოიყენოთ ეს საკვანძო სიტყვა. ეს საკვანძო სიტყვა (ეს) ხელმისაწვდომია მხოლოდ დამმუშავებელში, თუ თქვენ გამოიწერთ ღონისძიებას JavaScript-ის გამოყენებით.
მაგალითად, კონსოლში გამოვაჩინოთ ელემენტის ID, რომელმაც გამოიძახა მოვლენის დამმუშავებელი:
Var myP = document.getElementById("myP"); myP.addEventListener("click",function())( //მიიღე DOM ელემენტი, რომელმაც გამოიძახა მოვლენის დამმუშავებელი - ეს //მიიღე მისი id და გამოიტანე კონსოლის კონსოლში.log(this.id); ));
თქვენ ასევე შეგიძლიათ გამოიყენოთ currentTarget თვისება (event.currentTarget) მიმდინარე ელემენტის მისაღებად.
მოვლენის ეტაპები (ფაზები).სანამ მოვლენა დაიწყებს გაჩენას (აღმართის ეტაპი), ის ჯერ კიდევ 2 ეტაპს გადის:
- ეტაპი 1 არის მოვლენის გამომწვევი ელემენტის ჩაძირვის ეტაპი. იმათ. ამ ეტაპზე ხდება მოძრაობა ზემოდან ქვევით, ე.ი. ფანჯრის ობიექტიდან ელემენტამდე. ასევე ამ ეტაპზეასევე მოუწოდა ჩარევის ეტაპი.
- 2 ეტაპი არის მიზნის მიღწევის ეტაპი, ე.ი. ელემენტი (ობიექტი), რომელმაც შექმნა მოვლენა.
ყველა იმ ეტაპის გათვალისწინებით, რომელსაც გადის მოვლენა, ჩნდება შემდეგი სურათი:
მოდით შევცვალოთ ზემოთ მოყვანილი მაგალითის სკრიპტი შემდეგნაირად:
Document.addEventListener("DOMContentLoaded", function() ( var allElements = document.getElementsByTagName("*"); for (var i=0; i
addEventListener და removeEventListener მეთოდების მესამე პარამეტრი განსაზღვრავს იმ ეტაპს, რომელშიც მოხდება მოვლენის დაჭერა. თუ ეს პარამეტრი ჭეშმარიტია, მაშინ მოვლენის ჩაჭრა მოხდება მოვლენის ჩაძირვის (ჩაჭრის) ეტაპზე. და თუ პარამეტრი მცდარია, მაშინ მოვლენა ჩაიშლება ბუშტუკების ეტაპზე. თავად სამიზნეზე მოვლენის დასამუშავებლად, შეგიძლიათ გამოიყენოთ addEventListener მეთოდი ან false ან true მნიშვნელობით.
ყურადღება: ჩაძირვის (ჩაჭრის) სტადიის დროს, მოვლენების აღკვეთა შესაძლებელია მხოლოდ addEventListener() მეთოდის გამოყენებით დამატებული დამმუშავებლების მიერ. სხვა მეთოდებით დამატებულ დამმუშავებლებს (HTML ატრიბუტი ან JavaScript-ის მეშვეობით on[event] თვისება) შეუძლიათ მოვლენის ჩაჭრა მხოლოდ ბუშტუკების ეტაპზე.
მოვლენის გამომწვევი ელემენტის მიღებაიმისათვის, რომ მივიღოთ სამიზნე ელემენტი, ე.ი. ელემენტმა, რომელმაც შექმნა მოვლენა, უნდა გამოიყენოს სამიზნე თვისება (event.target).
განვიხილოთ ზემოთ მოყვანილი მაგალითი, რომელშიც ჩვენ ვცვლით სკრიპტის ელემენტის შინაარსს შემდეგში:
Document.addEventListener("DOMContentLoaded", function() ( var elementBody = document.body; elementBody.addEventListener("click",function())( console.log(this.tagName + " - ელემენტი, რომელმაც გამოიძახა დამმუშავებელი") კონსოლი .log(event.currentTarget.tagName + " - ელემენტი, რომელმაც გამოიძახა დამმუშავებელი";
მოდით ვაჩვენოთ ჩვენი მაგალითი მარცხნივ დაწკაპუნებით იმ არეალზე, რომელიც მიეკუთვნება ძლიერი ელემენტს:
