4.1JQuery中的事件
4.1.1 简写方式
三种方式等效：
$(document).ready(function(){}) $(function(){}) $().ready(function(){})
4.1.2事件的绑定
在文档装载完成时，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来匹配元素进行特定事件的绑定
bind( type [ ，data]，fn)；
第一个参数是事件类型：blur、focus、load、resize、scroll；或者是自定义的名称
第二个参数是可选参数，作为event.data 属性值传递给事件对象的额外数据对象
第三个参数则是用来绑定处理函数。
<style type="text/css"> .content{ display: none; } </style></head><body> <div id="panel"> <h5 class="head">什么是Jquery</h5> <div class="content">Jquery是 </div> </div> <script> $(function () { $(".head").bind("click",function (){ $(this).next("div.content").show(); }) }) </script></body>加强效果：如果内容是显示的点击就隐藏，否则反之
<body> <div id="panel"> <h5 class="head">什么是Jquery</h5> <div class="content">Jquery是</div> </div> <script> $(function () { $("#panel h5.head").bind("click",function () { /*避免.next()被多次使用，则需要定义一个局部变量*/ var $content=$(this).next("div.content"); if ($content.is(":visible")){ $content.hide(); }else { $content.show(); } }) }) </script></body>3改变绑定事件的类型可以将click进行替换 比如mouseover4简写绑定事件
<script> $(function () { $(".head").mouseover(function () { $(this).next("div.content").show(); }); $(".head").mouseout(function () { $(this).next("div.content").hide(); }); })</script>4.1.3合成事件 hover（）方法 和 toggle（）方法1.hover（）方法 语法结构：hover（enter，leave）; hover用来模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移出这个元素是，会触发指定的第二个函数（leave）；与mouseover和mouseout一样
<script> $(function () { $(".head").hover(function () { $(this).next("div.content").show(); },function () { $(this).next("div.content ").hide(); }); })</script>
2toggle（）方法 语法结构：toggle（fn1，fn2，。。。。fnN） toggle（）方法用于模拟鼠标连续单击事件，第一个单击触发指定的第一个函数（fn1）；当再次单击同一个元素时，则触发指定的第二个元素4.1.4事件冒泡1什么是冒泡在页面上可以有很多事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌入在另一个元素里，并且都绑定了click事件，同时<body>元素上也绑定了click事件
<body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> <script> $(function () { /*为span元素绑定click事件*/ $("span").bind("click",function () { var txt=$('#content').html()+"<p>外层span被单击。</p>"; $('#msg').html(txt); }); /*为div元素绑定click事件*/ $("#content").bind("click",function () { var txt=$('#msg').html()+"<p>外层div被单击。</p>"; $('#msg').html(txt); }) /*为body元素绑定click事件*/ $('body').bind('click',function () { var txt=$('#msg').html()+"<p>body被单击。</p>"; $('#msg').html(txt); }) }) </script></body>
外层div元素 内层span元素 外层div元素
外层div元素 内层span元素 外层div元素
外层span被单击。
外层div被单击。
body被单击。
绑定事件 之所以成为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端；
2事件冒泡引发的问题
有必要对事件的作用范围进行限制；为了解决冒泡问题，引出了下面内容
事件对象
jquery为了在任何浏览器中都能轻松地获取事件对象以及事件对象的一些属性。jquery进行了必要的封装和扩展
$("element").bind("click",function(event){ //event:事件对象})；
当单击“element”元素时，事件对象就被创建了，这个事件对象只有处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。
停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jquery中提供了stopPropagation（）方法来停止事件冒泡；
/*为span元素绑定click事件*/$("span").bind("click",function () { var txt=$('#content').html()+"<p>外层span被单击。</p>"; $('#msg').html(txt); event.stopPropagation();});/*为div元素绑定click事件*/$("#content").bind("click",function () { var txt=$('#msg').html()+"<p>外层div被单击。</p>"; $('#msg').html(txt); event.stopPropagation();})阻止默认行为网页中的元素自己默认的行为，在JQuery 中提供了preventDefault（）方法来阻止元素的默认行为。
<body> <form action="test.html"> 用户名：<input type="text" id="username"> <br> <input type="submit" value="提交" id="sub"> </form> <div id="msg"></div> <script> $(function () { $('#sub').bind('click',function (event) { var username=$("#username").val(); if (username==""){ $("#msg").html("<p>文本框的值不能为空</p>"); event.preventDefault(); } }); }) </script></body>event.preventDefault会阻止默认值 或者改写为return false； event.stopPropagation()//停止事件冒泡 事件捕获事件捕获和事件冒泡是刚好相反的两过程，事件捕获是从最顶端往下开始触发。 从最外层元素开始，然后到最里层元素。jquery不支持事件捕获，如果需要使用事件捕获请直接使用原生的js4.1.5事件对象属性event.type()方法 该方法的作用是可以获取到事件的类型event.preventDefault()方法 该方法作用是阻止默认的事件行为。event.stopPropagation（）方法 阻止事件冒泡event.target（）方法 获取到触发事件的元素。event.relatedTarget（）方法 触发事件的相关元素event.pageX()方法/event.pageY()方法 获取到光标相对于页面的x坐标和y坐标。event.which()方法 在鼠标单击实践中获取到鼠标的左中右键；在键盘事件中获取键盘的按键 1=鼠标left 2=鼠标中键 3=鼠标右键
<body> <p class="ha">sdfsfsdf</p> <script> $(function () { $(".ha").mousedown(function (e) { alert(e.pageX+"+"+e.pageY); }) }) </script></body>event.metaKey()方法获取键盘中的<ctrl>按键event.originalEvent()方法作用是指向原始的事件对象4.1.6移除事件 语法结构unbind（【type】【，data】）；第一个参数是事件类型 第二个参数是将要移除的函数（1）如果没有参数，则删除所有绑定的事件（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件（3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。