«
»

დინამიური ივენთ ჰენდლერები

Mar 18 2007

ჩემდა სამარცხვნოთ მინდა ვაღიარო რომ ვერაფერი მოვუფიქრე ამ პოსტის სათაურს და პირდაპირ დავწერე “ივენთ ჰენდლერები” თუმცა თუ ალტერნატივას შემომთავაზებთ გადავარქმევ სახელს :)

რაც შეეხება თავად პრობლემას(თუმცა პრობლემა ცალსახად მხოლოდ Internet Explorer – ში გვხვდება) მის წინაშე დღეს ჩემი მეგობარი აღმოჩნდა(რომელიც არ არის JavaScript დეველოპერი) და მკითხა თუ ვიცოდი რაიმე ამის შესახებ… საბედნიეროდ თავის დროზე საკმაოდ მაწვალა იგივე საკითხმა და პასუხი მქონდა, იმედია სხვა კოლეგებსაც გამოადგებათ ეს რეცეპტი…

დინამიური ევენთ ჰენდლერის დამატება ელემენტისთვის თავისთავად არ წარმოადგენს პრობლემას, ვისაც კი ოდესმე დაუწერია რაიმე სულ პატარა JavaScript კოდი თავისთავად შეხებაც ექნებოდა ელემენტების შემდეგ ატრიბუტებთან: onclick, onmousedown, onchange და ა.შ. თუმცა როდესაც დოკუმენტის რომელიმე ელემენტი ან ელემენტები გენერირდება JavaScript DOM ფუნქციების გამოყენებით კლიენტის მხარეს, ხოლო ისეთ შემთხვევაში როდესაც საჭიროა რომელიმე ჩამოთვლილი ატრიბუტის გამოყენება, პირველ რიგში რაც შეიძლება მოგვივიდეს თავში აზრად ეს არის ელემენტის setAttribute მეთოდი რომლის მეშვეობითაც ხორციელდება ელემენტის ატრიბუტებისა და მათი მნიშვნელობების განსაზღვრა.

მაგალითისათვის განვიხილოთ შემდეგი JavaScript კოდი:

1
2
3
4
5
6
window.onload = function() {
  var div = document.createElement('div');  //create new div element
  div.appendChild(document.createTextNode('This is div element')); //append text node
  div.setAttribute('onclick', 'alert("test")'); //set event handler
  document.body.appendChild(div); //add new div element to document
}

ამ კოდში ვქმინით ახალ div ელემენტს, რომელსაც შიგნით ვამატებთ ახალ ტექსტურ ელემენტს, ვანიჭებთ onclick ატრიბუტის მნიშვნელობით alert(“test”) და ვამატებთ ახლად შექმნილ ელემენტს დოკუმენტში. ყველაფერი სწორია, ამ კოდის შესრულების შემდეგ დოკუმენტში ახლად გამოჩენილ div ელემენტზე ისრის დაწკაპუნების შემთხვევაში უნდა დავინახოთ შეტყობინება რომელიც დაწერს “test” – ს… თუმცა ეს კოდი მუშაობს ყველა ბროუზერში გარდა Internet Explorer – ისა.

თუმცა საბედნიეროდ ამ მდგომარეობიდან არსებობს მარტივი გამოსავალი რომელიც აბსოლუტურად ერთნაირად მუშაობს ყველა ბროუზერში. ამისათვის თავისუფლად შეგვიძლია გამოვიყენოთ ანონიმური ფუნქცია როგორც ნაჩვენებია შემდეგ კოდში:

1
2
3
4
5
6
7
8
9
window.onload = function() {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode('This is div element'));
  //div.setAttribute('onclick', 'alert("test")');
  div.onclick = function() {
    alert('test');
  }
  document.body.appendChild(div);
}

როგორც მაგალითიდან ჩანს ამ პრობლემის გადასაჭრელად უბრალოდ გავაკომენტარეთ პირველ მაგალითში გამოყენებული მეთოდი და მის ნაცვლად გამოვიყენეთ ანონიმური ფუნქცია.

onload და onunload მოვლენების და ასევე ანონიმური ფუნქციების შესახებ უფრო მეტი დეტალებისათვის შეგიძლიათ წაიკითხოთ შესაბამის პოსტებში.

ტეგები: ,

4 Responses to “დინამიური ივენთ ჰენდლერები”

  1. levani says:
    March 28, 2007 at 8:38 am

    სოსო, მე ცოტა სხვანაირად ვიცოდი , და არასოდეს მიფიქრია setAttribute ის მეშვეობით გამეკეთებინა .
    მე IE ისთვის ვიყენებ object.attachEvent(eventString, funcPointer)

    და FireFox ისთვის : addEventListener

    ნაღ ად არ ვიცოდი setAttribute(‘onclick’, ‘alert(“test”)’); ასეც თუ შეიძლებოდა.

  2. იოსები says:
    March 28, 2007 at 10:38 pm

    კი შეიძლება setAttribute – ს გამოყენება და ყველგან მუშაობს IE – ს გარდა… attachEvent და addEventListener არ არის გამოსავალი, ან სადმე ცალკე უნდა გვქონდეს რამე უტილიტები რომლებიც მაგ სხვაობას დაფარავს, ან კიდევ როდესაც დაგვჭირდება კოდში უნდა ვწეროთ if(object.attachEvent) { bla bla…} და ასე შემდეგ, მაგრამ ანონიმური ფუნქციით ეგ პრობლემები გვერდზე რჩება და ყველა ბროუზერში ერთნაირად მუშაობს კოდი…

  3. Giorgi says:
    April 1, 2007 at 5:33 pm

    ბოლომდე ვერ დავწვი რაზე საუბრობთ, მაგრამ ავადსახსენებელ FrontPage ს აქვს ჩაშენებული მსგავსი რამ:

    1
     
    1
     
  4. Giorgi says:
    April 1, 2007 at 5:35 pm

    წინა კომენტი კოდად გარდაქმნა… მეგონა სინტაქს შეაფერადებდა და დაპოსტავდა… აი მაშინ ასე:

     

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"