jquery event
一、事件机制：
事件在触发后被分为两个阶段，一个是捕获（Capture），另一个则是冒泡（Bubbling）; 大多数浏览器并不是都支持捕获阶段，jquery也不支持。因此在事件触发后，往往执行冒泡过程。所谓的冒泡其实质就是事件执行中的顺序。
二、事件冒泡：
在jquery中，可以通过stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。
<body> <div class="one" style="width: 200px; height: 200px; background: red;"> <div class="two" style="width: 150px; height: 150px; background: green;"> <div class="three" style="width: 50px; height: 50px; background: blue;"> </div> </div> </div> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $('.one').click(function (e) { alert('one'); }); $('.two').click(function (e) { alert('two'); }); $('.three').click(function (e) { //阻止事件冒泡 e.stopPropagation(); alert('three'); }); }) </script>
三、页面载入事件：
javascritp的页面载入事件onload()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发，在这种情况下，如果页面中的图片过多或图片过大，那么有可能要等onload()方法执完毕，用户才能进行其他的操作；
jquery的页面载入事件ready()方法，只要页面的dom模型加载完毕，就会触发ready()方法。
jquery中ready()方法的工作原理：在jquery脚本加载到页面时，会设置一个isReady的标记，用于监听页面加载的进度，当然遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，当全部加载完成后，再将未完成的部分通过缓存一一执行。
<script src="scripts/jquery.min.js"></script> <script> //写法一 $(document).ready(function () { alert(1); }); //写法二，简洁明了，使用较为广泛 $(function () { alert(2); }); //写法三 jQuery(document).ready(function () { alert(3); }); //写法四 jQuery(function () { alert(4); }); </script>
四、绑定事件：
(1) 直接绑定事件；
<body> <input type="button" name="name" value="clickme" id="clickme" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function myfunction() { $("#clickme").click(function () { alert("clicked"); }) }) </script>
(2) 使用bind()方法进行事件的绑定；
bind()功能是为每个选择元素的事件绑定处理函数，其语法如下：
bind(type，[data]，fn )
参数type为一个或多个类型的字符串，如"click"或"change"，也可以自定义类型：可以被参数type调用的类型包括blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error；
参数data是作为event.data属性值传递给事件对象的额外 数据对象；
参数fn是绑定到每个选择元素的事件中的处理函数；
<body> <input type="button" name="name" value="clickme" id="clickme" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function myfunction() { $("#clickme").bind("click", function () { alert("clicked"); }) }) </script>
如果要在一个元素中绑定多个事件，可以将事件用空格隔开；
<body> <input type="button" name="name" value="clickme" id="clickme" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function myfunction() { $("#clickme").bind("click mouseover", function () { alert("clicked"); }) }) </script>
五、切换事件：
所谓切换事件，即有两个以上的事件绑定于一个元素，在元素的行为动作间进行切换；
在jquery中，有两个方法用于事件的切换：
(1) hover()
调用jquery中的hover()方法可以使元素在鼠标悬停与鼠标移出的事件中进行切换，该方法在实现运用中，也可以通过jquery中的事件mouseenter与mouseleave进行替换。
hover()功能是当鼠标移动到所选的元素上面时，执行指定的第一个函数；当鼠标移出这个元素时，执行指定的第二个函数，其语法如下：
hover( over，out)
参数over为鼠标移到元素时触发的函数；
参数out为鼠标移出元素时触发的函数；
<body> <input type="button" name="name" value="hoverme" id="hoverme" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function myfunction() { $("#hoverme").hover(function () { $(this).css("background", "red"); }, function () { $(this).css("background", "#ddd"); }) }) </script>
(2) toggle()
toggle() 方法切换元素的可见状态。
如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
语法：$(selector).toggle( [speed],[callback],[switch] )
(1) 参数speed：
可选。规定元素从可见到隐藏的速度（或者相反）。默认为 "0"。
可能的值：毫秒 （比如 1500）"slow""normal""fast"
在设置速度的情况下，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度。
如果设置此参数，则无法使用 switch 参数。
(2) 参数callback：
可选。toggle 函数执行完之后，要执行的函数。
如需学习更多有关 callback 的内容，请访问我们的 jQuery Callback 这一章。
除非设置了 speed 参数，否则不能设置该参数。
(3) 参数switch：
可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。
True - 显示所有元素
False - 隐藏所有元素
如果设置此参数，则无法使用 speed 和 callback 参数。
<body> <p>Hello World!</p> <input type="button" name="name" value="toggle" id="toggle" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#toggle").click(function () { $("p").toggle(1000); }) }) </script>
六、移除事件：
在jquery中，通过unbind()方法移除绑定的所有事件或指定某一个事件。
unbind()的功能是移除元素绑定的事件，其调用的语法格式为：
unbind([type]，[fn] )
参数type为移除的事件类型，
参数fn为需要移除的事件处理函数；
如果该方法没有参数，则移除所有绑定的事件；
如果带有参数type，则移除该参数所指定的事件类型；
如果带有参数fn，则只是移除绑定时指定的函数fn。
<body> <p>Hello World!</p> <input type="button" name="name" value="bind" id="bind" /> <input type="button" name="name" value="unbind" id="unbind" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#bind").click(function () { $("p").bind("click", function () { alert("binded") }) }) $("#unbind").click(function () { $("p").unbind("click") }) }) </script>
七、其他事件：
(1) 方法one()
one()方法功能是为所选的元素绑定一个仅触发一次的处理函数，其调用的语法格式为：
one(type，[data]，[fn] )
参数type为事件类型，即需要触发什么类型的事件；
参数data为可选参数，表示作为event.data属性值传递给事件对象的额外数据对象；
参数fn为绑定事件时所要触发的函数。
<body> <p>Hello World!</p> <input type="button" name="name" value="one" id="one" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#one").one("click", function () { alert("click"); }) }) </script>
(2) 方法trigger()
trigger()方法的功能是在所选择的元素上触发指定类型的事件，其调用的语法格式为：
trigger(type，[data] )
参数type为触发事件的类型；
参数data为可选项，表示在触发事件时，传递给函数的附加参数。
<body> <p>Hello World!</p> <input type="button" name="name" value="click" id="click" /> </body> <script src="scripts/jquery.min.js"></script> <script> $(function () { $("#click").click(function () { alert("click"); }) $("p").click(function () { $("#click").trigger("click"); }) }) </script>
