文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性...当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除 绑定2个事件 $("elem").on("mousedown mouseup",fn) 删除一个事件 $("elem").off("...尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替 triggerHandler...() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡...如果它们不是由目标元素直接触发的，那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。

4.9K30

JavaScript类库---JQuery（一）

HTML文本字符串：(不能是纯文本，会被当做CSS字符串的)返回文本创建好的HTML元素并封装成的JQuery对象；此方式接受可选的第二个参数；1、可以用Document对象来指定与所创建元素相关联的文档...2、可以使用object对象，该对象的属性名是Jquery关键字时，可用于传入属性值； 参数为一个函数：文档加载完毕时调用；相当于onLoad()函数；形如$(function(){})或JQuery(...；map的返回值为新的包含回调函数所有返回值的JQuery对象； index() : 参数为一个元素或字符串(当做CSS选择器使用)，返回值为该元素在此JQuery对象中的索引值，找不到返回-1； is...、元素、window对象相关联的数据 $('div').data("x",1); 获取$('div').data('x'); 3、文档操作： 4、JQuery中的处理事件： 　　1.事件简单注册：$(...",f);  　　　　　　　　另：第一个参数可为对象$('a').bind({mouseup:f,mousedown:g}); 如果有第二个参数，则为函数f与g的参数； 　　　　　one() : 原理与

4.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端开发JS——jQuery常用方法

    2、jQuery鼠标事件之mousedown与mouseup事件 mousedown方法用于监听用户鼠标按下操作，只有鼠标按下后才生效，mouseup方法用于监听用户鼠标松开操作，只有鼠标松开后才生效...但是他们最主要的区别是第四点可能会处理冒泡事件，这第五点是不会处理冒泡事件 6、jQuery鼠标事件之hover事件 这个事件是第五点的总结方法，所以他也不会处理冒泡事件，即悬停事件，在元素区域内悬停（...，就会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象 10、jQuery表单事件之select事件 select事件只能用于元素与元素。...13、jQuery键盘事件之keypress()事件 keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成...如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 就是说向上冒泡匹配到的元素，由该元素执行回调函数的范围 16、卸载事件off()方法 通过on()绑定的事件处理程序

    6.3K20

    Cypress web自动化39-.trigger()常用鼠标操作事件

    ') // 触发 mousedown 事件 不正确的用法 cy.trigger('touchstart') // 错误，不能直接用在cy. cy.location().trigger...参数说明 eventName（字符串） event 在DOM元素上要触发的的名称。 position（字符串） 应该触发事件的位置。该center位置是默认位置。...选项 默认 描述 log true 在命令日志中显示命令 force false 强制执行操作，禁用等待操作性 bubbles true 事件是否起泡 cancelable true 活动是否可取消 timeout...在触发事件发生之前，DOM元素必须处于interactable(可交互)状态（它必须可见并且不能禁用） cy.get('button').trigger('mouseover') // yields '...the right button) cy.get('.target').trigger('mousedown', { button: 2 }) 拖拽 drag and drop 要使用jQuery UI

    3.6K30

    02-老马jQuery教程-jQuery事件处理

    ，并按下鼠标按键时，会发生 mousedown 事件mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生 mouseleave([[data],fn...但不会执行浏览器默认动作，也不会产生事件冒泡。 这个方法的行为表现与trigger类似，但有以下三个主要区别： 第一，他不会触发浏览器默认事件。...第二，只触发jQuery对象集合中第一个元素的事件处理函数。 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。...在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。...再也不会被触发 foo 2.6.2 解绑live的事件（die) 语法： $dom.die(type, [fn]) 元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

    3.7K80

    深入浅出 RxJS 之 函数响应式编程

    上面 mouseDown 和 mouseUp 都是数据流，分别代表按钮上的 mousedown 事件和 mouseup 事件集合，不光包含已经发生的事件，还包含没有发生的鼠标事件。...流对象中“流淌”的是数据，而通过 subscribe 函数可以添加函数对数据进行操作，上面的代码中，对 holdTime$ 对象有两个 subscribe 调用，一个用来更新 DOM，另一个用来调用...在 jQuery 的实现中，有被交叉访问的变量（startTime），两个不同函数的逻辑相互关联，稍有不慎就会引发 bug ，代码看起来就是一串指令的组合；在RxJS的代码中，没有这样纠缠不清的变量，会发现所有的变量其实都没有...纯函数要满足的条件 函数的执行过程完全由输入参数决定，不会受除参数之外的任何数据影响 函数不会修改任何外部状态，比如修改全局变量或传入的参数对象 好处 纯函数让代码更加简单，从而更加容易维护，更加不容易产生...数据，它一旦产生，就可以肯定它的值永远不会变，这非常有利于代码的理解 # 函数式编程和面向对象编程的比较 简单说来，面向对象的方法把状态的改变封装起来，以此达到让代码清晰的目的；而函数式编程则是尽量减少变化的部分

    1.5K10

    WEB入门之十四 jQuery事件

    jQuery中的ready()事件则可以很好的处理这个问题，每次给ready()事件绑定函数都会进行追加，而不是覆盖，例如下面的代码。...，而不是第二个函数覆盖第一个函数 3.简写形式 由于ready()事件使用频繁，jQuery提供了一种简写方式。...] , fn ] ) 松开鼠标按钮时发生的事件 下面我们通过一些示例来演示jQuery中鼠标相关事件的用法，先看示例5.7，该示例演示了mousedown、mouseup和mousemove事件，代码如下所示...表5-1-7 jQuery常用绑定函数 函数名 说明 bind 为某元素动态绑定事件及处理函数 unbind 移除某元素的事件，与bind相反 live 相当于增强的bind函数，详见下面介绍 die...删除通过live绑定的事件，与live相反 on jQuery1.7版本中新增的事件绑定函数，用来逐步替代bind和live，性能更好 off 用来移除某元素的事件，与on相反 下面我们通过一些示例来演示上述函数的用法

    1.8K10

    jQuery进阶前言

    前言： 在《jQuery入门》一文中，记录了jQuery选择器、属性与样式和DOM操作等内容，本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学习一下。...一、鼠标事件： 1、点击事件click()和dbclick(): 点击事件，就是当用户点击鼠标时该响应的动作，click是单击，dbclick是双击。...5、focusin()和focusout()事件: focusin()是获取焦点事件。比如有一个输入框，要在该输入框输入文字，我们首先得用鼠标点一下该输入框，这就叫获取焦点。...比如一般的网站登录的时候要输验证码，当你输完验证码，就会立即提示验证码正确还是错误，而不需要点击“登录”按钮后再去判断，这就用到了Ajax。接下来就看看如何使用。...注意，$就是jQuery的简写。url表示要异步请求的url；data是连同请求一起发送到服务器的数据，可选；function就是当请求完执行的函数，可选。

    3.3K20

    WEB入门之十四 jQuery事件

    jQuery中的ready()事件则可以很好的处理这个问题，每次给ready()事件绑定函数都会进行追加，而不是覆盖，例如下面的代码。 ​...，这两个函数都正常执行，而不是第二个函数覆盖第一个函数 3.​简写形式​ 由于ready()事件使用频繁，jQuery提供了一种简写方式。...( [ [data] , fn ] ) 松开鼠标按钮时发生的事件 下面我们通过一些示例来演示jQuery中鼠标相关事件的用法，先看示例5.7，该示例演示了mousedown、mouseup和mousemove...表5-1-7 jQuery常用绑定函数 ​函数名​ ​说明​ bind 为某元素动态绑定事件及处理函数 unbind 移除某元素的事件，与bind相反 live 相当于增强的bind函数，详见下面介绍...die 删除通过live绑定的事件，与live相反 on jQuery1.7版本中新增的事件绑定函数，用来逐步替代bind和live，性能更好 off 用来移除某元素的事件，与on相反 下面我们通过一些示例来演示上述函数的用法

    1.9K10

    02-老马jQuery教程-jQuery事件处理

    ，并按下鼠标按键时，会发生 mousedown 事件mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生 mouseleave([[data],fn...但不会执行浏览器默认动作，也不会产生事件冒泡。 这个方法的行为表现与trigger类似，但有以下三个主要区别： 第一，他不会触发浏览器默认事件。...第二，只触发jQuery对象集合中第一个元素的事件处理函数。 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。...在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。...再也不会被触发 foo 2.6.2 解绑live的事件（die) 语法： $dom.die(type, [fn]) 元素中删除先前用.live()绑定的所有事件.(此方法与live正好完全相反。)

    7.6K00

    JQuery中的bind()和unbind()的理解「建议收藏」

    1、JQuery中事件可以重复绑定，不会覆盖。...如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)： 1 $("#button1").bind("mousedown mouseup",function(){...如果我们指定了自定义的参数，那么JQuery会将它放在事件对象的data属性中，即通过eventObject.data就能够拿到我们传递的参数值。 4、事件取消的三种形式。...可以看到这种做法非常的不好，因为这种做法不允许使用匿名函数，我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制 5、事件命名空间。...这里值得一提：使用了命名空间与unbind并不冲突，上面三种形式的unbind依然可以正常使用。

    2K30

    jQuery 双击事件（dblclick）时，不触发单击事件(click)

    出处：jQuery 双击事件（dblclick）时，不触发单击事件(click) 在jQuery的事件绑定中，执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素（如div等），如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时，不会触发双击事件(dblclick)， 执行双击事件(dblclick...先看一下点击事件的执行顺序： 单击(click)：mousedown，mouseout，click； 双击(dblclick)：mousedown，mouseout，click ， mousedown，...mouseout，click，dblclick； 在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉，但第二次不会。...}) 从测试结果来看，如果前后两次点击的时间在 300ms 左右的时候，还是很容易出现 click 和 dblclick 事件被“同时”调用的情况，而如果间隔的时间更短或更长，则只会有 click 或

    8K30

    JavaScript 编程精解 中文第三版 十五、处理事件

    该方法有时很实用，例如，你将一个按钮放在另一个可点击元素中，但你不希望点击该按钮会激活外部元素的点击行为。 下面的示例代码将mousedown处理器注册到按钮和其外部的段落节点上。...由于许多触摸屏可以同时检测多个手指，这些事件没有与其关联的一组坐标。...当失去焦点时，元素会获得blur事件。 与前文讨论的事件不同，这两个事件不会传播。子元素获得或失去焦点时，不会激活父元素的处理器。 下面的示例中，文本域在拥有焦点时会显示帮助文本。...类似于焦点事件，装载事件是不会传播的。 当页面关闭或跳转（比如跳转到一个链接）时，会触发beforeunload事件。该事件用于防止用户突然关闭文档而丢失工作结果。...如果您想在背后做一些耗时的事情而不会冻结页面，浏览器会提供一些名为 Web Worker 的东西。 Web Worker 是一个 JavaScript 过程，与主脚本一起在自己的时间线上运行。

    6.8K20

    4-Jquery学习四-事件操作

    ) alert( $(this).text() ); }); // 新添加的n6不会触发上述click事件 $("#n1").append('上述绑定的click事件不会对该元素也生效...2-triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。 3-triggerHandler()触发的事件不会在DOM树中冒泡，因此事件不会冒泡传递到它的任何祖辈元素。...4-triggerHandler()的返回值是对应事件处理函数的返回值，而不是当前jQuery对象本身。...与focus事件不同的是：focusin可以检测该元素的后代元素获得焦点的情况(换句话说，focusin事件支持冒泡)。...与blur事件不同的是：focusout可以检测该元素的后代元素获得焦点的情况(换句话说，focusout事件支持冒泡，blur不支持)。 效果同上。

    5.4K90
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券