jQuery事件处理 管理科学与工程学科 耿方方
jQuery事件处理 管理科学与工程学科 耿方方
主要内容 事件机制 页面载入事件 绑定事件 切换事件 移除事件 其他事件 事件应用
主要内容 事件机制 页面载入事件 绑定事件 切换事件 移除事件 其他事件 事件应用
事件机制 当用户浏览页面时,浏览器会对页面代码进行解释或编译,这个过程 实质上是通过事件来驱动的,即页面在加载时,执行一个1oad事件 在这个事件中实现浏览器编译页面代码的过程。事件无论在页面元素 本身还是在元素与人机交互中,都占有十分重要的地位。 众所周知,页面在加载时,会触发Load事件,当用户单击某个按钮时 触发该按钮的 Click事件,通过种种事件实现各项功能或执行某项操作。 事件在元素对象与功能代码中起着重要的桥梁作用。 事件在触发后分为两个阶段,一个是捕获,另一个则是冒泡。大多数 浏览器都不支持捕获阶段, jQuery也不支持。因此,在事件触发后往 往执行冒泡过程
事件机制 当用户浏览页面时，浏览器会对页面代码进行解释或编译，这个过程 实质上是通过事件来驱动的，即页面在加载时，执行一个load事件， 在这个事件中实现浏览器编译页面代码的过程。事件无论在页面元素 本身还是在元素与人机交互中，都占有十分重要的地位。 众所周知，页面在加载时，会触发Load事件，当用户单击某个按钮时， 触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。 事件在元素对象与功能代码中起着重要的桥梁作用。 事件在触发后分为两个阶段，一个是捕获，另一个则是冒泡。大多数 浏览器都不支持捕获阶段，jQuery也不支持。因此，在事件触发后往 往执行冒泡过程
事件机制 案例1 /script> var intI=0 s(body div, #btnShow) click(function( intI++ $(". clsShow").show0.htm1("您好,欢迎来到 jQuery世界!") pend("执 行次数
事件机制 案例1： $(function(){ var intI=0; $("body,div,#btnShow").click(function(){ intI++; $(".clsShow").show().html("您好,欢迎来到 jQuery世界!") .append("执 行次数"+intI+"") }); });
事件机制 在实际过程中,我们不需要事件的冒泡现象发生,可以通过 stopPropagation0方法来实现,该方法可以阻止冒泡过程的发生。 s (function( var inti=0 s(body div, #btn Show"). click(function intI++ $(". clsShow").show().htm1("您好,欢迎来到 jQuery世界! a p pe n d("执行次数 +intI+) event. stopPropagation o: ) 1) </ script〉 除了使用 stopPropagation(方法外,还可以通过 return false实现停止事 件的冒泡
事件机制 在实际过程中 ， 我们不需要事件的冒泡现象发生 ， 可 以 通 过 stopPropagation()方法来实现，该方法可以阻止冒泡过程的发生。 $(function(){ var intI=0; $("body,div,#btnShow").click(function(){ intI++; $( ".clsShow").show().html("您好,欢迎来到 jQuery世界!") . a p p e n d ( " 执 行 次 数 "+intI+"")； event.stopPropagation(); });}); 除了使用stopPropagation()方法外，还可以通过return false实现停止事 件的冒泡
页面载入事件 页面载入事件 jQuery的页面载入事件 ready()方法类似于传统的 JavaScript的 onLoad O方法。只是在执行时间上有区别。 onLoad o方法必须是页面中的全部元素完全加载到浏览器后才触发。 如果用 ready()方法加载页面,则只要页面的DOM模型加载完毕, 就会触发 ready()方法。 ready()的工作原理:在 jQuery脚本加载到页面时,会设置一个 isReady的标记,用于监听页面加载的进度,当然遇到执行 ready() 方法时,通过查看 isReady值是否被设置,如果未被设置,那么就说 明页面未加载完成,在此情况下,将未完成的部分用一个数组缓存 起来,当全部加载完成后,再将未完成的部分通过缓存一—执行
页面载入事件 页面载入事件 jQuery的页面载入事件ready（）方法类似于传统的JavaScript的 onLoad()方法。只是在执行时间上有区别。 onLoad()方法必须是页面中的全部元素完全加载到浏览器后才触发。 如果用ready（）方法加载页面，则只要页面的DOM模型加载完毕， 就会触发ready（）方法。 ready（）的工作原理：在jQuery脚本加载到页面时，会设置一个 isReady的标记，用于监听页面加载的进度，当然遇到执行ready（） 方法时，通过查看isReady值是否被设置，如果未被设置，那么就说 明页面未加载完成，在此情况下，将未完成的部分用一个数组缓存 起来，当全部加载完成后，再将未完成的部分通过缓存一一执行
页面载入事件 页面载入事件 在前面的章节中我们简单的介绍了 jQuery中的页面载入事件 ready c 方法,除了简化的$( function0})方法外, ready方法还有以下 几种不同的写法,但它们执行的效果是一样的。 $( document). ready( function o/代码部分}); $( function(/代码部分}) jQuery( document). ready( function0{/代码部分}) jQuery( function0仇代码部分});
页面载入事件 页面载入事件 在前面的章节中我们简单的介绍了jQuery中的页面载入事件ready() 方法，除了简化的$(function(){})方法外，ready()方法还有以下 几种不同的写法，但它们执行的效果是一样的。 $(document).ready(function(){//代码部分}); $(function(){//代码部分}); jQuery(document).ready(function(){//代码部分}); jQuery(function(){//代码部分});
绑定事件 在进行事件的绑定时,我们在前面使用了. click( function00})绑 定按钮的点击事件,除了这种写法之外,在 jQuery中我们还可以使 用 bind(方法进行事件的绑定, bindo功能是为每个选择元素的事 件绑定处理函数,其语法结构如下所示 bind(type, [data], in) type为一个或多个类型的字符串,如” click”或” change”,也可以 自定义类型:可以被参数type调用的类型包括blur、 focus、 resize、 scroll、 unload、 click、 dbclick、 mousedown、 mouseup mousemove、 mouseover、 mouseout、 mouseenter、 mouseleave、 change、 select、 submit、 keydown、 keypress、 keyup、 error data是作为 event.data属性值传递给事件对象的额外数据对象。 fn是绑定到每个选择元素的事件中的处理函数
绑定事件 在进行事件的绑定时，我们在前面使用了.click(function(){})绑 定按钮的点击事件，除了这种写法之外，在jQuery中我们还可以使 用bind()方法进行事件的绑定，bind()功能是为每个选择元素的事 件绑定处理函数，其语法结构如下所示： bind(type,[data],fn); type为一个或多个类型的字符串,如”click”或”change”,也可以 自定义类型:可以被参数type调用的类型包括blur、focus、resize、 scroll 、 unload 、 click 、 dbclick 、 mousedown 、 mouseup 、 mousemove 、 mouseover 、 mouseout 、 mouseenter 、 mouseleave 、 change、select、submit、keydown、keypress、keyup、error。 data是作为event.data属性值传递给事件对象的额外数据对象。 fn是绑定到每个选择元素的事件中的处理函数
绑定事件 ■如果要在一个元素中绑定多个事件,可以将事件用空格隔开,例如: Script) S(function o( S(#btnBind) bind( click mouseout" function( s(this). attr(" disabled","disabled") })
绑定事件 如果要在一个元素中绑定多个事件，可以将事件用空格隔开，例如： $(function(){ $("#btnBind").bind("click mouseout",function(){ $(this).attr("disabled","disabled"); }); });
绑定事件 案例2 Script) s(function( S(#btnBind"). bind(click", function o s(this). attr( disabled","disabled") }); }); scrIp Input id=btnBind type="button" value="Button" class=btn"> </body〉
绑定事件 案例2 $(function(){ $("#btnBind").bind("click",function(){ $(this).attr("disabled","disabled"); }); });