JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<input type="text" name="btn" id="btn" value=""/><br>
<input type="button" name="a" id="a" value="unbind click"/>
<input type="button" name="b" id="b" value="unbind blur"/>
<input type="button" name="c" id="c" value="reset Events"/>

JavaScript

var Obj = $('#btn');

$('#a').on('click',function(){ $('#btn').off("click"); 	});
$('#b').on('click',function(){ $('#btn').off("blur");	});

$('#c').on('click',function(){
	//Get number of bind events from a elements.
	var obj = $._data($("#btn").get(0), "events");
	var size = Object.size(obj);
	if(size == 0){	allEvent();	}
    if(size == 1){
        for(property in obj){
            if(property == "click")	{bindEvents.blur();	}
            if(property == "blur")	{bindEvents.click();}
        }
    }   
});

Object.size = function(obj) {
    var size = 0, key;
    for (key in obj) {
        if (obj.hasOwnProperty(key)) size++;
    }
    return size;
};

var bindEvents = {
    click : function()	{	Obj.bind("click",function(){console.log("click");});	},
    blur  : function()	{	Obj.bind("blur",function(){console.log("blur");});		}
};

var allEvent = function(){ bindEvents.click(); bindEvents.blur(); };
allEvent();