JQ中的事件和应用.ppt

Jquery中的事件与应用
什么是事件
事件本质就是对消息的封装,用作对象之间的通信;发
送方叫事件发送器,接收方叫事件接收器;
例如当用户浏览页面时,当页面加载时,执行一个load
事件,页面根据规定,做出第一次加载的种种操作:设置
背景色、显示欢迎界面等。
事件机制
事件的冒泡
事件在元素对象与功能代码间起到桥梁的作用,那么,
事件在触发后是如何执行代码的呢?
事件在被触发后分为两个阶段,一是捕获,二是冒泡
但是大多数浏览器不支持捕获,JQ也不支持。因此在事件
触发后,执行冒泡。下面通过示例说明了冒泡现象:
示例:示例\
事件机制
事件的冒泡
奇怪的看到,在示例中单击了一次按钮,但是计数为3,
这是因为事件的执行存在冒泡现象。虽然单击的是按钮,
但是外围div的事件也被触发,之后div外围的body的事件也
被触发,整个事件波及的过程就像水泡一样向外冒,称为
冒泡现象。在上面的示例中,冒泡的过程如下图所示:
事件机制
事件的冒泡
事件机制
body
div
按钮
事件的冒泡
在实际应用中,我们希望单击按钮就执行单一的事件,
不要触发外面的元素事件。此时可以通过下面方法来阻止
事件的冒泡:
()
尝试在前面示例中的click方法中加入stopPropatation,
观察冒泡是否被阻止。
说明:也可以通过return false来阻止冒泡的过程。
事件机制
Ready方法的工作原理
第一章中,我们介绍了Jquery中ready方法和Javascript
中OnLoad方法的区别:
OnLoad方法必须等页面元素都加载之后才能执行,
而ready方法只需要等页面DOM模型加载之后就能执行。
页面载入事件
Ready方法的工作原理
当Jquery脚本加载到页面时,会设置一个isReady标志
位,用于监听加载进度,当遇见ready方法执行时,检查
isReady是否被设置,如果未被设置,说明页面加载未完
成,此时将未完成的加载缓存起来,等执行完ready方法
后,将未完成部分一一执行。
页面载入事件
Ready方法的几种写法
$(document).ready(function(){
代码部分
})
$(function(){
代码部分
})
jquery(document).ready(function(){
代码部分
})
页面载入事件
绑定事件
我们在示例“事件中的冒泡”中,利用了如下方法指
定元素的click事件:
$(function() {
$(“#btnShow").click(function(event) {
})
})
绑定事件