JSFiddle - React, Tailwind, and code Playground

by sedran

HTML

<p>
    <button id="aliGel">Ali Gel</button>
    <button id="aliGit">Ali Git</button>
</p>
<p>
    <button id="veliGel">Veli Gel</button>
    <button id="veliGit">Veli Git</button>
</p>
<p>
    <button id="removeAli">Ali Eventlerini Sil</button>
    <button id="removeVeli">Veli Eventlerini Sil</button>
</p>
<p>
    <button id="removeGel">Gel Eventlerini Sil</button>
    <button id="removeGit">Git Eventlerini Sil</button>
</p>
<p>
    <button id="doit">Do It, Click Me</button>
</p>
 
<p>
    <textarea disabled="disabled" rows="10" cols="35"></textarea>
</p>

<h1>Açıklama</h1>
<p>Ali Gel, Ali Git, Veli Gel, ve Veli Git adındaki butonlara istediğiniz sırayla basın.</p>
<p>Daha sonra Do It, Click Me yazan butona basın ve textarea'da neler yazdığına bakın.</p>
<p>Daha sonra event silen butonlardan birine basın ve tekrar Do It, Click Me butonuna basın</p>
<p>textarea'da yazan metnin nasıl değiştiğine bakın.</p>

JavaScript

$(document).ready(function() {
    // Bu fonksiyon textarea'nın içeriğini temizler
    function clearTextarea() {
        $("textarea").val("");
    }
     
    // Bu fonksiyon textarea objesine metin ekler
    function append(str) {
        $("textarea").val($("textarea").val() + str + "\n");
    }
    
    $("#doit").bind("click", clearTextarea);
    
    $("#aliGel").click(function () {
        // Burada event listenerımızı
        // ali ve gel adında iki adet isim uzayına ekledik
        $("#doit").bind("click.ali.gel", function() {
            append("Ali Gel");
        });
    });
    
    $("#aliGit").click(function () {
        // Burada event listenerımızı
        // ali ve git adında iki adet isim uzayına ekledik
        $("#doit").bind("click.ali.git", function() {
            append("Ali Git");
        });
    });
    
    $("#veliGel").click(function () {
        // Burada event listenerımızı
        // veli ve gel adında iki adet isim uzayına ekledik
        $("#doit").bind("click.veli.gel", function() {
            append("Veli Gel");
        });
    });
    
    $("#veliGit").click(function () {
        // Burada event listenerımızı
        // veli ve git adında iki adet isim uzayına ekledik
        $("#doit").bind("click.veli.git", function() {
            append("Veli Git");
        });
    });
    
    $("#removeAli").click(function () {
        // Burada ali isim uzayındaki tüm 
        // click event listenerlarını temizliyoruz.
        $("#doit").unbind("click.ali");
    });
    
    $("#removeVeli").click(function () {
        // Burada veli isim uzayındaki tüm 
        // click event listenerlarını temizliyoruz.
        $("#doit").unbind("click.veli");
    });
    
    $("#removeGel").click(function () {
        // Burada gel isim uzayındaki tüm 
        // click event listenerlarını temizliyoruz.
        $("#doit").unbind("click.gel");
    });
    
    $("#removeGit").click(function () {
        // Burada git isim uzayındaki tüm 
       ...