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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。