jqの4種類のバインドイベントの方法

参考ブログ:https://blog.csdn.net/ditto_zhou/article/details/62042670
一、jqueryのいくつかのイベントバインド方式:bind()、on()、live()、delegate()
1.bind()関数は既存の要素に対してのみイベントの設定を行うことができる.しかしlive(),on(),delegate()はいずれも将来新しく要素を追加するイベント設定をサポートする.
2.bind()関数はjquery 1.7バージョンは以前は比較的に推奨されていたが、1.7バージョンが出た後、公式はbind()を推奨せず、代替関数はon()であり、これも1.7バージョンで新しく追加された関数であり、同様にlive()関数の代わりに使用することができ、live()関数は1.9バージョンで削除された.
3.live()関数とdelegate()関数は似ていますが、live()関数は実行速度、柔軟性、CSSセレクタのサポートにおいてdelegate()より劣っています.
4.bind()はJqueryのすべてのバージョンをサポートします.live()はjquery 1をサポートする.9-;delegate()はjquery 1をサポートする.4.2+;on()はjquery 1をサポートする.7+;
二、on()の使用方法を推奨する
1.onメソッドは、ページ要素に追加されたイベントを動的にバインドすることができる.
2 .on方法は効率が高い.
3.onの使用
--複数のイベントに1つの関数をバインド

//          
	$(function(){
		$("p").on('mouseover mouseout',function(){
			alert(1111);
		});
		
	});

--複数のイベントが複数の関数をバインド

	//           
	$(function(){
		$("a").on({
			mouseover:function(){$("t1").css('background-color','red');},
			mouseout:function(){$("t2").css('background-color','yellow');},
			click:function(){$("t3").css('background-color','blue');}
		});
		
	});

--カスタムイベントのバインド

$(document).ready(function(){
	$("p").on("myevent", function(event, showName){
		$(this).text(showName + "! What a beautiful name!").show();
	});
	$("button").click(function(){
		$("p").trigger("myevent",["helloworld"]);
	});
});

--未作成の要素に使用

    //         
	$(document).ready(function(){
	    $("div").on("click","p",function(){
	        $(this).slideToggle();
	    });
        $("button").click(function(){
	        $("
This is a new paragraph.
").insertAfter("button");
        );
	});

--onメソッドバインドのイベントを削除する必要がある場合

//  on             off  
	$(document).ready(function(){	
	$("p").on("click",function(){
		$(this).css("background-color","pink");
	});	
	$("button").click(function(){
		$("p").off('click');
		});	
	});