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 );
});