jQuery事件处理 管理科学与工程学科 耿方方
jQuery事件处理 管理科学与工程学科 耿方方
主要内容 事件机制 页面载入事件 绑定事件 切换事件 移除事件 其他事件 事件应用
主要内容 事件机制 页面载入事件 绑定事件 切换事件 移除事件 其他事件 事件应用
事件机制 当用户浏览页面时,浏览器会对页面代码进行解释或编译,这个过程 实质上是通过事件来驱动的,即页面在加载时,执行一个1oad事件 在这个事件中实现浏览器编译页面代码的过程。事件无论在页面元素 本身还是在元素与人机交互中,都占有十分重要的地位。 众所周知,页面在加载时,会触发Load事件,当用户单击某个按钮时 触发该按钮的 Click事件,通过种种事件实现各项功能或执行某项操作。 事件在元素对象与功能代码中起着重要的桥梁作用。 事件在触发后分为两个阶段,一个是捕获,另一个则是冒泡。大多数 浏览器都不支持捕获阶段, jQuery也不支持。因此,在事件触发后往 往执行冒泡过程
事件机制 当用户浏览页面时，浏览器会对页面代码进行解释或编译，这个过程 实质上是通过事件来驱动的，即页面在加载时，执行一个load事件， 在这个事件中实现浏览器编译页面代码的过程。事件无论在页面元素 本身还是在元素与人机交互中，都占有十分重要的地位。 众所周知，页面在加载时，会触发Load事件，当用户单击某个按钮时， 触发该按钮的Click事件，通过种种事件实现各项功能或执行某项操作。 事件在元素对象与功能代码中起着重要的桥梁作用。 事件在触发后分为两个阶段，一个是捕获，另一个则是冒泡。大多数 浏览器都不支持捕获阶段，jQuery也不支持。因此，在事件触发后往 往执行冒泡过程
事件机制 案例1 </head> <script src="jQuery/jquery-3 2 1.js type="text/javascript>/script> <body> <div> <script> <input id="btn Show" type="button s(function o vaue="点击" class="btn"> var intI=0 </div> <div class="cls show></diy> s(body div, #btnShow) click(function( </body> intI++ </html> $(". clsShow").show0.htm1("您好,欢迎来到 jQuery世界!") pend("<div>执 行次数<b〉"+intI+"<b)/div)") </script>
事件机制 案例1： < s c r i p t s r c = " j Q u e r y / j q u e r y -3.2.1.js" type="text/javascript"></script> <script> $(function(){ var intI=0; $("body,div,#btnShow").click(function(){ intI++; $(".clsShow").show().html("您好,欢迎来到 jQuery世界!") .append("<div>执 行次数<b>"+intI+"<b></div>") }); }); </script> </head> <body> <div> <input id="btnShow" type="button" value="点击" class="btn"> </div> <div class="clsShow"></div> </body> </html>
事件机制 在实际过程中,我们不需要事件的冒泡现象发生,可以通过 stopPropagation0方法来实现,该方法可以阻止冒泡过程的发生。 <script> s (function( var inti=0 s(body div, #btn Show"). click(function intI++ $(". clsShow").show().htm1("您好,欢迎来到 jQuery世界! a p pe n d("<diw>执行次数 <b>+intI+<b></div>) event. stopPropagation o: ) 1) </ script〉 除了使用 stopPropagation(方法外,还可以通过 return false实现停止事 件的冒泡
事件机制 在实际过程中 ， 我们不需要事件的冒泡现象发生 ， 可 以 通 过 stopPropagation()方法来实现，该方法可以阻止冒泡过程的发生。 <script> $(function(){ var intI=0; $("body,div,#btnShow").click(function(){ intI++; $( ".clsShow").show().html("您好,欢迎来到 jQuery世界!") . a p p e n d ( " < d i v > 执 行 次 数 <b>"+intI+"<b></div>")； event.stopPropagation(); });}); </script> 除了使用stopPropagation()方法外，还可以通过return false实现停止事 件的冒泡