标签：jQuery function 绑定 事件处理 bind 元素 backgroundColor click css
为元素绑定事件的几个方法
点击按钮绑定点击事件，鼠标移入事件，鼠标移出事件
首先给一个按钮做点击事件，为盒子绑定鼠标点击事件和鼠标移入移出事件。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>键盘按下换背景色</title>
<style>
button{
width:100px;
height:30px;
background:orange;
border:none;
}
div{
margin-top:10px;
width:300px;
height:200px;
background:black;
}
</style>
</head>
<body>
<button>绑定事件</button>
<div></div>
</body>
</html>
效果图：
解析：给一个绑定事件的按钮，在没有点击这个按钮之前，下面的盒子不会有任何反应。再给一宽为300像素，高为200像素，背景颜色为黑色的盒子。
代码：
<script src="./jquery-1.12.2.js"></script>
解析：用jQuery的方法来写代码，需要引入jQuery插件。引入之后就可以开始为元素绑定点击事件了。
第一种方法
代码：
<script>
$("button").click(function(){
$("div").click(function(){
$(this).css("backgroundColor","blue");
})
$("div").mouseenter(function(){
$(this).css("backgroundColor","yellow");
})
$("div").mouseleave(function(){
$(this).css("backgroundColor","pink");
})
})
</script>
解析：这是最基础的方法，直接写需要绑定的事件和事件处理函数。当点击绑定事件的按钮之后，就会给盒子绑定鼠标单击盒子时背景颜色会变成蓝色，鼠标移入盒子时背景颜色会变成黄色，鼠标移出盒子时背景颜色变成粉色
第二种方法
代码：
<script>
$("button").click(function(){
$("div").click(function(){
$(this).css("backgroundColor","blue");
}).mouseenter(function(){
$(this).css("backgroundColor","yellow");
}).mouseleave(function(){
$(this).css("backgroundColor","pink");
})
})
</script>
解析:这是一个普通链式方法，方法：.事件名字(事件处理函数).事件名字(事件处理函数).事件名字(事件处理函数)。
第三种方法
代码：
<script>
$("button").click(function(){
$("div").bind("click",function(){
$(this).css("backgroundColor","blue")
})
$("div").bind("mouseenter",function(){
$(this).css("backgroundColor","yellow")
)
$("div").bind("mouseleave",function(){
$(this).css("backgroundColor","pink")
})
})
</script>
解析：这是bind方法，方法：bind(“事件名字”，事件处理函数)；
第四种方法
代码：
<script>
$("button").click(function(){
$("div").bind("click",function(){
$(this).css("backgroundColor","blue")
}).bind("mouseenter",function(){
$(this).css("backgroundColor","yellow")
}).bind("mouseleave",function(){
$(this).css("backgroundColor","pink")
})
})
</script>
解析：这是bind链式方法，方法：.bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数). bind(“事件名字”，事件处理函数)
第五种方法
代码：
<script>
$("button").click(function(){
$("div").bind({"click":function(){
$(this).css("backgroundColor","blue");
},"mouseenter":function(){
$(this).css("backgroundColor","yellow");
},"mouseleave":function(){
$(this).css("backgroundColor","pink");
}})
})
</script>
解析：这是键值对方法，方法.bind({“事件函数”：事件处理函数，“事件函数”：事件处理函数，“事件函数”：事件处理函数})
第六种方法
代码：
<script>
$("button").click(function(){
$("#dv1").delegate("#dv2","click",function(){
$(this).css("backgroundColor","blue");
})
$("#dv1").delegate("#dv2","mouseenter",function(){
$(this).css("backgroundColor","yellow");
})
$("#dv1").delegate("#dv2","mouseleave",function(){
$(this).css("backgroundColor","pink");
})
})
</script>
解析：这个方法跟前面的几个方法有些不一样，这个是给父元素绑定事件，方法：父元素.delegate(“事件名字”，“子元素”，事件处理函数)。
第七种方法
代码：
<script>
$("button").click(function(){
$("#dv1").on("click","#dv2",function(){
$(this).css("backgroundColor","blue");
})
$("#dv1").on("mouseenter","#dv2",function(){
$(this).css("backgroundColor","yellow");
})
$("#dv1").on("mouseleave","#dv2",function(){
$(this).css("backgroundColor","pink");
})
})
</script>
解析：这个方法跟delegate()方法差不多，就是子元素和事件名字对调了位置，方法：on(“子元素”，“事件名字”，事件处理函数)。
每个方法最后的效果图：
鼠标单击时
鼠标移入时
鼠标移出时
————————————————
版权声明：本文为CSDN博主「是个憨憨吖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chenqiuqian/article/details/126023368
标签：jQuery,function,绑定,事件处理,bind,元素,backgroundColor,click,css 来源： https://www.cnblogs.com/stdxxd/p/16530385.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。