一、元素事件的绑定
为按钮绑定鼠标进入,鼠标离开,点击事件
第一种方法
$("#btn").mouseenter(function () {
$(this).css("backgroundColor","red");
});
$("#btn").mouseleave(function () {
$(this).css("backgroundColor","blue");
});
$("#btn").click(function () {
alert("你注定是一个与众不同的男人");
});
第二种方式:链式编程
$("#btn").mouseenter(function () {
$(this).css("backgroundColor","red");
}).mouseleave(function () {
$(this).css("backgroundColor","blue");
}).click(function () {
alert("你注定是一个与众不同的男人");
});
第三种方式:bind方法绑定事件
$("#btn").bind("mouseenter",function () {
$(this).css("backgroundColor","red");
});
$("#btn").bind("mouseleave",function () {
$(this).css("backgroundColor","blue");
});
$("#btn").bind("click",function () {
alert("你依旧这么的出众");
});
第四种写法:链式编程
$("#btn").bind("mouseenter",function () {
$(this).css("backgroundColor","red");
}).bind("mouseleave",function () {
$(this).css("backgroundColor","blue");
}).bind("click",function () {
alert("你依旧这么的出众");
});
第五种写法:使用键值对的方式绑定事件
$("#btn").bind({
"click":function () {
alert("你依旧这么的出众");
},"mouseenter":function () {
$(this).css("backgroundColor","red");
},"mouseleave":function () {
$(this).css("backgroundColor","blue");
}});
为元素绑定多个相同的事件
- bind方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个
第一种方式,可以
$(function () {
$("#btn").click(function () {
console.log("就当他从来都没有来过");
});
$("#btn").click(function () {
console.log("如果有一天");
});
});
第二种方式,可以
$(function () {
$(