[锋利的jQuery]第四章 jQuery的事件

来源：互联网发布：2016新款羊绒衫淘宝网编辑：程序博客网时间：2024/05/15 04:48

1、加载DOM：

$(function(){   //do something...})$(document).ready(function(){   //do something...})

注意：jQuery中的$(document).ready(function(){//....})和JavaScript中的window.onload区别：

1.1、执行机制：$(document).ready()方法和window.onload方法功能相似，但是window.onload只有等网页中的所有元素(包括元素所有的关联文件)完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的。但是这并不意味着这些元素关联的文件都已经下载完毕。

jQuery把网页解析成DOM树的速度比window.onload快，但是在$(document).ready()方法中注册的函数如果用到例如图片的高度和宽度，但是这时候图片还没有加载完毕，方法就变得无效了，jQuery中还提供了另外一个方法load()，load()方法会在元素的onload事件中绑定一个处理函数。

2、事件绑定：bind( type [,data] ,fn)在文档装装载完毕后，为元素绑定事件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery第四章-jQuery的事件</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="scripts/jquery-1.8.0.js"></script><style type="text/css">.content {padding: 10px;text-indent: 2em;border-top: 1px solid #0050D0;display: block;display: none;}.head {padding: 5px;background: #96E555;cursor: pointer}.panel {width: 300px;border: 1px solid #0050D0}* {margin: 0;padding: 0;}body {font-size: 13px;line-height: 130%;padding: 60px}</style><script type="text/javascript"><!--$(function(){$("h5").bind("mouseover",function(){$("p").show();}).bind("mouseout",function(){$("p").hide();});})//--></script></head><body><div class="panel"><h5 class="head">[2012美国AMC最新热播西部历史剧][地狱之轮第二季][更新至02集][HDTV高清][中英字幕][迅雷下载]</h5><p class="content">《地狱之轮第二季》是典型的男人剧集，以修建北美横贯大铁路的真实历史为背景，讲述的是男主角复仇的故事。西部题材，荒原、牛仔帽、左轮枪，不乏粗俗、暴力。现在播出第二季，感兴趣的朋友可以下载来看看。</p></div></body></html>

3、事件合成：

3.1、hover(enter,leave)方法用于模拟鼠标悬停事件。当光标移动到元素上时，会触发指定的第一个函数；当光标移出这个元素时，会触发第二个函数。

<!--$(function(){$("h5").hover(function(){$("p").show();},function(){$("p").hide();});})//-->

3.2、toggle(fn1,,fn2,......fnN)方法用于模拟鼠标连续单击事件。当鼠标单击元素时，触发指定的第一个函数(fn1)；再次单击时，会触发指定的第二个函数(fn2)，如果有更多函数会依次触发。

<!--$(function(){$("h5").toggle(function(){alert("this is fn1....");},function(){alert("this is fn2....");},function(){alert("this is fn3....");});})//-->

4、事件冒泡：首先看下面这段代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>jQuery第四章-事件冒泡</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><script type="text/javascript" src="scripts/jquery-1.8.0.js"></script><style type="text/css">*{margin:0;padding:0;}body { font-size: 13px; line-height: 130%; padding: 60px; }#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}p {width:200px;background:#888;color:white;height:16px;}</style><script type="text/javascript"><!--$(function(){$('span').bind('click',function(){$txt = $('#msg').html() + '<p>内层span元素被单击</p>';$('#msg').html($txt);});$('#content').bind('click',function(){$txt = $('#msg').html() + '<p>外层div元素被单击</p>';$('#msg').html($txt);});$('body').bind('click',function(){$txt = $('#msg').html() + '<p>body元素被单击</p>';$('#msg').html($txt);});})//--></script></head><body><div id="content">外层div元素<span>内层span元素</span> 外层div元素</div><div id="msg"></div></body></html>

当我们用鼠标单击<span>元素时，会输出三条信息，这是因为单击内部<span>元素，会触发<div>和<body>元素上的click事件，这是有事件冒泡引起的。触发顺序依次是：<span>、<div>、<body>。

获取事件对象

$(element).bind('click',function(event){   //do something......}

停止事件冒泡

$('span').bind('click',function(event){$txt = $('#msg').html() + '<p>内层span元素被单击</p>';$('#msg').html($txt);event.stopPropagation();//阻止事件冒泡行为});