首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery:详解jQuery中的事件(一)

当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本的事件处理机制。...(){ //code... }   多次调用: window.onload方法是不能被多次调用的,因为JavaScript的onload事件一次只能保存对一个函数的引用,它会自动用后面的函数覆盖前面的函数...jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行...举个实际的例子,下面网页中,单击“标题”链接将显示内容。   ...中bind方法是可以多次调用的,并且可以简化为将上面的第二个bind去掉。

1.7K20

js事件防止冒泡

jQuery对这个事件对象进行了必要的扩展,从而在不论什么浏览器中都能够使用这个属性。通过.target,能够确定DOM中首先接收到事件的元素(即实际被单击的元素)。...与.target类似,这种方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。 只是,仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。 以下。...默认操作 假设我们把单击事件处理程序注冊到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时。浏览器会载入一个新页面。...这样的行为与我们讨论的事件处理程序不是同一个概念,它是单击锚元素的默认操作。类似地,当用户在编辑完表单后按下回车键时。会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。...在这样的情况下,.preventDefault()方法则能够在触发默认操作之前终止事件 。 提示 当在事件的环境中完毕了某些验证之后,一般会用到.preventDefault()。比如。

2.5K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    WEB入门之十四 jQuery事件

    5.1时会弹出一个对话框 2.​多次使用​ 如果我们要在页面加载完毕时执行两个函数,通常会像示例5.2这样写,代码如下所示。 ​...window.οnlοad=test; 在上述代码中,把页面加载完毕时需要调用的两个函数放到第三个函数test中调用,然后给onload事件绑定test函数即可 虽然示例5.3把问题解决了,但是在某些情况下仍然不能满足需求...图5.1.10 hover事件 5.3.2 ​toggle事件​ 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...一次移除多个事件,中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 ​on和off​ on是jQuery 1.7

    12910

    WEB入门之十四 jQuery事件

    2.多次使用 如果我们要在页面加载完毕时执行两个函数,通常会像示例5.2这样写,代码如下所示。...window.οnlοad=test; 在上述代码中,把页面加载完毕时需要调用的两个函数放到第三个函数test中调用,然后给onload事件绑定test函数即可 虽然示例5.3把问题解决了,但是在某些情况下仍然不能满足需求...图5.1.10 hover事件 5.3.2 toggle事件 该事件用于模拟鼠标的连续单击事件,第1次单击时触发第1个函数的执行;第2次单击时触发第2个函数的执行;第n次单击时触发第n个函数的执行。...假设给所有的文本框通过bind绑定了鼠标单击事件,然后再动态创建一个文本框,此时绑定的鼠标单击事件对这个新创建的文本框无效;但是如果使用live进行绑定,那么新创建的文本框也会绑定鼠标单击事件。...一次移除多个事件,中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 on和off on是jQuery 1.7版本中新增的函数

    8410

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    one 绑定一次事件  绑定和解绑 在文档装载完成以后,如果打算为元素绑定事件来处理完成某些操作,则可以使用 bind()方法来对匹配元素进行特定的事件绑定,bind()方法的调用格式如下: bind...可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...和mouseout之间进行切换 toggle 点击事件切换,点击第一次执行 fn,点击第二次执行fn2….....,每个元素执行一次。...但在真实项目中,往往需要处理的数据内容很复杂。 jQuery提供了相应的方法帮助开发者解决这个问题。

    8.3K20

    React 17 RC 版发布:无新特性,却有新期待!

    例如,如果应用的外部「shell」是用 jQuery 编写的,但其中的较新代码是用 React 编写的,那么 React 代码中的 e.stopPropagation() 将会阻止它执行 jQuery...在极少数情况下,你可能希望依赖同步执行,这时你可以改用 useLayoutEffect. 另外,React 17 会根据 effect 在树中的位置,以相同的顺序执行清理函数。...因此,当 React 捕获到错误时,它将在可能的情况下,通过从上面每个组件内部抛出(并捕获)临时错误来重建其组件堆栈。这会增加少量的崩溃性能损失,但是每个组件类型只会发生一次。...如果你对此感到好奇,可以在此 pull request 中了解更多详细信息,但在大多数情况下,这个具体的机制并不会影响你的代码。...这里面构成重大变更的部分是,要使此功能正常进行,React 得在捕获错误后在堆栈中重新执行上面某些 React 函数和 React 类构造函数。

    2.4K20

    【前端】详解JavaScript事件代理(事件委托)

    因为事件会从子元素冒泡到父元素,所以父元素上的监听器可以处理这些事件。 优点 减少内存消耗:不需要为每个子元素分别添加事件监听器。 提高性能:特别是在动态生成的元素上,不需要为新元素重新绑定事件。...但是在很多时候,需要通过 AJAX 或者用户操作动态的增加或者删除列表项li元素,那么在每一次改变的时候都需要重新给新增的元素绑定事件,给即将删去的元素解绑事件。...如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层的,和目标元素的增减是没有关系的,执行到目标元素是在真正响应执行事件函数的过程中去匹配的;所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的...= "事件委托"; }; item3.onclick = function() { alert("hi"); }; 如果在一个复杂的 Web 应用程序中,对所有可单击的元素都采用这种方式...性能考虑:虽然事件代理可以减少内存消耗,但在某些情况下,如事件处理逻辑非常复杂,可能会影响性能。 兼容性:事件代理在所有现代浏览器中都得到支持,但在老旧浏览器中可能存在问题。

    60510

    8 个 DOM 功能

    如果将 once 值改为 false,则多次单击该按钮,每次单击按钮时都会附加文本。...如果使用 setTimeout() 将只运行一次,而在当前这种情况下,它会无限期地运行,直到我在传入 timer 变量时调用 window.clearTimeout()。 这很简单。...下面是一个复选框组的演示: CodePen:https://codepen.io/impressivewebs/pen/wZMJYQ 在这种情况下,你会注意到默认情况下应该会检查两个复选框,因此当使用...在某些情况下,如果将文本视为单个文本节点会更有帮助,这使文本更容易操作。这就是 normalize()和wholeText()的用武之地。...事实上当使用某些事件时(例如click,dbclick,mouseup,mousedown),这些事件会暴露一些叫做 UIEvent 接口的东西。

    1.8K20

    【8】数据浏览表格的快速输出

    一般情况下,在进入这个编辑页面之前,还应该有另外一个页面,可以一次展示多条数据记录的信息。在这个数据的列表界面中,可以进行各种操作,如删除、跳转、编辑等。...经过多次碰壁之后,对于数据列表页面的开发,逐步形成一套不依赖各种现成的控件,而以HTML代码为核心的解决方式。经过多次的实际项目的考验,较好地完成了需求。...但在实际的应用中,列表还是有很多不理想的地方: 1、要求较多。用UL展示数据,直接写出的HTML代码,不加任何样式描述的话,列表的数据就显得混乱。因此,必须要有相应的CSS来配套。...某些列,可能会用到,但是不需要显示。比如,ID列。 3、控制链接。对每行数据的具体的控制操作,常用的有删除和编辑。 4、跳转链接。单击行,跳转到某个展示链接。...4、前端代码需要ID列,但不要显示 可以通过JS代码或者JQuery代码隐藏第一列。 5、新增控制列 可以通过前端代码,对行或者表格的单击事件进行处理,提取该行的ID,并转换为相应的控制链接。

    2.5K50

    jQuery 双击事件(dblclick)时,不触发单击事件(click)

    出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) 在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...mouseout,click,dblclick; 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。...也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。...如此这般的话,只需消灭掉多余的一次单击事件(click),这个问题就解决了。

    5.3K30

    继续死磕前端

    肯定有人会问如何下载之类的问题,其实我很不愿意回答,毕竟这些随意百度到的东西很浪费时间和文字,但是秉承着服务的宗旨,贴出以下链接: 1、http://jquery.com/ 官方网站 2、https:/...//方式2 获取元素的索引值可以使用 index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上的动画,动画执行完后会执行一个函数。...出现零次或一次(最多出现一次) + 出现一次或多次(至少出现一次) * 出现零次或多次(任意次) {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次 范围:使用中括号将可选内容列出,代表内容中任意一个...这只是一种机制,但是我们并不是任何情况下都需要,那么可以将其关掉。...jquery 将它封装成了一个函数 $.ajax(),我们可以直接用这个函数来执行ajax请求。 此部分超级重要!超级重要!超级重要! ajax需要在服务器环境下运行。

    2.8K10

    瞒不住了,Prefetch 就是一个大谎言

    例如,为了让应用程序拆解成多个包,在你的代码的某些地方,你会进行动态导入,比如 import('./some-dependency.js')。...当用户单击 Buy 按钮时,浏览器会惰性加载 buy.js 包。根据 bundle 的大小和网络的速度,这可能会引入一个显著的、明显的延迟。那我们能做些什么来改善呢?...但在所有图像都被解析之后再来获取 JavaScript 可能不是你想要的,因为这样会耗费你的耐心。这个问题实际上说明了缺乏对浏览器中“何时”解析 Prefetch 的控制。...重复加载prefetch 本应改善交互性,但在某些情况下,它可能会恶化交互性。...因此,prefetch 在某些情况下,可能导致多次请求相同的资源。来自 Console 的警告最后,如果某些浏览器检测到给定的预取资源在 x 秒内未被使用,则会发出控制台警告。

    73000

    瞒不住了,Prefetch 就是一个大谎言

    例如,为了让应用程序拆解成多个包,在你的代码的某些地方,你会进行动态导入,比如 import('./some-dependency.js')。...当用户单击 Buy 按钮时,浏览器会惰性加载 buy.js 包。根据 bundle 的大小和网络的速度,这可能会引入一个显著的、明显的延迟。那我们能做些什么来改善呢?...但在所有图像都被解析之后再来获取 JavaScript 可能不是你想要的,因为这样会耗费你的耐心。 这个问题实际上说明了缺乏对浏览器中“何时”解析 Prefetch 的控制。...重复加载 prefetch 本应改善交互性,但在某些情况下,它可能会恶化交互性。...因此,prefetch 在某些情况下,可能导致多次请求相同的资源。 来自 Console 的警告 最后,如果某些浏览器检测到给定的预取资源在 x 秒内未被使用,则会发出控制台警告。

    35520
    领券