JQuery六种绑定事件方式_jquery编程式事件绑定-CSDN博客

本文链接：https://blog.csdn.net/qq_41408088/article/details/105694052

第一种写法

html code:<input type="button" value="显示效果" id="btn_effect">

$(function(){
	$("#btn_effect").mouseenter(function(){
		$(this).css("background-color","green");
	});
	
	$("#btn_effect").mouseleave(function(){
		$(this).css("background-color","red");
	});
});

第二种写法

html code:<input type="button" value="显示效果" id="btn_effect">

$(function(){
	$("#btn_effect").mouseenter(function(){
		$(this).css("background-color","green");
	}).mouseleave(function(){
		$(this).css("background-color","red");
	});
});

第三种写法

html code:<input type="button" value="显示效果" id="btn_effect">

$(function(){
	$("#btn_effect").bind("mouseenter",function(){
		$(this).css("background-color","green");
	});
	
	$("#btn_effect").bind("mouseenter",function(){
		$(this).css("background-color","red");
	});
});

第四种写法

html code:<input type="button" value="显示效果" id="btn_effect">

$(function(){
	$("#btn_effect").bind("mouseenter",function(){
		$(this).css("background-color","green");
	}).bind("mouseenter",function(){
		$(this).css("background-color","red");
	});
});

第五种写法

html code:<input type="button" value="显示效果" id="btn_effect">

$(function(){
	$("#btn_effect").bind({"mouseenter":function(){
		$(this).css("background-color","green");
	},"mouseleave":function(){
		$(this).css("background-color","red");
	}});
});

第六种写法

html code:<div id="dv"><input type="button" value="显示效果" id="btn_effect"></div>

$(function(){
	$("#dv").delegate("#btn_effect","click",function(){
		console.log("btn按钮被点击了");
	});
});