![\"\"](\"https:\/\/ulviercan.com\/teknoblog\/wp-content\/uploads\/2012\/11\/olaylar.png\" "\\"olaylar\\"")
<\/p>\n<\/p>\n
Selamlar. Bu hafta bir \u00e7ok programlama dilinde b\u00fcy\u00fck rol oynayan events yani olaylar konusunu i\u015fleyece\u011fim. Kullan\u0131c\u0131 ile ileti\u015fime ge\u00e7en bir sistem yapmak istiyorsak, olaylar bize b\u00fcy\u00fck fayda sa\u011flayacaklard\u0131r. Bir ka\u00e7 ufak \u00f6rnek vermek istersek bunlar, bir linke, butona vs. herhangi bir DOM elemente t\u0131kland\u0131\u011f\u0131nda kullan\u0131c\u0131ya mesaj kutusu g\u00f6stermek, form i\u00e7erisinde enter gibi formu g\u00f6nderme g\u00f6revine sahip bir tu\u015fa bas\u0131lmas\u0131n\u0131 engellemek olabilir.<\/p>\n
Laf\u0131 daha fazla uzatmadan bu haftaki konumuza ba\u015flayal\u0131m.<\/p>\n
JQuery’nin olaylar sistemi, event nesnesini W3C standartlar\u0131na g\u00f6re normalle\u015ftirir. Normalle\u015ftirmeden kas\u0131t, \u00e7arpraz taray\u0131c\u0131 kullan\u0131m\u0131na uygunluk olacakt\u0131r. Olay nesnesinin olay i\u015fleyicisinde tan\u0131ml\u0131 olmas\u0131 garanti edilmi\u015ftir. Ger\u00e7ek olaydaki bir \u00e7ok \u00f6zellik kopyalan\u0131p, normalle\u015ftirildikten sonra event nesnesine aktar\u0131lm\u0131\u015ft\u0131r. JQuery d\u00f6k\u00fcmantasyondaki olan ve birebir \u00e7evirdi\u011fim bu garip giri\u015f c\u00fcmlesinden sonra verece\u011fim \u00f6rnekler, daha a\u00e7\u0131klay\u0131c\u0131 olacaklard\u0131r.<\/p>\n
jQuery.Event kurucusu, tetikleyici \u00e7a\u011f\u0131rarak kullan\u0131labilir. “new” operat\u00f6r\u00fcn\u00fcn kullan\u0131m\u0131 keyfidir.<\/p>\n
\r\n\/\/ new operat\u00f6r\u00fc kullanmadan yeni bir event nesnesi olu\u015fturduk.\r\n var e = jQuery.Event("click");\r\n\r\n\/\/ Yapay t\u0131klama olay\u0131n\u0131 tetikledik\r\n jQuery("body").trigger( e );\r\n<\/pre>\nJQuery 1.6 ile birlikte event nesnesi olu\u015ftururken, parametre olarak ba\u015fka bir nesne ge\u00e7ebilirsiniz.<\/p>\n
\r\n var e = jQuery.Event("keydown", { keyCode: 64 });\r\n\r\n\/\/ Tu\u015f kodu 64 olan tu\u015f i\u00e7in sanal basma olay\u0131 olu\u015fturduk\r\n jQuery("body").trigger( e );\r\n<\/pre>\nEvent \u00d6zellikleri<\/h1>\n
JQuery a\u015fa\u011f\u0131daki \u00f6zellikleri \u00e7apraz taray\u0131c\u0131 kullan\u0131m\u0131nda sorunsuz olarak kullanmak \u00fczere normalle\u015ftirir.<\/p>\n
Yeni bir event nesnesi olu\u015fturdu\u011funuzda a\u015fa\u011f\u0131daki \u00f6zelliklerde bu nesneye kopyalanacakt\u0131r, ancak nesnenin t\u00fcr\u00fcne g\u00f6re baz\u0131lar\u0131n\u0131n de\u011ferleri “undefined” olarak tan\u0131mlanabilir.<\/p>\n
altKey, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, metaKey, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedTarget, screenX, screenY, shiftKey, target, view, which<\/em><\/p>\n Olay tipini belirtir.<\/p>\n Sonucumuz “click” olacakt\u0131r.<\/p>\n Y\u00fcr\u00fcrl\u00fckteki eventin hangi namespace’e etki etti\u011fini g\u00f6sterir.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zkLGC\/<\/a><\/p>\n Fare ve klavye olaylar\u0131 i\u00e7in neye bas\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir. Input elementine odaklanm\u0131\u015fken, bas\u0131lan tu\u015fun tu\u015f kodunu ve yine fare ile t\u0131kland\u0131\u011f\u0131nda faredeki tu\u015flar\u0131n kodlar\u0131n\u0131 ekrana bast\u0131r\u0131yoruz.<\/p>\n Y\u00fcr\u00fcrl\u00fckteki olay\u0131n hangi elemente uyguland\u0131\u011f\u0131n\u0131 belirtir.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/y9T9K\/<\/a><\/p>\n Bu \u00f6zelli\u011fi a\u00e7\u0131klamadan \u00f6nce, anlatt\u0131klar\u0131m\u0131n daha a\u00e7\u0131klay\u0131c\u0131 olmas\u0131 bak\u0131m\u0131ndan bir tan\u0131m yapmak istiyorum.<\/p>\n Javascript ile bir olay olu\u015ftu\u011funda, bu olay DOM a\u011fac\u0131nda en \u00fcste kadar ula\u015f\u0131r. \u00d6rne\u011fin i\u00e7 i\u00e7e 2 tane div tag\u0131 var ve 2 div tag\u0131n\u0131n da click eventleri var. \u0130\u00e7teki div eleman\u0131na t\u0131klad\u0131\u011f\u0131n\u0131z zaman, hem i\u00e7teki div in event-handler fonksiyonu hem de d\u0131\u015ftaki div eleman\u0131n\u0131n event-handler fonksiyonu tetiklenir.<\/p><\/blockquote>\n \u0130\u015fte bu event bubbling esnas\u0131nda ge\u00e7erli olan elementi belirtir.<\/p>\n 1 Ocak 1970 tarihinden, taray\u0131c\u0131 olay\u0131 yaratt\u0131\u011f\u0131 ana kadar ge\u00e7en s\u00fcreyi milisaniye cinsinden verir.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/566fW\/<\/a><\/p>\n \u0130ki t\u0131k aras\u0131nda ge\u00e7en s\u00fcreyi buluyoruz.<\/p>\n Ge\u00e7erli olaydan d\u00f6nen de\u011feri tan\u0131mlanm\u0131\u015f olmas\u0131 \u015fart\u0131yla g\u00f6sterir. Uygulamada return “selam”; ile click olay\u0131ndan de\u011fer d\u00f6nd\u00fcr\u00fcyoruz ve bu de\u011feri event.result ile ekrana bast\u0131r\u0131yoruz.<\/p>\n E\u011fer varsa, olay\u0131n i\u00e7erdi\u011fi di\u011fer elementtir. \u015e\u00f6yle ki: Fare ile <a> elementinin \u00fczerine geldikten sonra a\u015fa\u011f\u0131ya do\u011fru \u00e7ekti\u011fimizde, a elementi i\u00e7in mouseout olay\u0131 tetiklenecek ve bu ayn\u0131 zamanda <div> elementine ba\u015flang\u0131\u00e7 oldu\u011fu i\u00e7in ekrana “DIV” uyar\u0131s\u0131 gelecektir.<\/p>\n event.pageX: Pencerenin sol k\u0131sm\u0131na g\u00f6receli olarak farenin konumu D\u00f6k\u00fcmana eklenen mousemove olay\u0131 esnas\u0131nda ekrana farenin koordinatlar\u0131n\u0131 piksel cinsinden bast\u0131r\u0131yoruz.<\/p>\n Event nesnesine ge\u00e7ilen verileri tutar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/gWgmb\/<\/a><\/p>\n For d\u00f6ng\u00fcs\u00fc i\u00e7erisinde, i de\u011fi\u015fkeninin de\u011ferini .on() metoduna ge\u00e7iyoruz ve bu sayede, ge\u00e7erli olan iterasyon de\u011feri korunmu\u015f oluyor.<\/p>\n JQuery olay i\u015fleyicisinin \u00e7a\u011fr\u0131ld\u0131\u011f\u0131 yerdeki elementi belirtir.<\/p>\n CSS s\u0131n\u0131f\u0131 box olan herhangi bir kutuya t\u0131kland\u0131\u011f\u0131 anda, hangi kutuya t\u0131kland\u0131 ise, o kutunun arka plan\u0131n\u0131 k\u0131rm\u0131z\u0131 yapar.<\/p>\n E\u011fer bu metot \u00e7a\u011fr\u0131ld\u0131ysa, y\u00fcr\u00fcrl\u00fckteki i\u015flem ger\u00e7ekle\u015ftirilmeyecektir.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/NaAsu\/<\/a><\/p>\n <a> elementinin t\u0131klama olay\u0131nda event.preventDefault(); kullan\u0131yoruz ve bu bir sonraki i\u015flem olan linki a\u00e7ma i\u015flemini iptal ediyor.<\/p>\n Ge\u00e7erli olay i\u00e7in .preventDefault() metodu \u00e7a\u011fr\u0131lm\u0131\u015f m\u0131 diye kontrol eder.<\/p>\n \u0130lk k\u0131s\u0131m “false” uyar\u0131s\u0131 verecektir. \u0130kinci k\u0131s\u0131mda ise, event.preventDefault(); kulland\u0131\u011f\u0131m\u0131z i\u00e7in “true” uyar\u0131s\u0131 verecektir.<\/p>\n Yukar\u0131da tan\u0131m\u0131n\u0131 yapm\u0131\u015f oldu\u011fum “Event Bubbling” denen yap\u0131y\u0131 engeller. \u0130\u00e7 elementlerin birinde olan olay\u0131, atalar\u0131ndaki olay i\u015fleyicilerinden uzak tutar.<\/p>\n T\u0131klama olay\u0131ndaki “Event Bubbling” i engeller.<\/p>\n Ge\u00e7erli olan event i\u00e7in .stopPropagation() metodu \u00e7a\u011fr\u0131lm\u0131\u015f m\u0131 diye kontrol eder. Uygulamada da g\u00f6rebilece\u011finiz \u00fczere, y\u00fcr\u00fcrl\u00fckteki event i\u00e7in yap\u0131lan ilk kontrolde sonu\u00e7 \u00e7a\u011fr\u0131lmad\u0131 \u00e7\u0131k\u0131yor. .stopPropagation() kullan\u0131ld\u0131ktan sonra sonu\u00e7 \u00e7a\u011fr\u0131ld\u0131 \u00e7\u0131k\u0131yor.<\/p>\n .stopPropagation() metodunun yapt\u0131\u011f\u0131 i\u015fe yani di\u011fer olay i\u015fleyicilerini bubbling-up’tan koruman\u0131n yan\u0131nda var olan bubbling-up i\u015flemini de durdurur.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ThUZY\/<\/a><\/p>\n <p> elementi i\u00e7in kulland\u0131\u011f\u0131m\u0131z event.stopImmediatePropagation(); metottan dolay\u0131, t\u0131klama olay\u0131m\u0131z \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n Ge\u00e7erli objeye ba\u011fl\u0131 olay i\u015fleyicisi i\u00e7in, .stopImmediatePropagation() metodu \u00e7a\u011fr\u0131lm\u0131\u015f m\u0131 diye kontrol eder.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/PZtSh\/<\/a><\/p>\n .immediatePropStopped() \u00e7a\u011fr\u0131ld\u0131ktan sonra \u00e7a\u011fr\u0131ld\u0131 \u015feklinde uyar\u0131y\u0131 al\u0131yoruz.<\/p>\n JavaScript’teki t\u0131klama olay\u0131nda olacaklar\u0131 belirler veya t\u0131klama olay\u0131n\u0131 ger\u00e7ekle\u015ftirir. \u015e\u00f6yle ki:<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/pgCn5\/<\/a><\/p>\n Her bir <p> elementinin t\u0131klama olay\u0131nda, kendisini slideUp(); komutuyla yukar\u0131 kayd\u0131r\u0131yor. Ancak <div> elementine t\u0131klad\u0131\u011f\u0131m\u0131z zaman, sanki t\u00fcm <p> elementlerine t\u0131klam\u0131\u015fcas\u0131na hepsini yukar\u0131 kayd\u0131r\u0131yor. \u00c7\u00fcnk\u00fc, genel se\u00e7ici olan $(“p”) se\u00e7icisini kulland\u0131k. Se\u00e7iciler hakk\u0131nda daha fazla bilgi i\u00e7in buraya t\u0131klay\u0131n\u0131z.<\/a><\/p>\n JavaScript’teki \u00e7ift t\u0131klama olay\u0131nda olacaklar\u0131 belirler veya \u00e7ift t\u0131klama olay\u0131n\u0131 ger\u00e7ekle\u015ftirir. \u015e\u00f6yle ki:<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/zWv2K\/<\/a><\/p>\n Her bir <p> elementinin \u00e7iftt\u0131klama olay\u0131nda, kendisini slideUp(); komutuyla yukar\u0131 kayd\u0131r\u0131yor. Ancak <div> elementine \u00e7ift t\u0131klad\u0131\u011f\u0131m\u0131z zaman, sanki t\u00fcm <p> elementlerinin hepsine \u00e7ift t\u0131klam\u0131\u015fcas\u0131na hepsini yukar\u0131 kayd\u0131r\u0131yor.<\/p>\n <\/a><\/p>\n Herhangi bir elemente odakland\u0131\u011f\u0131m\u0131zda \u00e7al\u0131\u015f\u0131r. .focus() metodundan farkl\u0131 olarak eklendi\u011fi elementin alt elementlerindeki odaklanmay\u0131 da yakalar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/cGtjF\/<\/a><\/p>\n Genel element se\u00e7icisi olan $(“p”) ile herhangi bir <p> elementine .focusin() ile odaklan\u0131ld\u0131\u011f\u0131n\u0131 yakal\u0131yoruz ve input’umuzun hemen yan\u0131nda animasyonlu bir \u015fekilde “focusin ger\u00e7ekle\u015fti” yazd\u0131r\u0131yoruz.<\/p>\n <\/a><\/p>\n Herhangi bir elementten odaklanmay\u0131 b\u0131rakt\u0131\u011f\u0131m\u0131zda \u00e7al\u0131\u015f\u0131r. .blur() metodundan farkl\u0131 olarak eklendi\u011fi elementin t\u00fcm \u00e7ocuklar\u0131ndaki bulan\u0131kla\u015fma (blur, focusout) olaylar\u0131n\u0131 yakalar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/V9Qsp\/<\/a><\/p>\n Dikkat ederseniz, .focusout() ve .blur() olaylar\u0131n\u0131 <p> elementlerine ba\u011flad\u0131k, <input> elementlerine de\u011fil. Bu y\u00fczden .focusout() olay\u0131 \u00e7al\u0131\u015f\u0131rken .blur() olay\u0131m\u0131z \u00e7al\u0131\u015fm\u0131yor.<\/p>\n Eklendi\u011fi elementteki 2 olay\u0131 ele al\u0131r. Bunlar fare ile o elementin \u00fczerine gelmemiz olay\u0131 ve farenin o elementin \u00fczerinden ayr\u0131lmas\u0131 olay\u0131.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/xCJTr\/<\/a><\/p>\n Herhangi bir <li> elementinin \u00fczerine geldi\u011fimizde, \u00fczerine gelinen elementin sonuna 3 tane y\u0131ld\u0131z ekliyoruz ve \u00fczerinden ayr\u0131ld\u0131\u011f\u0131m\u0131zda bu 3 y\u0131ld\u0131z\u0131 siliyoruz.<\/p>\n .mousedown(): Herhangi bir element i\u00e7in farenin butonuna basma an\u0131n\u0131 tetikler veya o anda olacaklar\u0131 belirler. $(“p”) ile se\u00e7ti\u011fimiz t\u00fcm paragraflar i\u00e7in, t\u0131kland\u0131\u011f\u0131 anda “Mouse down” yazar, t\u0131klamay\u0131 b\u0131rakt\u0131\u011f\u0131m\u0131z anda “Mouse up” yazar.<\/p>\n .mouseenter(): Farenin se\u00e7ilen elementlerin \u00fczerine geldi\u011fi an\u0131 temsil eder, tetikler, olacaklar\u0131 belirler. \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/kD88W\/<\/a><\/p>\n Kod par\u00e7as\u0131, fare kutular\u0131n \u00fczerinde gezdik\u00e7e, kutulara giri\u015f ve ayr\u0131l\u0131\u015f say\u0131lar\u0131n\u0131 say\u0131yor.<\/p>\n Farenin se\u00e7ilen elementlerin \u00fczerinde hareket etti\u011fi her bir an\u0131 temsil eder, tetikler, olacaklar\u0131 belirtir.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/2MqXD\/<\/a><\/p>\n Fareyi kutunun \u00fczerinde hareket ettirdi\u011fimiz anda, farenin koordinatlar\u0131n\u0131 pencereye g\u00f6receli olarak ekranda yazd\u0131r\u0131yoruz.<\/p>\n Bu ikili farenin se\u00e7ilen elementlere giri\u015f \u00e7\u0131k\u0131\u015f\u0131n\u0131 belirtir, tetikler, olacaklar\u0131 belirler. .mouseenter() \/ .mouseleave() metodundan farkl\u0131 olarak, i\u00e7i i\u00e7e kutular oldu\u011funda ve i\u00e7teki kutulardan birinin \u00fczerine geldi\u011fimizde ana kutunun d\u0131\u015f\u0131na \u00e7\u0131km\u0131\u015f\u0131z gibi davran\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/38Qu2\/<\/a><\/p>\n Sol taraftaki i\u00e7i i\u00e7e olan kutulara dikkat ederseniz, i\u00e7teki kutuya her bir giri\u015fi bir .mouseover() olay\u0131 olarak alg\u0131l\u0131yor.<\/p>\n Se\u00e7ilen elemente her bir t\u0131klamada s\u0131ras\u0131yla verilen fonksiyonlar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Nnccx\/<\/a><\/p>\n <li> elementleri i\u00e7in her bir t\u0131klamada, s\u0131ras\u0131yla renkleri de\u011fi\u015ftiriyor.<\/p>\n Klavye tu\u015funa bast\u0131\u011f\u0131m\u0131z an\u0131 temsil eder, tetikler, olacaklar\u0131 belirler. Uygulamam\u0131z, input elementine odaklan\u0131lm\u0131\u015fken bir tu\u015fa bast\u0131\u011f\u0131m\u0131zda, input’un arka plan rengini k\u0131rm\u0131z\u0131 yap\u0131yor.<\/p>\n Klavye tu\u015funa bast\u0131ktan sonraki \u00e7ekme an\u0131n\u0131 temsil eder, tetikler, olacaklar\u0131 belirler. Uygulama input elementine odaklan\u0131lm\u0131\u015fken bir tu\u015fa bas\u0131p \u00e7ekme an\u0131nda, input’un arka plan rengini k\u0131rm\u0131z\u0131 yap\u0131yor.<\/p>\n Klavye tu\u015funa basma an\u0131m\u0131z\u0131 temsil eder, tetikler, olacaklar\u0131 belirler.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ZASGE\/<\/a><\/p>\n Uygulama, yorum alan\u0131nda enter tu\u015funa basmam\u0131z\u0131 engelliyor. Klavyede bulunan iki adet enter tu\u015flar\u0131n\u0131n tu\u015fu kodu kar\u015f\u0131l\u0131klar\u0131 ’10’ ve ’13’ t\u00fcr.<\/p>\n Javascript k\u00fct\u00fcphanesindeki blur olay\u0131n\u0131 temsil eder, tetikler, olacaklar\u0131 belirler. Blur an\u0131ndaki ekrana uyar\u0131 veriyor.<\/p>\n Select elemetindeki de\u011fi\u015fimleri tetikler, temsil eder. Select elementinin se\u00e7ili olan se\u00e7eneklerinde herhangi bir de\u011fi\u015fim oldu\u011funda, se\u00e7ili olanlar\u0131 ekrana bast\u0131r\u0131yoruz.<\/p>\n Herhangi bir elemente odakland\u0131\u011f\u0131m\u0131zda olacaklar\u0131 belirler, tetikleme mekanizmas\u0131 sa\u011flar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/nQ79s\/<\/a><\/p>\n Input elementlerinden birine t\u0131kland\u0131\u011f\u0131nda ekrana “focus olay\u0131” yazd\u0131r\u0131yoruz.<\/p>\n Input elementlerinden herhangi birinde se\u00e7im i\u015flemi yap\u0131ld\u0131\u011f\u0131nda olacaklar\u0131 belirler, tetikler. Input elementlerinden birinde se\u00e7im i\u015flemi yap\u0131ld\u0131\u011f\u0131nda, ekrana “Bir \u015feyler se\u00e7ildi” metnini bast\u0131r\u0131yoruz.<\/p>\n Herhangi bir formun g\u00f6nderme an\u0131n\u0131\u0131 temsil eder, tetikler.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/nFSZb\/<\/a><\/p>\n Input elementine ‘do\u011fru’ yazmad\u0131\u011f\u0131m\u0131z s\u00fcrece ekrana ‘Do\u011frulanmad\u0131!’ yaz\u0131yoruz. Aksi takdirde ‘Do\u011fruland\u0131…’ yazd\u0131r\u0131p ekrana ‘ba\u015far\u0131l\u0131’ uyar\u0131s\u0131n\u0131 veriyoruz.<\/p>\n Herhangi bir DOM elementin d\u00f6k\u00fcmana y\u00fcklenme an\u0131n\u0131 temsil eder, tetikler.<\/p>\n A\u015fa\u011f\u0131daki kod beti\u011fi y\u00fcksekli\u011fi 100’den b\u00fcy\u00fck olan her bir resim elementlerine d\u00f6k\u00fcmana y\u00fcklenmesi tamamlana kadar s\u00fcrekli ge\u00e7erli olmak \u00fczere buyuk_resim CSS s\u0131n\u0131f\u0131n\u0131 ekler.<\/p>\n Herhangi bir DOM elementin d\u00f6k\u00fcmana tamamen y\u00fcklenmesi an\u0131n\u0131 temsil eder, tetikler.<\/p>\n DOM elementin d\u00f6k\u00fcmandan kayboldu\u011fu ana denk gelir. Bu element, d\u00f6k\u00fcman\u0131n kendisi de olabilir. Herhangi bir DOM element i\u00e7in olu\u015facak hatay\u0131 temsil eder. A\u015fa\u011f\u0131daki \u00f6rnekte resim elementi i\u00e7in bir sorun olu\u015fursa, \u00f6rne\u011fin resmin kayna\u011f\u0131n\u0131n bulunamamas\u0131 gibi, missing.png’yi y\u00fckle i\u015flemini yap\u0131yor.<\/p>\n Se\u00e7ilen elementin yeniden boyutland\u0131r\u0131ld\u0131\u011f\u0131 an\u0131 temsil eder. A\u015fa\u011f\u0131daki koda bakacak olursak, se\u00e7ilen element olan pencerenin yeniden boyutland\u0131r\u0131ld\u0131\u011f\u0131 anda veya hemen sonras\u0131nda ekrana pencerenin yeni geni\u015flik de\u011ferini bast\u0131racakt\u0131r.<\/p>\n Se\u00e7ilen element i\u00e7in scroll an\u0131n\u0131 temsil eder.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/7Aqsu\/<\/a><\/p>\n Window elementi, scroll oldu\u011fu anda ekrana “Paragraf- Scroll oldu!” yazd\u0131r\u0131yor.<\/p>\n Birden fazla olay\u0131 bir araya getirmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/bBzVs\/<\/a><\/p>\n Uygulamada <p> elementi i\u00e7in tek t\u0131klama, \u00e7ift t\u0131klama veya mouseenter mouseleave olaylar\u0131nda olacaklar\u0131 belirledik.<\/p>\n Daha \u00f6nce eklenen olaylar\u0131 silmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/KQstB\/<\/a><\/p>\n Uygulama ilk \u00e7al\u0131\u015ft\u0131\u011f\u0131 anda ilk butona her hangi bir olay eklenmemi\u015ftir. Bind et butonuna t\u0131klad\u0131\u011f\u0131m\u0131zda ilk butonda, click olay\u0131na ba\u011fl\u0131 olan .show() ard\u0131ndan .fadeOut() animasyonlar\u0131n\u0131 eklemi\u015f oluyoruz. Unbind et butonuna t\u0131klad\u0131\u011f\u0131m\u0131zda ise click olay\u0131n\u0131 iptal etti\u011fimiz i\u00e7in, animasyonlar da iptal edilmi\u015f oluyor.<\/p>\n Elementler olay eklendikten sonra d\u00f6k\u00fcmana dahil edilseler bile, se\u00e7ilen t\u00fcm elementlere belirlenen olay\u0131 ekliyor.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/4XX9x\/<\/a><\/p>\n <p> elementine eklenen olay\u0131 (<p>Ba\u015fka paragraf!<\/p> kodunu ekleme) daha sonradan eklenen <p> elementlerine t\u0131klad\u0131\u011f\u0131m\u0131zda da g\u00f6rebiliyoruz.<\/p>\n .live() ile eklenen t\u00fcm olaylar\u0131 iptal eder.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/UUbt6\/<\/a><\/p>\n Uygulaman\u0131n ilk \u00e7al\u0131\u015fmas\u0131nda, birinci s\u0131radaki butona herhangi bir olay eklenmemi\u015ftir. Bind Et d\u00fc\u011fmesine t\u0131klad\u0131\u011f\u0131m\u0131zda .live() metodu ile eklenen olaylar, .die() metodu ile iptal ediliyor.<\/p>\n Se\u00e7ilen elementlere, bir veya daha fazla olay i\u00e7in, olay i\u015fleyicisi ekler. \u015e\u00f6yle ki: Test kutusu i\u00e7in her bir click, mouseenter, mouseleave olaylar\u0131nda farkl\u0131 durumlar ger\u00e7ekle\u015fiyor.<\/p>\n .on() ile eklenen olaylar\u0131 iptal etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/BNnkf\/<\/a><\/p>\n Uygulama \u00fczerinde rahatl\u0131kla g\u00f6rebilece\u011finiz \u00fczere, .on() ile eklenen olay\u0131 .off() ile iptal ediyoruz.<\/p>\n Se\u00e7ilen elementler i\u00e7in, bir veya daha fazla olay i\u00e7in olay i\u015fleyicisi ekler. Bunlar .live() metodundaki gibi s\u00fcrekli canl\u0131d\u0131rlar. Yani olay i\u015fleyicisi eklendikten sonra d\u00f6k\u00fcmana eklenen elementler i\u00e7inde ge\u00e7erli olur. .live() metodundan farkl\u0131 olan k\u0131sm\u0131 ise, herhangi bir k\u00f6k elementin alt\u0131ndaki elementlerin t\u00fcm\u00fc i\u00e7in kullan\u0131yor olmakt\u0131r.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/UUQWd\/<\/a><\/p>\n Dikkat ettiyseniz, olay i\u015fleyici fonksiyonu <p> elementine de\u011fil, t\u00fcm elementler i\u00e7in k\u00f6k yani ata element olan <body> elementine ekledik.<\/p>\n .delegate() ile eklenen olaylar\u0131 iptal eder.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/CN7Nt\/<\/a><\/p>\n .delegate() ile eklenen olay\u0131, .undelegate() ile iptal ettik.<\/p>\n Se\u00e7ilen elementlere eklenen olay\u0131n sadece bir kere \u00e7al\u0131\u015fmas\u0131na olanak sa\u011flar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/XqwX2\/<\/a><\/p>\n Kutulardan her birine t\u0131kland\u0131\u011f\u0131 anda \u00e7al\u0131\u015fan fonksiyon, bir sonraki t\u0131klamada \u00e7al\u0131\u015fm\u0131yor.<\/p>\n Se\u00e7ilen t\u00fcm elementlere ba\u011fl\u0131 verilen tipteki olaylar\u0131 tetikler. \u0130lk buton i\u00e7in t\u0131klad\u0131\u011f\u0131m\u0131zda \u00e7al\u0131\u015fan olay i\u015fleyicisi, ger\u00e7ek t\u0131klamay\u0131 temsil ediyor. \u0130kinci butonda ise, ilk butona ba\u011fl\u0131 t\u0131klama olay\u0131n\u0131 tetikliyoruz.<\/p>\n Bir elemente ba\u011fl\u0131 t\u00fcm olay i\u015fleyicilerini \u00e7al\u0131\u015ft\u0131r\u0131r. .trigger() metodu se\u00e7ilen t\u00fcm elementler i\u00e7in bu i\u015flemi yaparken, .triggerHandler() metodu sadece ilk element i\u00e7in yapar.<\/p>\n \u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/eDUdx\/<\/a><\/p>\n ID kullanarak se\u00e7ti\u011fimiz tek bir element i\u00e7in .triggerHandler() metodunu \u00e7al\u0131\u015ft\u0131rm\u0131\u015f olduk.<\/p>\n Bir fonksiyonu al\u0131r, sanki ba\u015fka bir element veya nesne i\u00e7in \u00e7al\u0131\u015f\u0131yormu\u015f gibi ele al\u0131r. \u015e\u00f6yle ki: Test butonuna t\u0131klad\u0131\u011f\u0131m\u0131zda obj nesnesindeki test fonksiyonunu \u00e7al\u0131\u015ft\u0131rm\u0131\u015f oluyoruz.<\/p>\nevent.type<\/h1>\n
\r\n$("a").click(function(event) {\r\n alert(event.type); \/\/ "click"\r\n});\r\n<\/pre>\nevent.namespace<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<button>G\u00f6ster: event.namespace<\/button>\r\n<p><\/p>\r\n\r\n<script>\r\n$("p").bind("test.birseyler", function(event) {\r\n alert( event.namespace );\r\n});\r\n$("button").click(function(event) {\r\n $("p").trigger("test.birseyler");\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.which<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/dR5CM\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<input id="whichkey" value="bir\u015feyler yaz veya t\u0131kla">\r\n<div id="log"><\/div>\r\n<script>$('#whichkey').bind('keydown mousedown',function(e){\r\n $('#log').html(e.type + ': ' + e.which );\r\n}); <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.target<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\nspan, strong, p {\r\n padding: 8px; display: block; border: 1px solid #999; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div id="log"><\/div>\r\n<div>\r\n <p>\r\n <strong><span>TIKLA<\/span><\/strong>\r\n <\/p>\r\n<\/div>\r\n<script>$("body").click(function(event) {\r\n $("#log").html("\u015euraya t\u0131kland\u0131: " + event.target.nodeName);\r\n}); <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.currentTarget<\/h1>\n
JQuery Event Bubbling Nedir?<\/h3>\n
\r\n$("p").click(function(event) {\r\n alert( event.currentTarget === this ); \/\/ true d\u00f6nd\u00fcrecektir.\r\n});\r\n<\/pre>\nevent.timeStamp<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\ndiv { height: 100px; width: 300px; margin: 10px;\r\n background-color: #ffd; overflow: auto; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div>T\u0131kla.<\/div>\r\n<script>\r\nvar last, diff;\r\n$('div').click(function(event) {\r\n if ( last ) {\r\n diff = event.timeStamp - last\r\n $('div').append('son t\u0131klamadan itibaren ge\u00e7en milisaniye: ' + diff + '<br\/>');\r\n } else {\r\n $('div').append('B\u0130r daha t\u0131kla.<br\/>');\r\n }\r\n last = event.timeStamp;\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.result<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/jWAwH\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<button>G\u00f6ster: event.result<\/button>\r\n<p><\/p>\r\n\r\n<script>\r\n$("button").click(function(event) {\r\n return "selam";\r\n});\r\n$("button").click(function(event) {\r\n $("p").html( event.result );\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.relatedTarget<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/seYCF\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div style="height: 100px; border: 1px solid gray;">\r\n <a href="#">Bu yaz\u0131n\u0131n \u00fcst\u00fcne geldikten sonra fareyi a\u015fa\u011f\u0131ya s\u00fcr\u00fckleyiniz<\/a>\r\n<\/div>\r\n\r\n<script>\r\n$("a").mouseout(function(event) {\r\n alert(event.relatedTarget.nodeName); \/\/ "DIV"\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nevent.pageX \/ event.pageY<\/h1>\n
\nevent.pageY: Pencerenin \u00fcst k\u0131sm\u0131na g\u00f6receli olarak farenin konumu
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/kt6UG\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>body {background-color: #eef; }\r\ndiv { padding: 20px; }<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <div id="log"><\/div>\r\n<script>$(document).bind('mousemove',function(e){\r\n $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);\r\n}); <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.data<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<button> 0 <\/button>\r\n<button> 1 <\/button>\r\n<button> 2 <\/button>\r\n<button> 3 <\/button>\r\n<button> 4 <\/button>\r\n\r\n<div id="log"><\/div>\r\n\r\n<script>\r\nvar logDiv = $("#log");\r\n\r\nfor (var i = 0; i < 5; i++) {\r\n $("button").eq(i).on("click", {value: i}, function(event) {\r\n var msgs = [\r\n "button = " + $(this).index(),\r\n "event.data.value = " + event.data.value,\r\n "i = " + i\r\n ];\r\n logDiv.append( msgs.join(", ") + "<br>" );\r\n });\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.delegateTarget<\/h1>\n
\r\n$(".box").on("click", "button", function(event) {\r\n $(event.delegateTarget).css("background-color", "red");\r\n});\r\n<\/pre>\nevent.preventDefault()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<a href="https:\/\/ulviercan.com">ulviercan.com a git<\/a>\r\n<div id="log"><\/div>\r\n\r\n<script>\r\n$("a").click(function(event) {\r\n event.preventDefault();\r\n $('<div\/>')\r\n .append('varsay\u0131lan ' + event.type + ' olay\u0131 engellendi')\r\n .appendTo('#log');\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.isDefaultPrevented()<\/h1>\n
\r\n$("a").click(function(event){\r\n alert( event.isDefaultPrevented() ); \/\/ false uyar\u0131s\u0131 verir\r\n event.preventDefault();\r\n alert( event.isDefaultPrevented() ); \/\/ true uyar\u0131s\u0131 verir\r\n});\r\n<\/pre>\nevent.stopPropagation()<\/h1>\n
\r\n$("p").click(function(event){\r\n event.stopPropagation();\r\n \/\/ bir \u015feyler yap\r\n});\r\n<\/pre>\nevent.isPropagationStopped()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/vyfLV\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <button>bana t\u0131k at<\/button>\r\n <div id="stop-log"><\/div>\r\n\r\n<script>\r\n\r\nfunction propStopped(e) {\r\n var msg = "";\r\n if ( e.isPropagationStopped() ) {\r\n msg = "\u00e7a\u011fr\u0131ld\u0131"\r\n } else {\r\n msg = "\u00e7a\u011fr\u0131lmad\u0131";\r\n }\r\n $("#stop-log").append( "<div>" + msg + "<\/div>" );\r\n}\r\n\r\n$("button").click(function(event) {\r\n propStopped(event);\r\n event.stopPropagation();\r\n propStopped(event);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.stopImmediatePropagation()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\np { height: 30px; width: 150px; background-color: #ccf; }\r\ndiv {height: 30px; width: 150px; background-color: #cfc; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>paragraf<\/p>\r\n<div>k\u0131s\u0131m<\/div>\r\n<script>\r\n$("p").click(function(event){\r\n event.stopImmediatePropagation();\r\n});\r\n$("p").click(function(event){\r\n \/\/ Bu fonksiyon \u00e7al\u0131\u015fmayacakt\u0131r\r\n $(this).css("background-color", "#f00");\r\n});\r\n$("div").click(function(event) {\r\n \/\/ Bu fonksiyon \u00e7al\u0131\u015facakt\u0131r\r\n $(this).css("background-color", "#f00");\r\n});<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nevent.isImmediatePropagationStopped()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <button>bana t\u0131k at<\/button>\r\n <div id="stop-log"><\/div>\r\n\r\n<script>\r\n\r\nfunction immediatePropStopped(e) {\r\n var msg = "";\r\n if ( e.isImmediatePropagationStopped() ) {\r\n msg = "\u00e7a\u011fr\u0131ld\u0131"\r\n } else {\r\n msg = "\u00e7a\u011fr\u0131lmad\u0131";\r\n }\r\n $("#stop-log").append( "<div>" + msg + "<\/div>" );\r\n}\r\n\r\n$("button").click(function(event) {\r\n immediatePropStopped(event);\r\n event.stopImmediatePropagation();\r\n immediatePropStopped(event);\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nFare Olaylar\u0131<\/h1>\n
.click()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n p { color:red; margin:5px; cursor:pointer; }\r\n p:hover { background:yellow; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Birinci Paragraf<\/p>\r\n <p>\u0130kinci Paragraf<\/p>\r\n <p>\u00dc\u00e7\u00fcnc\u00fc Paragraf<\/p>\r\n\r\n <div>Bana t\u0131klarsan b\u00fct\u00fcn p elementleri kapan\u0131r.<\/div>\r\n<script>\r\n\r\n $("p").click(function () {\r\n $(this).slideUp();\r\n });\r\n\r\n $("div").click(function () {\r\n $("p").click();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.dblclick()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n p { color:red; margin:5px; }\r\n p:hover { background:yellow; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Birinci Paragraf<\/p>\r\n <p>\u0130kinci Paragraf<\/p>\r\n <p>\u00dc\u00e7\u00fcnc\u00fc Paragraf<\/p>\r\n\r\n <div>Bana \u00e7ift t\u0131klarsan b\u00fct\u00fcn p elementleri kapan\u0131r.<\/div>\r\n<script>\r\n\r\n $("p").dblclick(function () {\r\n $(this).slideUp();\r\n });\r\n\r\n $("div").dblclick(function () {\r\n $("p").dblclick();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.focusin()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>span {display:none;}<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p><input type="text" \/> <span>focusin ger\u00e7ekle\u015fti<\/span><\/p>\r\n<p><input type="password" \/> <span>focusin ger\u00e7ekle\u015fti<\/span><\/p>\r\n<script>\r\n $("p").focusin(function() {\r\n $(this).find("span").css('display','inline').fadeOut(1000);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.focusout()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n.inputs { float: left; margin-right: 1em; }\r\n.inputs p { margin-top: 0; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="inputs">\r\n <p>\r\n <input type="text" \/><br \/>\r\n <input type="text" \/>\r\n <\/p>\r\n <p>\r\n <input type="password" \/>\r\n <\/p>\r\n<\/div>\r\n<div id="fo">focusout ger\u00e7ekle\u015fti<\/div>\r\n<div id="b">blur ger\u00e7ekle\u015fti<\/div>\r\n\r\n<script>\r\nvar fo = 0, b = 0;\r\n$("p").focusout(function() {\r\n fo++;\r\n $("#fo")\r\n .text("focusout ger\u00e7ekle\u015fti: " + fo + "x");\r\n}).blur(function() {\r\n b++;\r\n $("#b")\r\n .text("blur ger\u00e7ekle\u015fti: " + b + "x");\r\n\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.hover()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n ul { margin-left:20px; color:blue; }\r\n li { cursor:default; }\r\n span { color:red; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <ul>\r\n <li>S\u00fct<\/li>\r\n <li>Ekmek<\/li>\r\n <li class='fade'>K\u00f6fte<\/li>\r\n <li class='fade'>Sucuk<\/li>\r\n <\/ul>\r\n<script>\r\n$("li").hover(\r\n function () {\r\n $(this).append($("<span> ***<\/span>"));\r\n },\r\n function () {\r\n $(this).find("span:last").remove();\r\n }\r\n);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.mousedown() \/ .mouseup()<\/h1>\n
\n.mouseup(): Herhangi bir element i\u00e7in farenin butonuna bast\u0131ktan sonra \u00e7ekme an\u0131n\u0131 tetikler veya o anda olacaklar\u0131 belirler.
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/LdMV8\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Fareyi buraya getirdikten sonra t\u0131klay\u0131p b\u0131rak\u0131n\u0131z.<\/p>\r\n\r\n<script>\r\n $("p").mouseup(function(){\r\n $(this).append('<span style="color:#F00;">Mouse up.<\/span>');\r\n }).mousedown(function(){\r\n $(this).append('<span style="color:#00F;">Mouse down.<\/span>');\r\n });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.mouseenter() \/ .mouseleave()<\/h1>\n
\n.mouseleave(): Farenin se\u00e7ilen elementlerin \u00fczerinden ayr\u0131ld\u0131\u011f\u0131 an\u0131 temsil eder, tetikler, olacaklar\u0131 belirler.<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\ndiv.out {\r\nwidth:40%;\r\nheight:120px;\r\nmargin:0 15px;\r\nbackground-color:#D6EDFC;\r\nfloat:left;\r\n}\r\ndiv.in {\r\nwidth:60%;\r\nheight:60%;\r\nbackground-color:#FFCC00;\r\nmargin:10px auto;\r\n}\r\np {\r\nline-height:1em;\r\nmargin:0;\r\npadding:0;\r\n}\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="out overout"><p>fareyi buraya getirin<\/p><div class="in overout"><p>fareyi buraya getirin<\/p><p>0<\/p><\/div><p>0<\/p><\/div>\r\n\r\n<div class="out enterleave"><p>fareyi buraya getirin<\/p><div class="in enterleave"><p>fareyi buraya getirin<\/p><p>0<\/p><\/div><p>0<\/p><\/div>\r\n\r\n<script>\r\n var i = 0;\r\n $("div.overout").mouseover(function(){\r\n $("p:first",this).text("mouse over");\r\n $("p:last",this).text(++i);\r\n }).mouseout(function(){\r\n $("p:first",this).text("mouse out");\r\n });\r\n\r\n var n = 0;\r\n $("div.enterleave").mouseenter(function(){\r\n $("p:first",this).text("mouse enter");\r\n $("p:last",this).text(++n);\r\n }).mouseleave(function(){\r\n $("p:first",this).text("mouse leave");\r\n });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.mousemove()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n div { width:220px; height:170px; margin: 10px 50px 10px 10px;\r\n background:yellow; border:2px groove; float:right; }\r\n p { margin:0; margin-left:10px; color:red; width:220px;\r\n height:120px; padding-top:70px;\r\n float:left; font-size:14px; }\r\n span { display:block; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>\r\n <span>Fareyi, kutunun \u00fczerinde hareket ettirin.<\/span>\r\n <span> <\/span>\r\n <\/p>\r\n\r\n <div><\/div>\r\n<script>\r\n $("div").mousemove(function(e){\r\n var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";\r\n var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";\r\n $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);\r\n $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords);\r\n });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.mouseover() \/ .mouseout()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\ndiv.out { width:40%; height:120px; margin:0 15px;\r\n background-color:#D6EDFC; float:left; }\r\ndiv.in { width:60%; height:60%;\r\n background-color:#FFCC00; margin:10px auto; }\r\np { line-height:1em; margin:0; padding:0; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div class="out overout">\r\n <span>fareyi buraya getirin<\/span>\r\n <div class="in">\r\n <\/div>\r\n<\/div>\r\n\r\n<div class="out enterleave">\r\n <span>fareyi buraya getirin<\/span>\r\n <div class="in">\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n var i = 0;\r\n $("div.overout").mouseover(function() {\r\n i += 1;\r\n $(this).find("span").text( "mouse over x " + i );\r\n }).mouseout(function(){\r\n $(this).find("span").text("mouse out ");\r\n });\r\n\r\n var n = 0;\r\n $("div.enterleave").mouseenter(function() {\r\n n += 1;\r\n $(this).find("span").text( "mouse enter x " + n );\r\n }).mouseleave(function() {\r\n $(this).find("span").text("mouse leave");\r\n });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.toggle()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n ul { margin:10px; list-style:inside circle; font-weight:bold; }\r\n li { cursor:pointer; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <ul>\r\n <li>Ma\u011fazaya git<\/li>\r\n <li>\u00d6\u011flen yeme\u011fini al<\/li>\r\n <li>Eve d\u00f6n<\/li>\r\n\r\n <li>Ko\u015fuya \u00e7\u0131k<\/li>\r\n <\/ul>\r\n<script>\r\n $("li").toggle(\r\n function () {\r\n $(this).css({"list-style-type":"disc", "color":"blue"});\r\n },\r\n function () {\r\n $(this).css({"list-style-type":"disc", "color":"red"});\r\n },\r\n function () {\r\n $(this).css({"list-style-type":"", "color":""});\r\n }\r\n );\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nKlavye Olaylar\u0131<\/h1>\n
.keydown()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/Yt3XB\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <input type="text">\r\n\r\n<script>\r\n$("input").keydown(function(){\r\n $("input").css("background-color","red");\r\n});\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.keyup()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/ak4UA\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <input type="text">\r\n\r\n<script>\r\n$("input").keyup(function(){\r\n $("input").css("background-color","red");\r\n});\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.keypress()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <textarea cols="45" rows="15" id="yorum"><\/textarea>\r\n\r\n <script>\r\n $('#yorum').keypress(function(event){\r\n if (event.keyCode == 10 || event.keyCode == 13)\r\n event.preventDefault();\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nForm Olaylar\u0131<\/h1>\n
.blur()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/p6jM3\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n.inputs { float: left; margin-right: 1em; }\r\n.inputs p { margin-top: 0; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <form>\r\n <input id="hedef" type="text" value="Alan 1" \/>\r\n <input type="text" value="Alan 2" \/>\r\n <\/form>\r\n\r\n <script>\r\n $('#hedef').blur(function() {\r\n alert('.blur() olay\u0131.');\r\n });\r\n <\/script>\r\n\r\n <\/body>\r\n<\/html>\r\n\u200b\r\n<\/pre>\n.change()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/rGYZR\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n\r\n div { color:red; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <select name="sweets" multiple="multiple">\r\n <option>\u00c7ikolata<\/option>\r\n <option selected="selected">\u015eeker<\/option>\r\n\r\n <option>Puf<\/option>\r\n <option selected="selected">Karemel<\/option>\r\n <option>Kurabiye<\/option>\r\n\r\n <\/select>\r\n <div><\/div>\r\n<script>\r\n $("select").change(function () {\r\n var str = "";\r\n $("select option:selected").each(function () {\r\n str += $(this).text() + " ";\r\n });\r\n $("div").text(str);\r\n })\r\n .change();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.focus()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>span {display:none;}<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p><input type="text" \/> <span>focus olay\u0131<\/span><\/p>\r\n\r\n<p><input type="password" \/> <span>focus olay\u0131<\/span><\/p>\r\n<script>\r\n $("input").focus(function () {\r\n $(this).next("span").css('display','inline').fadeOut(1000);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.select()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/tvWpe\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n p { color:blue; }\r\n div { color:red; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <input type="text" value="Baz\u0131 yaz\u0131lar" \/>\r\n <input type="text" value="Beni l\u00fctfen se\u00e7iniz." \/>\r\n\r\n <div><\/div>\r\n<script>\r\n $(":input").select( function () {\r\n $("div").text("Bir \u015feyler se\u00e7ildi").show().fadeOut(1000);\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.submit()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n\r\n p { margin:0; color:blue; }\r\n div,p { margin-left:10px; }\r\n span { color:red; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>\u0130nputa 'do\u011fru' yaz\u0131n\u0131z.<\/p>\r\n <form action="javascript:alert('ba\u015far\u0131l\u0131!');">\r\n <div>\r\n <input type="text" \/>\r\n\r\n <input type="submit" \/>\r\n <\/div>\r\n <\/form>\r\n <span><\/span>\r\n<script>\r\n\r\n $("form").submit(function() {\r\n if ($("input:first").val() == "do\u011fru") {\r\n $("span").text("Do\u011fruland\u0131...").show();\r\n return true;\r\n }\r\n $("span").text("Do\u011frulanmad\u0131!").show().fadeOut(1000);\r\n return false;\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nD\u00f6k\u00fcman Y\u00fcklenme Olaylar\u0131<\/h1>\n
.load()<\/h1>\n
\r\n$('img.userIcon').load(function(){\r\n if($(this).height() > 100) {\r\n $(this).addClass('buyuk_resim');\r\n }\r\n});\r\n<\/pre>\n.ready()<\/h1>\n
\r\n$(document).ready(function() {\r\n \/\/ D\u00f6k\u00fcman\u0131m\u0131z haz\u0131r oldu\u011funda bu k\u0131s\u0131m \u00e7al\u0131\u015f\u0131r.\r\n});\r\n\r\njQuery(document).ready(function($) {\r\n \/\/ D\u00f6k\u00fcman\u0131m\u0131z haz\u0131r oldu\u011funda bu k\u0131s\u0131m \u00e7al\u0131\u015f\u0131r. $ i\u015fareti yerine jQuery kulland\u0131k.\r\n});\r\n\r\n$(function() {\r\n \/\/ D\u00f6k\u00fcman\u0131m\u0131z haz\u0131r oldu\u011funda bu k\u0131s\u0131m \u00e7al\u0131\u015f\u0131r.\r\n});\r\n<\/pre>\n.unload()<\/h1>\n
\nA\u015fa\u011f\u0131daki \u00f6rnek kod, pencere kapan\u0131rken ekrana “Ho\u015f\u00e7akal!” yazan uyar\u0131 kutusu getiriyor.<\/p>\n\r\n$(window).unload( function () { alert("Ho\u015f\u00e7akal!"); } );\r\n<\/pre>\nTaray\u0131c\u0131 Olaylar\u0131<\/h1>\n
.error()<\/h1>\n
\r\n$("img").error(function(){\r\n $(this).hide();\r\n }).attr("src", "missing.png");\r\n<\/pre>\n.resize()<\/h1>\n
\r\n$(window).resize(function() {\r\n $('body').prepend('<div>' + $(window).width() + '<\/div>');\r\n});\r\n<\/pre>\n.scroll()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n div { color:blue; }\r\n p { color:green; }\r\n span { color:red; display:none; }\r\n\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <div>Scroll yapmay\u0131 dene.<\/div>\r\n <p>Paragraf- <span>Scroll oldu!<\/span><\/p>\r\n<script>\r\n $("p").clone().appendTo(document.body);\r\n $("p").clone().appendTo(document.body);\r\n $("p").clone().appendTo(document.body);\r\n $("p").clone().appendTo(document.body);\r\n $("p").clone().appendTo(document.body);\r\n $("p").clone().appendTo(document.body);\r\n $(window).scroll(function () {\r\n $("span").css("display", "inline").fadeOut("slow");\r\n });\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\nOlay \u0130\u015fleyicisi Eklentisi<\/h1>\n
.bind()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\np { background:yellow; font-weight:bold; cursor:pointer;\r\npadding:5px; }\r\np.over { background: #ccc; }\r\nspan { color:red; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Buraya tek veya \u00e7ift t\u0131klay\u0131n\u0131z.<\/p>\r\n<span><\/span>\r\n<script>\r\n$("p").bind("click", function(event){\r\nvar str = "( " + event.pageX + ", " + event.pageY + " )";\r\n$("span").text("T\u0131kland\u0131 " + str);\r\n});\r\n$("p").bind("dblclick", function(){\r\n$("span").text("\u00c7ift t\u0131kland\u0131 " + this.nodeName);\r\n});\r\n$("p").bind("mouseenter mouseleave", function(event){\r\n$(this).toggleClass("over");\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.unbind()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\nbutton { margin:5px; }\r\nbutton#theone { color:red; background:yellow; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button id="theone">Bir\u015fey yapmaz...<\/button>\r\n<button id="bind">Bind Et<\/button>\r\n<button id="unbind">Unbind Et<\/button>\r\n\r\n<div style="display:none;">T\u0131kla!<\/div>\r\n<script>\r\n\r\nfunction aClick() {\r\n$("div").show().fadeOut("slow");\r\n}\r\n$("#bind").click(function () {\r\n\r\n$("#theone").click(aClick)\r\n .text("T\u0131klanabilir!");\r\n});\r\n$("#unbind").click(function () {\r\n$("#theone").unbind('click', aClick)\r\n .text("Bir\u015fey yapmaz...");\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.live()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n p { background:yellow; font-weight:bold; cursor:pointer;\r\n padding:5px; }\r\n p.over { background: #ccc; }\r\n span { color:red; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Bana t\u0131kla!<\/p>\r\n\r\n <span><\/span>\r\n<script>\r\n$("p").live("click", function(){\r\n $(this).after("<p>Ba\u015fka paragraf!<\/p>");\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.die()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\nbutton { margin:5px; }\r\nbutton#theone { color:red; background:yellow; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button id="theone">Bir\u015fey yapmaz...<\/button>\r\n<button id="bind">Bind Et<\/button>\r\n<button id="unbind">Unbind Et<\/button>\r\n\r\n<div style="display:none;">T\u0131kla!<\/div>\r\n<script>\r\n\r\nfunction aClick() {\r\n $("div").show().fadeOut("slow");\r\n}\r\n$("#bind").click(function () {\r\n $("#theone").live("click", aClick)\r\n .text("T\u0131klanabilir!");\r\n});\r\n$("#unbind").click(function () {\r\n $("#theone").die("click", aClick)\r\n .text("Bir\u015fey yapmaz...");\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.on()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/BYbUe\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n.test { color: #000; padding: .5em; border: 1px solid #444; }\r\n.aktif{ color: #900;}\r\n.icerde{ background-color: blue; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <div class="test">test div<\/div>\r\n<script>$("div.test").on({\r\n click: function(){\r\n $(this).toggleClass("aktif");\r\n },\r\n mouseenter: function(){\r\n $(this).addClass("icerde");\r\n },\r\n mouseleave: function(){\r\n $(this).removeClass("icerde");\r\n }\r\n});<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.off()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\nbutton { margin:5px; }\r\nbutton#theone { color:red; background:yellow; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button id="theone">Bir\u015fey yapmaz...<\/button>\r\n<button id="bind">T\u0131k Ekle<\/button>\r\n<button id="unbind">T\u0131k Sil<\/button>\r\n<div style="display:none;">T\u0131k !<\/div>\r\n<script>\r\nfunction aClick() {\r\n $("div").show().fadeOut("slow");\r\n}\r\n$("#bind").click(function () {\r\n $("body").on("click", "#theone", aClick)\r\n .find("#theone").text("T\u0131klanabilir!");\r\n});\r\n$("#unbind").click(function () {\r\n $("body").off("click", "#theone", aClick)\r\n .find("#theone").text("Bir\u015fey yapmaz...");\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.delegate()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n p { background:yellow; font-weight:bold; cursor:pointer;\r\n padding:5px; }\r\n p.over { background: #ccc; }\r\n span { color:red; }\r\n <\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <p>Bana t\u0131ka!<\/p>\r\n\r\n <span><\/span>\r\n<script>\r\n $("body").delegate("p", "click", function(){\r\n $(this).after("<p>Ba\u015fka paragraf!<\/p>");\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.undelegate()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\nbutton { margin:5px; }\r\nbutton#theone { color:red; background:yellow; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button id="theone">Bir\u015fey Yapmaz...<\/button>\r\n<button id="bind">Bind Et<\/button>\r\n<button id="unbind">Unbind Et<\/button>\r\n<div style="display:none;">T\u0131k!<\/div>\r\n<script>\r\nfunction aClick() {\r\n $("div").show().fadeOut("slow");\r\n}\r\n$("#bind").click(function () {\r\n $("body").delegate("#theone", "click", aClick)\r\n .find("#theone").text("T\u0131klanabilir!");\r\n});\r\n$("#unbind").click(function () {\r\n $("body").undelegate("#theone", "click", aClick)\r\n .find("#theone").text("Bir\u015fey Yapmaz...");\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.one()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\ndiv { width:60px; height:60px; margin:5px; float:left;\r\nbackground:green; border:10px outset;\r\ncursor:pointer; }\r\np { color:red; margin:0; clear:left; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n<div><\/div>\r\n<div><\/div>\r\n<div><\/div>\r\n<div><\/div>\r\n\r\n<p>Ye\u015fil kutulara t\u0131kla...<\/p>\r\n\r\n<script>\r\nvar n = 0;\r\n$("div").one("click", function() {\r\n var index = $("div").index(this);\r\n $(this).css({\r\n borderStyle:"inset",\r\n cursor:"auto"\r\n });\r\n $("p").text("Kutunun indeks numaras\u0131 " + index +\r\n " Toplam T\u0131k: " + ++n );\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.trigger()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/qykj3\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <style>\r\n\r\nbutton { margin:10px; }\r\ndiv { color:blue; font-weight:bold; }\r\nspan { color:red; }\r\n<\/style>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button>Buton #1<\/button>\r\n<button>Buton #2<\/button>\r\n<div><span>0<\/span> buton #1 kere t\u0131kland\u0131.<\/div>\r\n\r\n<div><span>0<\/span> buton #2 kere t\u0131kland\u0131.<\/div>\r\n<script>\r\n$("button:first").click(function () {\r\nupdate($("span:first"));\r\n});\r\n$("button:last").click(function () {\r\n$("button:first").trigger('click');\r\n\r\nupdate($("span:last"));\r\n});\r\n\r\nfunction update(j) {\r\nvar n = parseInt(j.text(), 10);\r\nj.text(n + 1);\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n.triggerHandler()<\/h1>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n <button id="old">.trigger("focus")<\/button>\r\n<button id="new">.triggerHandler("focus")<\/button><br\/><br\/>\r\n\r\n<input type="text" value="Odaklan\u0131lacak"\/>\r\n<script>\r\n\r\n$("#old").click(function(){\r\n$("input").trigger("focus");\r\n});\r\n$("#new").click(function(){\r\n$("input").triggerHandler("focus");\r\n});\r\n$("input").focus(function(){\r\n$("<span>Odaklan\u0131ld\u0131!<\/span>").appendTo("body").fadeOut(1000);\r\n});\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\njQuery.proxy()<\/h1>\n
\n\u00d6rnek uygulama -> https:\/\/jsfiddle.net\/icntfan\/LPm8k\/<\/a><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="https:\/\/code.jquery.com\/jquery-latest.js"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <p><button id="test">Test<\/button><\/p>\r\n <p id="log"><\/p>\r\n\r\n<script>\r\n var obj = {\r\n name: "Ulvi",\r\n test: function() {\r\n $("#log").append( this.name );\r\n $("#test").unbind("click", obj.test);\r\n }\r\n };\r\n\r\n $("#test").click( jQuery.proxy( obj, "test" ) );\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\u200b\r\n<\/pre>\n