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

4-Jquery学习四-事件操作

) alert( $(this).text() ); }); 此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event...事件对象)来进行处理： var data = { id: 5, name: "张三" }; // 为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据data // 附加数据可以是任意类型...; }); 此外，我们还可以同时绑定多个事件，并为事件处理函数传递一些附加的数据，我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理： var obj...; } ); // 触发window对象的resize事件 $(window).resize( ); 我们还可以为事件处理函数传递一些附加的数据。...此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)： var minSize = { width: 800,

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

    JavaScript 事件委托 以及jQuery对事件委托的支持

    type:     附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。...的使用方式是对某个元素的子元素进行事件委托处理，即形如：$("parentElement").delegate("siblings","eventType",function); parentElement...jQuery还有另外一种方式：将元素的事件处理委托给DOM根节点来处理，这种方式是live()方式： live(type, [data], fn) type   : 事件类型 data ：附加的额外数据...fn   : 相应的处理函数 描述：jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。...参数： events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

    1.4K60

    【前端】详解JavaScript事件代理（事件委托）

    我们举一个通俗的例子来进行说明： 比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一 一分发给每个宿舍同学...event：必需，规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 data：可选，规定传递到函数的额外数据。 function：必需，规定当事件发生时运行的函数。 事件类型支持冒泡，如 click、mouseover 等。...性能考虑：虽然事件代理可以减少内存消耗，但在某些情况下，如事件处理逻辑非常复杂，可能会影响性能。 兼容性：事件代理在所有现代浏览器中都得到支持，但在老旧浏览器中可能存在问题。...社群中不定时会有很多活动，例如每周都会包邮免费送一些技术书籍及精美礼品、学习资料分享、大厂面经分享、技术讨论谈等等。

    1.7K10

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

    注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。...触发事件 包装对象的trigger(type,[data])方法，可以帮助开发人员通过代码触发事件的执行，跟正常触发一样，会进行事件冒泡。...参数: events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。...event.currentTarget 在事件冒泡阶段中的当前DOM元素 event.delegateTarget 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上...事件命名空间 如果一个dom标签上添加的事件非常多的时候，有时候需要进行对这些事件做一些分类和统一处理。那么对绑定的事件分类就需要用到事件的命名空间。

    3.7K80

    前端基础-jQuery事件机制

    第8章 jQuery事件机制 JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。...}); 8.2 on注册事件(重点) jQuery1.7之后，jQuery用on统一了所有事件的处理方法。...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,...距离页面左上角的位置（忽视滚动条） // pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） // event.keyCode 按下的键盘代码 // event.data 存储绑定事件时传递的附加数据...// event.stopPropagation() 阻止事件冒泡行为 // event.preventDefault() 阻止浏览器默认行为 // return false:既能阻止事件冒泡，又能阻止浏览器默认行为

    86620

    Javascipt异步与同步

    在开始之前我还是要明确下何为异步,何为同步。...id为con的添加点击事件,这种情况下肯定是会报错了,原因是jquery-ajax默认是异步的,哪这种情况下当执行到获取dom元素时,是获取不到的,因为ajax的没有执行。...可是这样又会面临一个问题: 阻塞,如果返回的数据量很大的情况下,就会一直等待数据的返回,导致页面的卡顿。 哪有没有即是异步又可以获取dom的元素的呢。...下面说第二种方法: jquery中有如下事件可以实现: on delegate bind live(最新jquery已删除) 其中只测试了bind与on事件(如有其他需要请自行测试) $('#...我查了下jquery的on的实现,提到了两个关键词事件代理或事件委托。当然上面的事件用的是事件委托。关于事件委托我简单说下: 事件委托就是利用了事件冒泡的原理。

    1.2K20

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

    -- jQuery绑定事件的方法 --> $(function(){ // 页面加载完成（dom树已经初始化好了，可以进行交互访问) $('#btn...1.4.2 trigger触发事件 包装对象的trigger(type,[data])方法，可以帮助开发人员通过代码触发事件的执行，跟正常触发一样，会进行事件冒泡。...参数: events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。...event.currentTarget 在事件冒泡阶段中的当前DOM元素 event.delegateTarget 此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上...事件命名空间 如果一个dom标签上添加的事件非常多的时候，有时候需要进行对这些事件做一些分类和统一处理。那么对绑定的事件分类就需要用到事件的命名空间。

    7.6K00

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

    事件冒泡可能会引起预料之外的效果,上例中,本来只想触发元素 的click事件,然而 元素和元素的click事件也同时被触 发了.因此有必要对事件的作用范围进行限制.当单击元素时,只 触发元素的click...件对象的一些属性在程序中使用事件对象非常简单,只需要为函数添加一个参 数....停止事件冒泡 停止时间冒泡可以阻止事件中其他对象的事件处理函数被执行.在jquery中提供了stopPropagation()方法来阻止冒泡事件....jquery对其进行了封装,使之能兼容各大浏览器 (3)event.stopPropagation()方法 阻止事件的冒泡.js真符合W3C规范的stopPropagation()方法在IE浏览器中无效....jquery 对其进行了封装,使之能兼容各大浏览器 (4) event.target()方法 event.target()方法的作用是获取到触发事件的元素.jquery对其封装后，避免了 W3C,IE

    10.2K20

    jQuery之事件绑定到触发全过程及知识点补充

    ") }) 二、$().on() （1）进行参数的调整 （2）调用jQuery.event.add()方法 三、jQuery.event.add()最终调用elem.addEventListener...()来绑定事件 注意： （1）绑定常用的事件（如:click、focus），使用handleObj保存 handleObj = jQuery.extend( { //click,mouseout...可以看到 jQuery的事件和触发事件的handler是分离的， 事件集合 存在 事件缓存dataPriv的events上， //获取数据缓存 elemData = dataPriv.get( elem...： $("#one").off("click.one") 七、jQuery.event.special 的处理机制 绑定的事件，有些是不能统一处理的，比如load事件，是不支持冒泡的，所以即使开发者未用...（1）jQuery 有自己的一套event处理机制，所以需要符合jQuery的event对象 （2）可以传递 data 数据，即用户自定义的数据。

    1.1K10

    JQuery第三节

    $(selector).position(); 2. jQuery事件机制 JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,...距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据...//event.stopPropagation() 阻止事件冒泡行为 //event.preventDefault() 阻止浏览器默认行为 //return false:既能阻止事件冒泡...【案例：五角星评分案例.html】 3.2. each方法 jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

    1.1K30

    深入理解JavaScript系列（37）：设计模式之享元模式

    有两种方式，第一种是应用在数据层上，主要是应用在内存里大量相似的对象上；第二种是应用在DOM层上，享元可以用在中央事件管理器上用来避免给父容器里的每个子元素都附加事件句柄。...享元模式与DOM 关于DOM的事件冒泡，在这里就不多说了，相信大家都已经知道了，我们举两个例子。...例1：事件集中管理 举例来说，如果我们又很多相似类型的元素或者结构（比如菜单，或者ul里的多个li）都需要监控他的click事件的话，那就需要多每个元素进行事件绑定，如果元素有非常非常多，那性能就可想而知了...，而结合冒泡的知识，任何一个子元素有事件触发的话，那触发以后事件将冒泡到上一级元素，所以利用这个特性，我们可以使用享元模式，我们可以对这些相似元素的父级元素进行事件监控，然后再判断里面哪个子元素有事件触发了...(this).next().html(); console.log(html); }); 复制代码 这样，就是原样返回DOM元素自身了，而且不进行jQuery对象的创建。

    57720

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

    但是他们最主要的区别是第四点可能会处理冒泡事件，这第五点是不会处理冒泡事件 6、jQuery鼠标事件之hover事件 这个事件是第五点的总结方法，所以他也不会处理冒泡事件，即悬停事件，在元素区域内悬停（...handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作（如...表单事件之submit事件 submit事件可以过滤一些数据做一些必要的操作阻止一些浏览器的默认行为。...div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。...$ele.off("mouseover") 解除所有事件 $ele.off() 17、jQuery事件对象的作用 可以借用对象的target属性与冒泡机制实现事件委托-------多个事件绑定同一个函数

    6.3K20

    【Java 进阶篇】深入浅出：JQuery 事件绑定的奇妙世界

    深入挖掘：事件对象与冒泡阻止 事件对象的魅力 在事件触发时，浏览器会创建一个事件对象，其中包含了与事件相关的信息。在 JQuery 的事件处理函数中，这个事件对象通常被作为参数传递给处理函数。...在某些情况下，我们希望阻止事件冒泡，以防止事件触发到不想被触发的元素上。 在 JQuery 中，可以使用 stopPropagation 方法来阻止事件冒泡。...情感共鸣：通过案例深入理解 为了更深入地理解 JQuery 事件绑定，让我们通过一些实际案例来感受它的妙处。 案例一：按钮点击特效 有时候，我们希望在用户点击按钮时添加一些特效，让界面更生动。...通过 JQuery 事件绑定，我们可以方便地在用户输入时进行实时验证，提升用户体验。 事件阻止默认的提交行为，执行其他操作（比如异步验证、数据提交等）。 结语：奇妙世界的探索 通过本文的学习，我们深入了解了 JQuery 事件绑定的基本原理和用法。

    1.3K10

    前端面试宝典 v1

    原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链 55、事件、IE与火狐的事件机制有什么区别？如何阻止冒泡？ 1. 我们在网页中的某个操作（有的操作对应多个事件）。...事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件 3. ev.stopPropagation(); 注意旧ie的方法：ev.cancelBubble =...61、事件委托是什么？ 让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！ 62、如何阻止事件冒泡和默认事件？ 阻止浏览器的默认行为 window.event?...* 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。 * JavaScript的数据对象有那些属性值？ 　　writable：这个属性的值是否可以改。 　　...1)、实时应用：如在线聊天，实时通知推送等等（如socket.io） 2)、分布式应用：通过高效的并行I/O使用已有的数据 3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序

    3.2K41

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

    :function(){} }); 将数据传递到处理程序 function greet( event ) { alert( "Miami Heat -- " + event.data.name );...如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性...这个问题引出了事件对象，事件对象是用来记录一些事件发生时的相关信息的对象。...自定义事件对象，是jQuery模拟原生实现的 自定义事件可以传递参数 triggerHandler事件 trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回...如果它们不是由目标元素直接触发的，那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。

    4.9K30

    js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中，由于浏览器兼容性等问题，我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。...浏览器默认行为： 在form中按回车键就会提交表单；单击鼠标右键就会弹出context menu. a标签 1..停止事件冒泡 JavaScript代码 1 //如果提供了事件对象，则这是一个非IE浏览器...return false; } 但是在使用return false时必须注意： 1、jQuery有自己的事件处理层，也对处理程序做了封装，如果事件处理程序返回false，事件冒泡和浏览器默认事件都会被阻止...2、使用原生javaScript，在事件处理程序中返回false只会阻止浏览器默认行为，而事件冒泡依然存在。 3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为，反之亦然。...注意： 有一些浏览器行为是在事件处理程序执行前发生的，也就是说这些默认行为是无法取消的，如：在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变，这个动作是发生在focus事件之前的，是focus

    6.2K120
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券