脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery学习笔记（三）jQuery中的事件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 ．加载DOM
Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的。jQuery提供了丰富的事件处理机制。从上篇博客中，我们知道浏览器先是加载DOM树的，在加载DOM元素之后，浏览器就开始为元素添加事件。所以，首先要明白浏览器是通过什么方法加载DOM的。在js中，加载DOM的方法是通过window.onload方法，而在jquery中使用的是$(document).ready()方法。这两种方法的区别在于：1.window.onload()是在网页中的所有元素加载完成时才开始执行DOM事件，而$(document).ready()方法则是在网页中的DOM树加载完成之后就可以执行，举个例子来说，如果我们打开一个包含很多图片的网站，如果用window.onload()方法的话，那么必须等到网页上的所有图片全部加载完成之后才开始执行，而使用$(document).lready()方法的话则是只有DOM树加载完成，无需等到所有图片都加载完成就可以执行。2.其次，在写法上$(document).ready(function(){})可以简化写为:$(function(){}.)。
二． 事件绑定
既然加载完了，我们自然就要开始绑定我们所需要的事件喽，那么应该如何绑定呢？这里我们将一个Demo示例来演示。先来看下述HtML代码。
复制代码
<!DOCTYPE html PubLIC "-//W3C//DTD XHTML 1.0 TransITional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html XMlns="http://www.w3.org/1999/xhtml">
<head>
<title>事件绑定</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
body
{
font-Size:13px;
line-height:130%;
padding:60px;
}
#panel
{
width:300px;
border:1px solid #0050D0;
}
.head
{
height:24px;
line-height:24px;
text-indent:10px;
background:#96E555;
cursor:pointer;
width:100%;
}
.content
{
padding:10px;
text-indent:24px;
border-top:1px solid #0050D0;
display:block;
display:none;
}
</style>
</head>
<body>
<p id="panel">
<h5 class="head">怎么样？</h5>
<p class="content">还不错哦。</p>
</p>
</body>
</html>
复制代码
此时我们要做的效果就是当鼠标划到“怎么样”三个字的时候，会自动弹出下面的<p>区域，显示“还不错哦。”当鼠标离开时候，该区域又再次隐藏。为达到这个效果，我们就需在<h5>上绑定两个事件，一个为mouseove和mousout事件。整理好思路，我们就开始写jQuery代码。
复制代码
<script type="text/javascript">
$(function () { //等待DOM加载完成
$(".head").bind(";mouseover", function () { //为<h5>绑定mouseover事件，即当鼠标划进来的时候使class=”content”的<p>区域显示
$(this).next().show();
}).bind("mouseout", function () { //为<h5>绑定mouseout事件，即当鼠标划出的时候使class=”content”的<p>区域隐藏
$(this).next().hide();
})
})
</script>
复制代码
三. 合成事件
jquery大体有两个合成事件的方法，分别是hover()方法与toggle()方法。下面一一说明下。
1. hover()方法
语法结构hover(enter,leave);
hover()方法是为了模拟光标悬停事件的，当光标移到元素上的时候，会触发第一个函数enter,当光标移除元素时候，会触发第二个函数leave。故对上述例子中我们还可以写下述代码就行代替。
复制代码
<script type="text/javascript">
$(function () {
$("h5.head").hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
})
</script>
复制代码
2.toogle()方法
语法结构为:toogle(function1，function2,……functionN)
toogle()方法用于模拟鼠标连续单击事件的。对于上述代码我们还可以用toogle()方法就行代替。
复制代码
<script type="text/javascript">
$(function () {
$("h5.head").toggle(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
})
</script>
复制代码
四. 事件冒泡
首先我们来看一个Demo。
复制代码
<script type="text/javascript">
$(function () {
$("span").bind("click", function () { //为span绑定click事件
VAR txt = $("#msg").html() + "<p>内层p被点击</p>";
$("#msg").html(txt);
});
$("#content").bind("click", function () {
var txt = $("#msg").html() + "<p>外层p被点击<p>"; //为外层p绑定click事件
$("#msg").html(txt);
});
$("body").bind("click", function () { //为body元素绑定click事件
var txt = $("#msg").html() + "<p>body元素被点击<p>";
$("#msg").html(txt);
});
})
</script>
<p id="content">
外层p元素
<span>内层span元素</span>
外层p元素
</p>
<p id="msg"></p>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery学习笔记（三）jQuery中的事件全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery学习笔记（三）jQuery中的事件所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。