jQuery事件_动力节点Java学院整理

2024-02-17 09:51:03 169

因为JavaScript在浏览器中以单线程模式运行，页面加载后，一旦页面上所有的JavaScript代码被执行完后，就只能依赖触发事件来执行JavaScript代码。

浏览器在接收到用户的鼠标或键盘输入后，会自动在对应的DOM节点上触发相应的事件。如果该节点已经绑定了对应的JavaScript处理函数，该函数就会自动调用。

由于不同的浏览器绑定事件的代码都不太一样，所以用jQuery来写代码，就屏蔽了不同浏览器的差异，我们总是编写相同的代码。

举个例子，假设要在用户点击了超链接时弹出提示框，我们用jQuery这样绑定一个click事件：

/*HTML:
*
*点我试试
*
*/

//获取超链接的jQuery对象:
vara=$('#test-link');
a.on('click',function(){
alert('Hello!');
});

on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数。
另一种更简化的写法是直接调用click()方法：

a.click(function(){
alert('Hello!');
});

两者完全等价。我们通常用后面的写法。

jQuery能够绑定的事件主要包括：

鼠标事件

click:鼠标单击时触发；dblclick：鼠标双击时触发；mouseenter：鼠标进入时触发；mouseleave：鼠标移出时触发；mousemove：鼠标在DOM内部移动时触发；hover：鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave。

键盘事件

键盘事件仅作用在当前焦点的DOM上，通常是和。<br/> keydown：键盘按下时触发；keyup：键盘松开时触发；keypress：按一次键后触发。<br/> </p> <p><strong>其他事件<br/> </strong></p> <p>focus：当DOM获得焦点时触发；blur：当DOM失去焦点时触发；change：当<input>、<select><spanstyle="color:#000000">或<textarea></span>的内容改变时触发；submit：当<form>提交时触发；ready：当页面被载入并且DOM树完成初始化后触发。<br/> 其中，ready仅作用于document对象。由于ready事件在DOM完成初始化后触发，且只触发一次，所以非常适合用来写其他的初始化代码。假设我们想给一个<form>表单绑定submit事件，下面的代码没有预期的效果：<br/> </p> <pre> <html> <head> <script> //代码有误: $('#testForm).on('submit',function(){ alert('submit!'); }); </script> </head> <body> <formid="testForm"> ... </form> </body> </pre> <p>因为JavaScript在此执行的时候，<form>尚未载入浏览器，所以$('#testForm)返回[]，并没有绑定事件到任何DOM上。<br/> 所以我们自己的初始化代码必须放到document对象的ready事件中，保证DOM已完成初始化：<br/> </p> <pre> <html> <head> <script> $(document).on('ready',function(){ $('#testForm).on('submit',function(){ alert('submit!'); }); }); </script> </head> <body> <formid="testForm"> ... </form> </body> </pre> <p>这样写就没有问题了。因为相关代码会在DOM树初始化后再执行。<br/> 由于ready事件使用非常普遍，所以可以这样简化：<br/> </p> <pre> $(document).ready(function(){ //on('submit',function)也可以简化: $('#testForm).submit(function(){ alert('submit!'); }); }); </pre> <p>甚至还可以再简化为：<br/> </p> <pre> $(function(){ //init... }); </pre> <p>上面的这种写法最为常见。如果你遇到$(function(){...})的形式，牢记这是document对象的ready事件处理函数。<br/> 完全可以反复绑定事件处理函数，它们会依次执行：<br/> </p> <pre> $(function(){ console.log('initA...'); }); $(function(){ console.log('initB...'); }); $(function(){ console.log('initC...'); }); </pre> <p><strong>事件参数</strong><br/> </p> <p>有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入Event对象作为参数，可以从Event对象上获取到更多的信息：<br/> </p> <pre> $(function(){ $('#testMouseMoveDiv').mousemove(function(e){ $('#testMouseMoveSpan').text('pageX='+e.pageX+',pageY='+e.pageY); }); }); </pre> <p><strong>取消绑定<br/> </strong></p> <p>一个已被绑定的事件可以解除绑定，通过off('click',function)实现：<br/> </p> <pre> functionhello(){ alert('hello!'); } a.click(hello);//绑定事件 //10秒钟后解除绑定: setTimeout(function(){ a.off('click',hello); },10000); </pre> <p>需要特别注意的是，下面这种写法是无效的：<br/> </p> <pre> //绑定事件: a.click(function(){ alert('hello!'); }); //解除绑定: a.off('click',function(){ alert('hello!'); }); </pre> <p>这是因为两个匿名函数虽然长得一模一样，但是它们是两个不同的函数对象，off('click',function(){...})无法移除已绑定的第一个匿名函数。<br/> </p> <p>为了实现移除效果，可以使用off('click')一次性移除已绑定的click事件的所有处理函数。<br/> </p> <p>同理，无参数调用off()一次性移除已绑定的所有类型的事件处理函数。</p> <p><strong>事件触发条件<br/> </strong></p> <p>一个需要注意的问题是，事件的触发总是由用户操作引发的。例如，我们监控文本框的内容改动：<br/> </p> <pre> varinput=$('#test-input'); input.change(function(){ console.log('changed...'); }); </pre> <p>当用户在文本框中输入时，就会触发change事件。但是，如果用JavaScript代码去改动文本框的值，将不会触发change事件：<br/> </p> <pre> varinput=$('#test-input'); input.val('changeit!');//无法触发change事件 </pre> <p>有些时候，我们希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件：<br/> </p> <pre> varinput=$('#test-input'); input.val('changeit!'); input.change();//触发change事件 </pre> <p>input.change()相当于input.trigger('change')，它是trigger()方法的简写。<br/> </p> <p>为什么我们希望手动触发一个事件呢？如果不这么做，很多时候，我们就得写两份一模一样的代码。<br/> </p> <p><strong>浏览器安全限制<br/> </strong></p> <p>在浏览器中，有些JavaScript代码只有在用户触发下才能执行，例如，window.open()函数：<br/> </p> <pre> //无法弹出新窗口，将被浏览器屏蔽: $(function(){ window.open('/'); }); </pre> <p>这些“敏感代码”只能由用户操作来触发：<br/> </p> <pre> varbutton1=$('#testPopupButton1'); varbutton2=$('#testPopupButton2'); functionpopupTestWindow(){ window.open('/'); } button1.click(function(){ popupTestWindow(); }); button2.click(function(){ //不立刻执行popupTestWindow()，100毫秒后执行: setTimeout(popupTestWindow,100); }); </pre> <p>当用户点击button1时，click事件被触发，由于popupTestWindow()在click事件处理函数内执行，这是浏览器允许的，而button2的click事件并未立刻执行popupTestWindow()，延迟执行的popupTestWindow()将被浏览器拦截。<br/> </p> <p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。</p></section> </div> </div>  <nav> <span class="meta-nav"><a href="/article/232525.html" title="jQuery修改DOM结构_动力节点Java学院整理" se_prerender_url="complete">上一篇<br>jQuery修改DOM结构_动力节点Java学院整理</a></span> <span class="meta-nav"><a href="/article/232521.html" title="java中final修饰符的使用方法" se_prerender_url="complete">下一篇<br>java中final修饰符的使用方法</a></span> <div class="clear"></div> </nav>  <div class="article-recommend"> <h3>热门推荐</h3> <div class="title"><span class="s-1">1</span> <a href="/article/10835.html" title="毛坯房验收经验和常识看了之后再验房心里有底">毛坯房验收经验和常识看了之后再验房心里有底</a></div> <div class="title"><span class="s-2">2</span> <a href="/article/10697.html" title="二手房收房如何交接二手房收房注意问题">二手房收房如何交接二手房收房注意问题</a></div> <div class="title"><span class="s-3">3</span> <a href="/article/10605.html" title="专业验收毛坯房的价格商品房验收合格的标准">专业验收毛坯房的价格商品房验收合格的标准</a></div> <div class="title"><span class="s-4">4</span> <a href="/article/10568.html" title="精装房怎么验收精装房请验房师有用吗">精装房怎么验收精装房请验房师有用吗</a></div> <div class="title"><span class="s-5">5</span> <a href="/article/10567.html" title="一般要到哪里找验房师验房师有哪些作用呢">一般要到哪里找验房师验房师有哪些作用呢</a></div> <div class="title"><span class="s-6">6</span> <a href="/article/10566.html" title="请人验房一般是多少钱验房师费用是多少">请人验房一般是多少钱验房师费用是多少</a></div> <div class="title"><span class="s-7">7</span> <a href="/article/10553.html" title="怎样测量房子面积建筑面积和使用面积怎么算">怎样测量房子面积建筑面积和使用面积怎么算</a></div> <div class="title"><span class="s-8">8</span> <a href="/article/10550.html" title="收房需要注意什么仔细检查不松懈">收房需要注意什么仔细检查不松懈</a></div> <div class="title"><span class="s-9">9</span> <a href="/article/10548.html" title="收房时三书一证一表是什么主要作用介绍">收房时三书一证一表是什么主要作用介绍</a></div> <div class="title"><span class="s-10">10</span> <a href="/article/10547.html" title="交房时交房税费有哪些本文为你一一讲解">交房时交房税费有哪些本文为你一一讲解</a></div> <div class="title"><span class="s-11">11</span> <a href="/article/10526.html" title="验房都需要验什么要做哪些准备呢">验房都需要验什么要做哪些准备呢</a></div> <div class="title"><span class="s-12">12</span> <a href="/article/10525.html" title="毛坯房验房师有必要请吗毛坯房装修完如何验收">毛坯房验房师有必要请吗毛坯房装修完如何验收</a></div> <div class="title"><span class="s-13">13</span> <a href="/article/7820.html" title="地下室防水工程质量验收规范详解">地下室防水工程质量验收规范详解</a></div> <div class="title"><span class="s-14">14</span> <a href="/article/4947.html" title="水性涂料、油性涂料区别介绍">水性涂料、油性涂料区别介绍</a></div> <div class="title"><span class="s-15">15</span> <a href="/article/4517.html" title="零基础布艺DIY工坊教你做超萌猫头鹰钥匙包">零基础布艺DIY工坊教你做超萌猫头鹰钥匙包</a></div> <div class="title"><span class="s-16">16</span> <a href="/article/4438.html" title="三棵树漆怎么样？三棵树漆官方网站">三棵树漆怎么样？三棵树漆官方网站</a></div> <div class="title"><span class="s-17">17</span> <a href="/article/4258.html" title="家庭“装修套餐”中猫腻你知道吗？">家庭“装修套餐”中猫腻你知道吗？</a></div> <div class="title"><span class="s-18">18</span> <a href="/article/4051.html" title="小空间大浴望卫浴间装修巧支招">小空间大浴望卫浴间装修巧支招</a></div> </div> <div class="add-gg">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="9131157744" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div>  <div id="sidebar"> <li class="sidebar-box"> <h3 class="widget-title">随机推荐</h3> <ul> <li> <a href="/article/365290.html" title="祝长辈中秋祝福语简短">祝长辈中秋祝福语简短</a> </li> <li> <a href="/article/365289.html" title="老板离职了简短祝福语">老板离职了简短祝福语</a> </li> <li> <a href="/article/365287.html" title="酸奶店开业祝福语简短">酸奶店开业祝福语简短</a> </li> <li> <a href="/article/365286.html" title="天冷祝福语简短暖心">天冷祝福语简短暖心</a> </li> <li> <a href="/article/365285.html" title="蛋糕祝福语简短给老公">蛋糕祝福语简短给老公</a> </li> <li> <a href="/article/365284.html" title="初中老师结婚祝福语简短">初中老师结婚祝福语简短</a> </li> <li> <a href="/article/365283.html" title="历史老师结婚祝福语简短">历史老师结婚祝福语简短</a> </li> <li> <a href="/article/365282.html" title="不同的生日祝福语简短">不同的生日祝福语简短</a> </li> <li> <a href="/article/365281.html" title="医师节晚宴祝福语简短">医师节晚宴祝福语简短</a> </li> <li> <a href="/article/365279.html" title="祝别人99祝福语简短">祝别人99祝福语简短</a> </li> <li> <a href="/article/365277.html" title="装修开工祝福语简短霸气">装修开工祝福语简短霸气</a> </li> <li> <a href="/article/365275.html" title="过年祝福语简短走心">过年祝福语简短走心</a> </li> <li> <a href="/article/365272.html" title="去读大学祝福语简短">去读大学祝福语简短</a> </li> <li> <a href="/article/365271.html" title="砸墙祝福语简短霸气">砸墙祝福语简短霸气</a> </li> <li> <a href="/article/365270.html" title="生日恩爱祝福语简短精辟">生日恩爱祝福语简短精辟</a> </li> <li> <a href="/article/365266.html" title="好的结婚祝福语简短">好的结婚祝福语简短</a> </li> </ul> </li> <li class="sidebar-box">  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4387516810452807" data-ad-slot="8604338277" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </li> </div> </div> </div> <ul class="suspend"> <li class="back-top" onclick="backTop()"> <i class="fa fa-chevron-up"></i> <span class="more">返回顶部</span> </li> <li> <a href="http://wpa.qq.com/msgrd?v=3&uin=3162201930&site=qq&menu=yes"> <i class="fa fa-qq"></i> <span class="more">3162201930</span> </a> </li> <li> <a href="mailto:czq8825@qq.com"> <i class="fa fa-envelope"></i> <span class="more">czq8825@qq.com</span> </a> </li>  </ul> <footer class="footer clearfix"> <p>免责声明：网站资源来源于网络，如有侵权，请及时联系删除。</p> <p>Copyright © 2024 <a href="/">微客导航网</a>. All Rights Reserved.</p> <p> <a href="https://beian.miit.gov.cn">蜀ICP备2021004611号-4</a> <a href="/sitemap.html">网站地图</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?78e2f1027b3a17750580941ea594d61e"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </p> </footer> <script src="/Public/Home/js/main.js"></script> <script type="text/javascript" src="/Public/Home/js/z_stat.js"></script> </body> </html>