איבנטים ב js ובעיות

איבנטים ב javascript ובעיות

אני אנסה לעבור במאמר הזה על איבנטים מהבסיס להסביר בעיות שנוצרות להראות את השינויי ב jQuery .

אז קודם מזה איבנט? Event

הפירוש של איבנט זה אירוע, כשקורה משהו בזמן ריצה כמו הקלקה או הזזת סמן, לחיצה על המקלדת ועוד.. אפשר לראות את הרשימה המלאה של האיבנטים כאן ישנם גם איבנטים שנוספו ב HTML5

איבנטים ב js

נתחיל עם אבנטים ב javascript

ישנם 3 דרכים להאזין לאירוע ב js

אפשרות 1:

el.addEventListener("click", someFunction, false);

כאן אנחנו מאזינים לאירוע הקלקה click על אובייקט שעליו מצביע el וכאשר האירוע קורה אנחנו מפעילים פונקציה בשם someFunction

דוגמא לשימוש:

function someFunction() {
  alert(1);
}

var el = document.getElementById("someID");
el.addEventListener("click", someFunction, false);

אפשרות 2:

להכניס לתוך ה html את האירוע בצורה כזו.

<button onclick="someFunction()">Click me</button>

כאשר לוחצים על הכפתור מופעלת הפונקציה someFunction שרשומה בקובץ js או תחת תגי script וכמובן שאפשר להכניס בתוך כל תגית

אפשרות 3:

מזכיר את האפשרות הראשונה רק הסינטקס קצת שונה

document.getElementById("myBtn").onclick = function() {myFunction()};

 

איבנטים ב jQuery

ב jQuery ניסו לעשות סדר באיבנטים שהסינטקס יהיה יותר קל וגם שיפרו דברים כאלה ואחרים כגון אובייקטים שנוצרים בזמן ריצה אז נוצרת בעיה שאי אפשר להצמיד להם אירוע על זה נדבר בהמשך….

 

גם פה יש כמה אפשרויות

אפשר לקרא רשימה מלאה ולהעמיק עוד קצת בלינק פה

אפשרות 1:

$( "#obj_id" ).bind( "click", function(event) {
  alert( "click'" );
 }

רושמים ב bind  כל פעם את האיבנט הרצויי וניתן גם לכתוב כמה סוגים של אירוע

$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});

עוד מעט נתייחס ל event שבתוך הפונקציה בפתרון בעית הבעבוע

אפשרות 2:

מזכירה את אפשרות 3 רושמים ישר את האיבנט ( פחות מומלץ להשתמש עדיף להתרגל לאפשרות 3).

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

אפשרות 3:

$( "#id" ).on( "click", function() {
  console.log( "clicked" );
});

האפשרות הזאת מיוחדת ל jquery היא פותרת כמה בעיות שנסביר בהמשך במידה ויוצרים אובייקטים בריצה.

 

בעיות באיבנטים:

בעיה 1 טעית JS לפני טעינת הדף:

רצוי לעטוף את האיבנטים ב jquery ב :

$( document ).ready(function() {
 
  // הקוד של האיבנט שלכם 

}

או במקביל שלו ב javascript

window.onload = init;

יוצרים פונקציה init 
שבה קוראים לכל האיבנטים

 

הקוד הנ"ל גורם לכך שרק אחרי שהעמוד נטען אז אנחנו מפעילים את החלק הזה של ה js שבתוך הפונקציה, אחרת אנחנו עלולים לא להצליח להפעיל את האיבנט כי האובייקט שהאיבנט מתייחס אליו עדיין לא נטען, והוא לא מכיר אותו.

יש כאלה ששמים את קוד ה js בסוף הדף.

בעיה 2 בעבוע bubbel :

 

זאת בעיה שנתקלתי בה בעבר ואת הפתרון מצאתי באתר הזה: אינטרנט ישראל  שאגב אתר מאוד מומלץ למפתחים.

הבעיה מתרחשת כאשר יש לנו 2 אלמנטים אחד בתוך השני ואנו רוצים לעשות לשניהם איבנט של לחיצה, אם נלחץ על האלמנט שבחוץ אז אחלה רק הוא ילחץ, ואם נלחץ על האלמנט שבפנים אז הוא כולל בתוכו גם את האלמנט שבחוץ ולכן לחיצה עליו תכלול את שניהם ונקבל איבנטים לשניהם.

הפתרון להשתמש ב event.target שמחזיר את מה שלחצנו עליו מזכיר קצת את this אבל השוני שב this אנחנו מקבלים לא רק את האלמנט הספציפי שלחצנו עליו אלא גם את כל השאר שזה לא מה שאנחנו מחפשים בבעית הבאבל.

ניתן לקבל עוד מידע על איבנטים של הלחיצה פה

דוגמא לקוד שפותר את הבעיה:

  $(".target" ).on( "click", function(event) {
  if($(event.target).is(".target1")) {
  }
  if($(event.target).is(".target12") {
  }
});

 

 

בעיה 3 אלמנט לא מוכר בדף :

יציאת אלמנט אונליין – כאשר אנחנו יוצרים אלמנט HTML נוסף בזמן ריצת הדף למשל מוספים עוד בוקסות, אז פתאום אנחנו רואים שאנחנו לא יכולים לגשת אליהם ע"י איבנטים שרשמנו בהתחלה, מכיוון שבזמן הריצה הדום רושם את כול האיבנטים שילחצו בהמשך, הפתרון לבעיה זאת היא להשתמש באיבנט של jquery השלישי on בצורה הזאת

 

$('body').on('click', '#element', function(){
    $("#my").html(result);
});

element – זה האלמנט שרוצים עליו את הקליק ואנחנו מחפשים בכל ה body כך שהקליק נרשם על ה body ולא על אלמנט ספציפי וה body תמיד קיים ב DOM כך שהאלמנט ימצא.

עוד משהו

כאשר רוצים להתייחס לאובייקט שעליו הקלקנו למשל div מסויים אז משתמשים ב $this

דוגמא :

$( ".divClass" ).on( "click", function() {
  console.log( $( this ).text() );
});

מוציא את הטקסט של האובייקט שלחצנו עליו אפילו עם יש עוד אובייקטים עם הקלאסס הזה.