תיאור: מסיר מטפל אירוע המצורף בעבר מאלמנטים.
.unbind( eventType, handler(eventObject) )
הוספה בגרסה: 1.0
eventType
מחרוזת, המכילה סוג אירוע
JavaScript,
כמו, למשל,
"click" או "submit".
handler(eventObject)
פונקציה שלא תופעל יותר.
.unbind( event )
הוספה בגרסה: 1.0
event
אובייקט אירוע JavaScript, שנשלח למטפל אירוע.
.unbind( eventType, false )
הוספה בגרסה: 1.4.3
eventType
מחרוזת, המכילה סוג אירוע
JavaScript,
כמו, למשל,
"click" או "submit".
false
מתיר פונקציה הקשורה
'המחזירה false'
שהייתה צריכה להשתמש ב-
.bind( eventName, false ).
כל מטפל, שמקושר ל-
.bind()
ניתן להסיר באמצעות
.unbind().
בגרסה פשוטה ביותר, ללא ארגומנטים,
.unbind()
מסיר כל המטפלים המחוברים לאלמנט:
$('#foo').unbind();
גירסה הזו מסירה מטפלים, ללא קשר לסוג. ליתר דיוק, אנחנו יכולים להעביר את סוג האירוע:
$('#foo').unbind('click');
על ידי ציון סוג אירוע click,
רק מטפלים עבור סוג אירוע הזה ימחקו.
לגישה זו יכולות עדיין להיות השלכות שליליות,
אם סקריפטים אחרים יקשרו התנהגויות לאותו אלמנט.
יישומים יציבים ונתנים להרחבה מסיבה הזו בדרך כלל דורשים גירסה בעלת שני ארגומנטים:
var handler = function() {
alert('The quick brown fox jumps over the lazy dog.');
};
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);
על ידי שיום המטפל, אנחנו יכולים להיות בטוחים, שאף פונקציה אחרת לא תכנס באש צולבת. שימו לב, שקוד הבא לא יעבוד:
$('#foo').bind('click', function() {
alert('The quick brown fox jumps over the lazy dog.');
});
$('#foo').unbind('click', function() {
alert('The quick brown fox jumps over the lazy dog.');
});
למרות ששתי פונקציות זהות בתוכן, הן נוצרו בנפרד, ול- JavaScript יש זכות להחזיק אותן בתור אובייקטים נפרדים של פונקציה. כדי לבטל קשר עם מטפל מסוים, אנחנו צריכים להתייחס לפונקציה הזו, ולא אחרת, שעושה אותו דבר.
שימוש במרחב שמות
במקום שמירת קישורים למטפלים,
כדי לשחרר אותם, אנחנו יכולים לתת שמות לאירועים ולהשתמש באפשרות הזו, כדי לצמצם את היקף פעולות של שיחרור שלנו.
כמו שנאמר תוך דיון של שיטה
.bind(),
מרחב שמות מוגדר באמצעות סימן נקודה
(.)
בקשירת המטפל:
$('#foo').bind('click.myEvents', handler);
כאשר המטפל מקושר בצורה הזו, אנחנו עדיין יכולים להסיר אותו בדרך הרגילה:
$('#foo').unbind('click');
עם זאת, אם אנחנו רוצים להימנע מלהשפיע על מטפלים אחרים, אנחנו יכולים להיות יותר ספציפים:
$('#foo').unbind('click.myEvents');
אם מספר שמות מטפלים מאוגדים, אנחנו יכולים לשחרר אותם מייד:
$('#foo').unbind('click.myEvents.yourEvents');
תחביר זה דומה לזה המשמש עבור מחלקת סלקטורים CSS; הם לא ההיררכיה. שיטת קריאה הזו היא כמו:
$('#foo').unbind('click.yourEvents.myEvents');
אנחנו גם יכולים להסיר את כל המפעילים של מרחב שמות, ללא תלות בסוג האירוע::
$('#foo').unbind('.myEvents');
זה שימושי במיוחד לצרף מרחב שמות עבור קישור אירוע, כאשר אנחנו מפתחים תוספות או כתיבת קוד אחרת, שעשוי אינטראקציה עם קודים אחרים של טיפול באירועים בעתיד.
שימוש באובייקט האירוע
צורה שניה של שיטה
.unbind()
משמשת כאשר אנחנו רוצים להסיר מטפל מתוך עצמו.
לדוגמה, נניח שאנחנו רוצים להפעיל מטפל אירוע רק שלוש פעמים:
var timesClicked = 0;
$('#foo').bind('click', function(event) {
alert('The quick brown fox jumps over the lazy dog.');
timesClicked++;
if (timesClicked >= 3) {
$(this).unbind(event);
}
});
במקרה הזה מטפל צריך לקבל פרמטר,
כדי שנוכל לתפוס את האובייקט האירוע ולהשתמש בו כדי להסיר את המטפל לאחר לחיצה השלישית.
אובייקט אירוע מכיל תוכן, הדרוש עבור
.unbind(),
כדי לדעת איזה מטפל להסיר.
דוגמה זו היא גם המחשה של סגירה.
מכיוון שמטפל מתייחס למשתנה
timesClicked,
שמוגדר מחוץ לפונקציה,
הגדלת המשתנה משפיעה גם בין הפעלות של המטפל.
דוגמאות
דוגמה 1
יכול לצרף או למחוק אירועים לכפתור צבוע
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
.text("Does nothing...");
});
קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
function aClick() {
$("div").show().fadeOut("slow");
}
$("#bind").click(function () {
// could use .bind('click', aClick) instead but for variety...
$("#theone").click(aClick)
.text("Can Click!");
});
$("#unbind").click(function () {
$("#theone").unbind('click', aClick)
.text("Does nothing...");
});
});
</script>
<style>
button { margin:5px; }
button#theone { color:red; background:yellow; }
</style>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
</body>
</html>
דוגמה 2
כדי לבטל כל האירועים מכל הפסקאות, תרשמו:$("p").unbind()
דוגמה 3
כדי לבטל כל האירועי לחיצה מכל הפסקאות, תרשמו:$("p").unbind( "click" )
דוגמה 4
כדי לבטל רק אירוע אחרון שצורף, יש לרשום שם הפונקציה במקום השני בארגומנטים:var foo = function () {
// code to handle some kind of event
};
$("p").bind("click", foo); // ... now foo will be called
when paragraphs are clicked ...
$("p").unbind("click", foo); // ... foo will no longer be called.
האם מידע זה היה מועיל?
