jQuery bind(), unbind()

bind() 	- Eseménykezelőket csatol az elemekhez.
                        Kiválasztott elemhez egy vagy több eseménykezelőt tulajdonít (csatol). Esemény bekövetkezik, meghatározza a függvény lefutást. 
						
unbind() 	- Eltávolítja az elemekhez csatolt eseménykezelőket.

bind() példák.

1.Példa:
Eseménykezelőket csatolunk egy kiválasztott elemhez, melynek egyedi azonosítója: id="binp01"
1. mouseover : Területre érkezés.
2. mouseout : Terület elhagyása.
Esemény vagy események meghatározásai arra az elemre vagy elemekre lesznek hatással, aminek a html jelölőelemét, vagy azonosítóját meghatározzuk.
Esemény bekövetkezésekor meghatározott stílus, ez lesz: .class01{color: red; background-color: yellow;}

1. $(" p ").bind( ......... // Szelektort így határozzuk meg, akkor, minden p elemen aktiválódik az esemény.
2. $(" #binp01 ").bind(.... // Szelektort így határozzuk meg, akkor, a kiválasztott azonosítóval rendelkező elemen aktiválódik, az esemény.

toggleClass() metódus, class stílust hozzáad / visszavon.

1.Példa: Kiválasztott elemhez, kettő eseményt társítunk.

$(document).ready(function(){
    $("#binp01").bind("mouseover mouseout", function(){
         $("p").toggleClass("class01");
    });
});

1.Példa:

<p id="binp01">
Mozgassuk az egérmutatót, erre a bekezdésre, és minden " p " elemhez, hozzárendeljük a .class01 stílusait.
</p>

Ez is egy <p> bekezdés.

2.Példa: Elemhez három eseményt, társítunk.

$(document).ready(function(){
    $("#bin01").bind({
      click:function(){$("#p02").slideToggle();},
      mouseover:function(){$("body").css("background-color", "goldenrod");},  
      mouseout:function(){$("body").css("background-color", "#CCCCCC");}  
    });
});

<p id="p02">
Ez is egy bekezdés, melyre a következő <button> gombra történő kattintás lesz hatással.
</p>

function esemenyvan(e){
    alert(e.data.info);
}
$(document).ready(function(){
    $("#binp05").bind("click", {info: "id=binp05 azonosítóval rendelkező elem területén, kattintottál!"}, esemenyvan)
});

<p id="binp05">
Ez is egy bekezdés. Kattins ide!.
<p>

unbind() példák.

aunbind () metódus:
Eltávolítja kiválasztott elemhez rendelt, eseménykezelőt vagy eseménykezelőket.

$(document).ready(function(){
   var x = 0;
      $("#unb02").click(function(event){
         $("#unb02").animate({fontSize: "+=5px"});
		
    x++;
      if (x >= 2) {
          $(this).unbind(event);
        }
});

<p style="font-size:16px;" id="unb02">
Click ide a P elemre, hogy növeljük a betűk méretét.
A méret, csak 2 alkalommal növelhető.
unbind() metódus, feltételben meghatározott érték elérésekor, hatástalanítja az eseményt.
</p>

Hatástalanítunk minden p elemhez rendelt,
eseményt.

$(document).ready(function(){
	$("#unbind01").click(function(){
		$("p").unbind();
	});
});

Eredeti, azaz, az oldalra történő belépéskori állapot visszaállítása.

$(document).ready(function(){
    $(".of5").click(function(){ 
          window.location.reload();
    });
});

<script>
function alertUdvozlet() {  alert("Hello! Üdvözöllek az oldalon!");  }

$(document).ready(function(){
    $("#klikkalert").click(alertUdvozlet);
	
    $("#udvtorles").click(function(){
        $("#klikkalert").unbind("click", alertUdvozlet);
    });
});
</script>

<div id="klikkalert">

Kattints e terület, tetszőleges részén.

<p> Ez egy p elem. ----- Pédául ide is, kattinthatunk! </p>

</div>