开发者学堂课程【jQuery 开发教程：jQuery_ 绑定事件处理器上】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4287
jQuery_ 绑定事件处理器上
一、.bind()
.bind()：为元素绑定一个事件处理器。
（1）绑定事件 .bind()，现在已经不推荐使用
// 引用 jQuery
按钮
</span></code></div><div data-lake-id="eb5641a35dd75d0650ba579fb0df7137" style="text-align: left;"><code><span class="lake-fontsize-1515">$(function(){</span></code></div><div data-lake-id="4fa2707f150fa99b87bdd5e2a62abb95" style="text-align: left;"><span class="lake-fontsize-1515">// 可以有第三个参数，第三个参数为布尔类型，为 false 时是为阻止冒泡事件、默认事件，为 true 时则为冒泡事件。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="7362122d3f4bb7056b9b123cc37f1484" style="text-align: left;"><span class="lake-fontsize-1515">// 默认事件是指浏览器会有一个自动的事件处理，比如说a链接，点击将会跳转。</span><span class="lake-fontsize-14"></span></div><div data-lake-id="e8fa57b2033db1705d6102b57f3a6943" style="text-align: left;"><code><span class="lake-fontsize-1515">$("#btn").bind("click",function(){</span></code></div><div data-lake-id="8ec1b76368e9a7e0c4dae628f1c42653" style="text-align: left;"><code><span class="lake-fontsize-1515">alert(haha);</span></code></div><div data-lake-id="8e848cd9016ee50090c8c6a915ad927c" style="text-align: left;"><code><span class="lake-fontsize-1515">});</span></code></div><div data-lake-id="7c6800e58d7b300c85f03a14cb944412" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="08438849eed7a8e12c50791ee435bb9a" style="text-align: left;"><code><span class="lake-fontsize-1515">
效果截图：
点击将会跳出窗口。
（1）可以绑定两个事件，而且互相不会覆盖
鼠标略过或点击都会触发。
按钮
</span></code></div><div data-lake-id="4be678f6caf66bdb684c31b8a2422a3f" style="text-align: left;"><code><span class="lake-fontsize-1515">$(function(){</span></code></div><div data-lake-id="83a42ed21fc1c0b8b84d433f3ef5ff9f" style="text-align: left;"><code><span class="lake-fontsize-1515">$("#btn").bind("click mousever",function(){</span></code></div><div data-lake-id="db07a720b39fc0d1a8edaefaeb758b8d" style="text-align: left;"><code><span class="lake-fontsize-1515">alert(haha);</span></code></div><div data-lake-id="a1e11465c4186e7a70460449b629d5e9" style="text-align: left;"><code><span class="lake-fontsize-1515">});</span></code></div><div data-lake-id="d9e30e257857222b0a838495de10d823" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="2e3dec5f3caec70a2246771c4ef148b3" style="text-align: left;"><code><span class="lake-fontsize-1515">
效果截图：
鼠标略过会弹出一个弹出框，点击也会弹出弹出框。
）让每个事件弹出不一样的内容
按钮
</span></code></div><div data-lake-id="11c1fe357b3737cb0392f7fc6b770dc6" style="text-align: left;"><code><span class="lake-fontsize-1515">$(function(){</span></code></div><div data-lake-id="4055b807eb0f4325f6d56600c337813b" style="text-align: left;"><code><span class="lake-fontsize-1515">$("#btn").bind({</span></code></div><div data-lake-id="0a8de171a554895cdfceb7367073ccbe" style="text-align: left;"><code><span class="lake-fontsize-1515">click:function(){</span></code></div><div data-lake-id="ea723f06fc874f260ccd764312ac3f51" style="text-align: left;"><code><span class="lake-fontsize-1515">alert("click");</span></code></div><div data-lake-id="23ef6d57c1e2d73b2ebefa47f473630c" style="text-align: left;"><code><span class="lake-fontsize-1515">},</span></code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515">// 对象之间要用逗号分开</span></code></div><div data-lake-id="4d34f21c26771b917c78f5e02de588e8" style="text-align: left;"><code><span class="lake-fontsize-1515">mouseover:function(){</span></code></div><div data-lake-id="6b6d9e34ac08ce0a33f7ee8a13145b40" style="text-align: left;"><code><span class="lake-fontsize-1515">alert("mouseover");</span></code></div><div data-lake-id="65dc7181082e253eb0f745b2835694ac" style="text-align: left;"><code><span class="lake-fontsize-1515">},</span></code></div><div data-lake-id="49c970ddc9ab13f3e3d57dfeac4a5c1a" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="ef1935c1bd91db42c084ab09150663ec" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="7766f5337d2a7a4a0cb76c9411ad0ca9" style="text-align: left;"><code><span class="lake-fontsize-1515">
效果截图：
鼠标滑过
鼠标点击
pbtn实现按钮效果
转到百度的页面，当鼠标在按钮滑进滑出会看到不同的效果，可以用 jQuery 实现这样的效果。
代码一
</span></code></div><div data-lake-id="4a998cd29d31306c104584d8d7df4bfb" style="text-align: left;"><code><span class="lake-fontsize-1515">p{</span></code></div><div data-lake-id="ed55bfd6801063af0cf73d3696519a06" style="text-align: left;"><code><span class="lake-fontsize-1515">width: 100px;</span></code></div><div data-lake-id="af663be22ffbf5710aa0aef55355d2dd" style="text-align: left;"><code><span class="lake-fontsize-1515">height: 50px;</span></code></div><div data-lake-id="641ca2d261245a6ad607a98c7dfbeed0" style="text-align: left;"><code><span class="lake-fontsize-1515">background-color: darkgreen;</span></code></div><div data-lake-id="4488472a2fb6b40c2880539efab8119c" style="text-align: left;"><code><span class="lake-fontsize-1515">border-radius: 5px;</span></code></div><div data-lake-id="2e720549eca0254e468c86855ac26bf9" style="text-align: left;"><code><span class="lake-fontsize-1515">text-align: center;</span></code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515">// 文字水平居中</span></code></div><div data-lake-id="16c44282a1c676b711cd41b7254a0e7f" style="text-align: left;"><code><span class="lake-fontsize-1515">line-height: 50px;</span></code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515">// 垂直居中</span></code></div><div data-lake-id="47275a8357a9c8a232aa94f915d847f5" style="text-align: left;"><code><span class="lake-fontsize-1515">margin: 0 auto;</span></code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515">// 居于浏览器中间</span></code></div><div data-lake-id="222a4f978ecbef6396dee39f1fef1b5f" style="text-align: left;"><code><span class="lake-fontsize-1515">color: #ffffff;</span></code></div><div data-lake-id="0e2ec2f336a1d8182423ad214b88dcb1" style="text-align: left;"><code><span class="lake-fontsize-1515">font-size: 20px;</span></code></div><div data-lake-id="ba7716cc97534c9fffc605c986b6a788" style="text-align: left;"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="835f8133ba18acb7e37f15b5e62d33b2" style="text-align: left;"><code><span class="lake-fontsize-1515">.pbtn{</span></code></div><div data-lake-id="e13c1addaa50bb04134f3a129599fdff" style="text-align: left;"><code><span class="lake-fontsize-1515">background-color: green;</span></code></div><div data-lake-id="2d78e95f9f60e1715c6424cbb3174bf3" style="text-align: left;"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="19629ef2fe0f6fb2eeb839b06598566f" style="text-align: left;"><code><span class="lake-fontsize-1515">
// 引入 jQuery
按钮
</span></code></div><div data-lake-id="b732c7da05c8caa5725a9201a3212036" style="text-align: left;"><code><span class="lake-fontsize-1515">$(function(){</span></code></div><div data-lake-id="e3b4f551e1fd91c33537ba96e3a86b16" style="text-align: left;"><code><span class="lake-fontsize-1515">$("p").bind({</span></code></div><div data-lake-id="bd80aa7c572ce161db37f4b0b7252380" style="text-align: left;"><code><span class="lake-fontsize-1515">mouseover:function(){</span></code></div><div data-lake-id="3f8a73760bc59d2e76a33f4112bdcc25" style="text-align: left;"><code><span class="lake-fontsize-1515">// 实现当前对象</span></code></div><div data-lake-id="b20e09519763b94492edb91cf677193b" style="text-align: left;"><code><span class="lake-fontsize-1515">$(this).addClass("pbtn");</span></code></div><div data-lake-id="0f274da7fd8fd1c0898477e00877a231" style="text-align: left;"><code><span class="lake-fontsize-1515">},</span></code></div><div data-lake-id="594a5431abdec4ac81030ecf662f9f6b" style="text-align: left;"><code><span class="lake-fontsize-1515">// 鼠标滑出</span></code></div><div data-lake-id="37b790e92dc81f7edb40852f794b4aa6" style="text-align: left;"><code><span class="lake-fontsize-1515">mouseout:function(){</span></code></div><div data-lake-id="c49baa8a3aaa07f1a53264ef352595ff" style="text-align: left;"><code><span class="lake-fontsize-1515">// 当前对象的类移除</span></code></div><div data-lake-id="72899f9a755705b75bf51a8c8f0e54d0" style="text-align: left;"><code><span class="lake-fontsize-1515">$(this).removeClass("pbtn");</span></code></div><div data-lake-id="5cf0abbf41b29f04a3defb90a3a28a75" style="text-align: left;"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="55f7369d83a9282ad25e705d2ac50aaf" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="b47cb2810dff6d3c9c3201a25f6d38da" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="61a3e613c7f987d24ac8e812e5f68b1c" style="text-align: left;"><code><span class="lake-fontsize-1515">
2、代码二（减少代码量）
</span></code></div><div data-lake-id="822f09fe7bd9651f2bb49d3ca1f912e8" style="text-align: left;"><code><span class="lake-fontsize-1515">p{</span></code></div><div data-lake-id="fce6661a87cfa2262b7090d7cbcaa06c" style="text-align: left;"><code><span class="lake-fontsize-1515">width: 100px;</span></code></div><div data-lake-id="542146bd353c6d0be46538bfa7516ab2" style="text-align: left;"><code><span class="lake-fontsize-1515">height: 50px;</span></code></div><div data-lake-id="c61cbf544f99d0cc0670560556a03759" style="text-align: left;"><code><span class="lake-fontsize-1515">background-color: darkgreen;</span></code></div><div data-lake-id="3944da1e6692113d82159077bc25379c" style="text-align: left;"><code><span class="lake-fontsize-1515">border-radius: 5px;</span></code></div><div data-lake-id="9e9165f7d5721ea9606840215dbb3fac" style="text-align: left;"><code><span class="lake-fontsize-1515">text-align: center;</span></code></div><div data-lake-id="8eb02c0614035842113468df1167d067" style="text-align: left;"><code><span class="lake-fontsize-1515">line-height: 50px;</span></code></div><div data-lake-id="a636ca8a2b1019b95a449ab00f5a5376" style="text-align: left;"><code><span class="lake-fontsize-1515">margin: 0 auto;</span></code></div><div data-lake-id="3cfa78c7c45f37eca694477b97e5eff6" style="text-align: left;"><code><span class="lake-fontsize-1515">color: #ffffff;</span></code></div><div data-lake-id="966f9d8519f3847045e8d9987966291e" style="text-align: left;"><code><span class="lake-fontsize-1515">font-size: 20px;</span></code></div><div data-lake-id="fe169e3afa8ab19549b1112127e33037" style="text-align: left;"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="cb5b90d6eed53809cad56ad789b64618" style="text-align: left;"><code><span class="lake-fontsize-1515">.pbtn{</span></code></div><div data-lake-id="d63082c08dff55303edd57dc71fad03c" style="text-align: left;"><code><span class="lake-fontsize-1515">background-color: green;</span></code></div><div data-lake-id="13fbfc471193c447da3b9b9e4df490f3" style="text-align: left;"><code><span class="lake-fontsize-1515">}</span></code></div><div data-lake-id="92d051e8d89fb050988b979c04bfce28" style="text-align: left;"><code><span class="lake-fontsize-1515">
按钮
</span></code></div><div data-lake-id="e93b92bea15527793bc416756d9deb22" style="text-align: left;"><code><span class="lake-fontsize-1515">$(function(){</span></code></div><div data-lake-id="55557b1626e5f8f3f842d354ebb3c132" style="text-align: left;"><code><span class="lake-fontsize-1515">$("p").bind("mouseover mouseout",function(){</span></code></div><div data-lake-id="e64addf40f3b121db5d04ac3ef54a88b" style="text-align: left;"><span class="lake-fontsize-1515">// 获取当前指针，toggleClass ：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在，或只交换属性。</span></div><div data-lake-id="d77ad9018e4d7992aaac26cab9d0ce96" style="text-align: left;"><span class="lake-fontsize-1515">// 检测这个 p 标签是否有这个 pbtn 类名，如果有就删掉，如果没有就添加上。</span></div><div data-lake-id="751e47a18e90d623d7c2946a7706d01a" style="text-align: left;"><code><span class="lake-fontsize-1515">$(this).toggleClass("pbtn");</span></code></div><div data-lake-id="c25a07d26a694f16f460e06518a03ffd" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="4b9bf75c0fa31bc93971ffc6a3b00dc8" style="text-align: left;"><code><span class="lake-fontsize-1515">})</span></code></div><div data-lake-id="299cd935663492afadcf6395533b6749" style="text-align: left;"><code><span class="lake-fontsize-1515">