mikolaj-kulesz
7/25/2013 - 7:15 PM

rozdział 3 - jQuery - events, obłsuga zdarzeń $(document).ready(), bind(), on(), addClass(), removeClass(), stopPropagation(), preventDefaul

rozdział 3 - jQuery - events, obłsuga zdarzeń $(document).ready(), bind(), on(), addClass(), removeClass(), stopPropagation(), preventDefault() , toggle(), toggleClass(), event.target, this, propagacja/bąbelkowanie(bubbling), kapturowanie (capturing), keyup, hover, click

//this i event.target

$('#idName').bind('click', function(){ //this
  $(this).addClass('className');
});

$('#idName').bind('click', function(){ //this check ID
  if(this.id == 'idName'){ 
  $('className').addClass('className');
  }
});

$('#idName').bind('click', function(){ //this check class
  if( $(this).hasClass('className') == 'className'){ 
	$('className').addClass('className');
  }
});

$('#idName').bind('click', function(event){ //is potrafi sprawdzić obiket pod kątem dowolnego wyrażenia selektora
  if( $(event.target).is('.className') ){ 
	$('className').addClass('className');
  }
});

$('#idName').click(function(event){ //event.target (s71)
	if (event.target == this ) {
		doSomething();
	}
});

$('#idName').click(function(event){ //event.stopPropagation();
	if (event.target.id == 'idName' ) {
		doSomething();
	}
	event.stopPropagation();
});

$('#idName').click(function(event){ //event.preventDefault();
	if (event.target.id == 'idName' ) {
		doSomething();
	}
	event.preventDefault();
});
//dowiązanie i usunięcie zdarzenia

$('#idName').bind('click', function(){ //bind
});

$('#idName').unbind('click'); //unbind

$('#idName').bind('click.name', function(){ //bind z przestrzenią nazw
});

$('#idName').unbind('click.name'); //unbind z przestrzenią nazw

$('#idName').bind('click', functionName); //bind z funkcją

$('#idName').unbind('click', functionName); //unbind z funkcją

$('#idName').one('click', functionName); //one - pojedyńczy bind

$('#idName').trigger('click'); //trigger
//$(document).ready() i noCoflict()

$(document).ready(function(){ // funkcja podstawowa
});

jQuery(document).ready(function(){ // funkcja podstawowa
});

jQuert.noConflict();
//skrótowe motedy odługi zdarzeń 

blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
mouseup
resize
scroll
select
submit
unload

//przykłady

$('#idName').toggle(function(){ //toggle function - każde wywołanie wywoła kolejną funkcję i cykle się loopują
  $('#idName1').addClass('className');
	}, function(){ 
	$('#idName2').addClass('className');
	}, function(){ 
	$('#idName3').addClass('className');
});

$('#idName').hover(function(){ //hover function
	$('#idName1').addClass('className');
	}, function(){ 
	$('#idName2').removeClass('className');
});

$(document).ready(function(){
	$(document)
	.keyup(function(event){ //keyup - zdarzenia klawiatury
		switch(String.fromCharCode(event.keyCode)){
			case 'N':
				doSomthing('N');
				break;
			case 'W':
				doSomthing('W');
				break;
			case 'D':
				doSomthing('D');
				break;
		};
	});

	function doSomthing (arg) {
		console.log('Say somethig: ' + arg);
	};
});
//ON i OFF - bindowanie zdarzeń, przekazywanie zmiennych, zatrzymywanie propagacji

// $( "p" ).on( "click", { foo: "bar" }, myHandler );

$(document).ready(function(){

	function verification (e) {
		//console.log(e.data)
		if ($(e.target).hasClass('super')) {
			doSomething(e.data.foo + ' Super');
		}
		else if ($(e.target).hasClass('cancel')) {
			doSomething(e.data.foo + ' Cancel');
			$( 'body' ).off( 'click' );
			//e.stopPropagation();
		}
		else if (e.target.tagName.toLowerCase() === 'li') {
			doSomething(e.data.foo + ' List element');
			e.stopPropagation();
		}
		else {
			doSomething(e.data.foo + ' Body element');
			e.stopPropagation();
		}
	};

	function doSomething (arg) {
		console.log('Say somethig: ' + arg);
	};

	$( 'ul' ).on( 'click', { foo: "ul" }, verification );
	$( 'body' ).on( 'click', { foo: "body" }, verification );

});