ძირითადი მასალა
კომპიუტერული პროგრამირება
კურსი: კომპიუტერული პროგრამირება > თემა 6
გაკვეთილი 5: DOM მოვლენები- ინტერაქტიული ვებგვერდების გაკეთება მოვლენებით
- მოვლენის მსმენელის დამატება
- გამოწვევა: დააკლიკე კატას
- DOM მოვლენების ტიპები
- მოვლენების თვისებების გამოყენება
- გამოწვევა: მიახატე კატას ულვაში
- ფორმებისა და მოვლენების დამუშავება
- გამოწვევა: Mad Libs
- მოვლენების საწყისი ქცევის თავიდან არიდება
- შეჯამება: DOM მოვლენები
© 2023 Khan Academyგამოყენების პირობებიკონფიდენციალურობის პოლიტიკაშენიშვნა ქუქი-ჩანაწერებზე
შეჯამება: DOM მოვლენები
მოვლენათა მსმენელების დამატება
იმისათვის, რომ დარწმუნდეთ, რომ ბრაუზერი იძახებს კონკრეტულ ფუნქციას ელემენტზე მოვლენის შესრულებისას, უნდა გამოიყენოთ
document.addEventListener
:var buttonEl = document.getElementById("clicker");
var onButtonClick = function() {
console.log("ვაი დედა, თქვენ დამაწკაპუნეთ");
};
buttonEl.addEventListener("click", onButtonClick);
პირველ არგუმენტად შეგიძლიათ მრავალი ვალიდური სტრინგის გადაცემა. გადახედეთ მოვლენათა ტიპების სტატიას.
თუ გსურთ, მიიღოთ ინფორმაცია იმ მოვლენაზე, რომელიც უკვე მოხდა, შეგიძლიათ, შეხედოთ მოვლენის ობიექტს, რომელსაც ბრაუზერი გადასცემს თქვენს უკუგამოძახების ფუნქციას:
var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("თქვენ დააწკაპუნეთ " + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
მოვლენის ობიექტს მრავალი თვისება აქვს. სრული სიის ნახვა შეგიძლიათ აქ.
თუ გსურთ ბმულზე ან ფორმის გადაგზავნის ღილაკზე დაწკაპუნების ფუნქციონალის გადატვირთვა, თქვენ შეიძლება, მოისურვოთ
event.preventDefault()
-ის გამოძახება, რათა გამორიცხოთ ბრაუზერის საწყისი ქცევა.მოვლენათა მსმენელების წაშლა
თუ რომელიმე კონკრეტული მოვლენათა მსმენელი აღარ გჭირდებათ, შეგიძლიათ, წაშალოთ ის
removeEventListener
-ის გამოყენებით:var faceEl = document.getElementById("face");
var onFaceClick = function(e) {
console.log("თქვენ დააწკაპუნეთ" + e.clientX + " , " + e.clientY);
};
faceEl.addEventListener("click", onFaceClick);
// მოგვიანებით...
faceEl.removeEventListener("click", onFaceClick);
გსურთ, შეუერთდეთ დისკუსიას?
პოსტები ჯერ არ არის.