ძირითადი მასალა

კომპიუტერული პროგრამირება

კურსი: კომპიუტერული პროგრამირება > თემა 6

გაკვეთილი 5: DOM მოვლენები

შეჯამება: 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);

გსურთ, შეუერთდეთ დისკუსიას?

შესვლა

დავალაგოთ:

პოსტები ჯერ არ არის.

გესმით ინგლისური? დააწკაპუნეთ აქ და გაეცანით განხილვას ხანის აკადემიის ინგლისურენოვან გვერდზე.