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

jQuery 事件绑定 和 JavaScript 原生事件绑定

("click",myFun); on(event,childSelector,data,function) on() 方法在被选元素及子元素上添加一个或多个事件处理程序。...提示：如需移除事件处理程序，请使用 off() 方法。 提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。 event：必需。规定要从被选元素移除的一个或多个事件或命名空间。...由空格分隔多个事件值，也可以是数组。必须是有效的事件。 childSelector：可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。  ...注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件...jQuery 中的事件绑定具有叠加性，JavaScript 的事件绑定则是可覆盖的。

7K20

WEB入门之十四 jQuery事件

，下面的内容就会隐藏起来，依次循环 5.4 jQuery事件绑定 jQuery提供了诸多函数来处理复杂的事件，例如动态绑定事件，或者一个元素同时绑定多个事件处理函数，或者多个元素同时共用一个事件处理函数等...jQuery对象 . bind ( type , [data] , fn ) 参数说明： type：表示事件类型 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数...，可以使用示例5.15的写法，如果多个事件中药处理的业务大相径庭，则比较适合使用示例5.16的写法。...：表示事件类型，多个事件用空格隔开 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数 下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号...4：种族选择 ​训练技能点​ jQuery change事件 ​需求说明​ 使用jQuery change事件实现种族选择。选择下拉列表框中不同的项，就显示不同的图片。 ​

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

    WEB入门之十四 jQuery事件

    ，依次循环 5.4 jQuery事件绑定 jQuery提供了诸多函数来处理复杂的事件，例如动态绑定事件，或者一个元素同时绑定多个事件处理函数，或者多个元素同时共用一个事件处理函数等。...jQuery对象 . bind ( type , [data] , fn ) 参数说明： type：表示事件类型 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数...，可以使用示例5.15的写法，如果多个事件中药处理的业务大相径庭，则比较适合使用示例5.16的写法。...一次移除多个事件，中间用空格隔开 $("p").die("click mouseover"); //移除段落元素的鼠标单击事件和鼠标悬浮事件 5.4.3 on和off on是jQuery 1.7版本中新增的函数...，多个事件用空格隔开 data：该参数可选，表示事件发生时通过event对象传递的值 fn：表示事件发生时的处理函数 下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号，然后单击按钮时分析出用户的出生日期

    1.8K10

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

    可以自定义事件名 多个事件绑定同一个函数 // 通过空格分离，传递不同的事件名，可以同时绑定多个事件 $("#elem").on("mouseover mouseout",function(){ })...; 多个事件绑定不同函数 // 通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法 $("#elem").on({ mouseover:function(){},...如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性...当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除 绑定2个事件 $("elem").on("mousedown mouseup",fn) 删除一个事件 $("elem").off("...：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡 trigger事件是具有触发原生与自定义能力的

    4.9K30

    jQuery (二)

    使用jQuery处理事件 事件处理 一个栗子，单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html 的data属性，在调用最后一个处理函数的时候，会将第二个值作为对象的data属性,这样即可避免使用闭包操作 ps jquery 中所有的处理程序都有一个函数 例如 hover() mouseenter...').unbind('.myMod'); // 取消同时绑定在ns1和ns2命名空间下的单击处理程序 $('a').unbind('click.ns1.ns2') 使用命名空间达到模块化的目的 // 使用函数名...; // 触发没有命名空间的单击处理程序 或者如下 // 单击一将会触发二上的事件 $('#button1').click((e) => {$('#button2').trigger('button2'...Ajax Ajax实现了不需要刷新，即可动态的加载一部分页面， load 是滴，load如果传入的参数为字符串，而是函数，load为事件的处理程序的注册，而不是ajax方法。

    10.8K30

    Jquery 使用技巧总结

    jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。...value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数...Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。...=['#f00','#0f0','#00f']}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象...可以有多个参数（合并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

    4.1K20

    jQuery 事件

    什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。...由空格分隔多个事件值。必须是有效的事件。 childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。 data 可选。...，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 范例代码 jQuery 代码库。 注意：如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。...DOM 元素 event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素 event.isDefaultPrevented

    3.9K70

    JavaScript类库---JQuery（一）

    方法的4种不同调用方式： 参数是字符串表示的CSS选择器：$('.class')返回当前文档中匹配到的元素集。...，第一个参数为事件名称，可为多个且用空格分开，第二个参数为处理函数； 　　　　　　　　 可以有三个参数，第一个参数和第三个参数为事件名与处理函数，第二个参数可为任何值，被设置为Event对象的data属性...； 　　　　　　　　 其一特性是允许为注册事件处理程序指定多个命名空间，方便后续触发和卸载；$("p").bind("click.mymod.ym",f);  　　　　　　　　另：第一个参数可为对象$(...;   //触发没有命名空间的单击处理程序； 　　　　　　　　$('p').trigger('click','true'/[]);  //第二个参数为触发的处理程序的参数，传入数组时为多个参数； 　　4...； 　　5.实时事件：便于给新创建的元素注册事件处理程序；绑定：$(document).delegate('a','mouseover',f); 　　　　　　　　解绑：$(document).undelegate

    4.9K30

    jQuery：详解jQuery中的事件（二）

    每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 　　...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。 　停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...最后就是编写用于移除所有click事件的处理函数了。...因此可以看出unbind()方法的语法结构： unbind([type], [data]); 　　其中，第一个参数是事件类型，第二个参数是将要移除的函数。...如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。

    3.6K30

    全网最新、最全的jQuery核心知识，你真的不想点开看看嘛？

    为什么使用 jQuery 它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器 处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX...12.1 定义元素监听事件 语法：$(选择器).事件名称(事件的处理函数) $(选择器) ：定位dom对象，dom对象可以有很多个，这些dom对象都绑定了这个事件 事件名称 ： 就是js中的事件去掉on...的部分，例如：js中的单击事件 onclick(), ​ jQuery中的事件名称，就是click，都是小写的。...事件处理函数 ：就是一个function，当事件发生时，执行这个函数的内容。...例如：给id是btn的按绑定单击事件 $("#btn").click(function(){ ​ alert("btn按钮单击了"); }) 12.2 on 事件绑定 on() 方法在被选元素上添加事件处理程序

    8K10

    第79天：jQuery事件总结（二）

    每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。 　　...这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。 　2、停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。...最后就是编写用于移除所有click事件的处理函数了。...因此可以看出unbind()方法的语法结构： unbind([type], [data]); 　其中，第一个参数是事件类型，第二个参数是将要移除的函数。...如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。 外面的世界那么浮躁，我只想要一块键盘，安静下来，奏出精彩的代码篇章。

    2.4K20

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

    而window.onload只能一次 2.3 事件处理和委派【掌握】 on(events,[selector],[data],fn)，在选择元素上绑定一个或多个事件的事件处理函数。...off(events,[selector],[fn])，在选择元素上移除一个或多个事件的事件处理函数。 bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数。...(type,[,data],fn); 第1个参数是事件类型,.当然也可以是自定义名称 第2个参数是可选参数,作为event.data属性值传递给事件对象的额外的数据对象 第3个参数则是用来绑定的处理函数...件对象的一些属性在程序中使用事件对象非常简单,只需要为函数添加一个参 数....当鼠标移出这个元素时，会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件 hover 在mouseover

    10.2K20

    jquery对象和dom对象的相互转换

    $("#msg").click(fn);   //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery...返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。...的class $("#msg").toggleClass("select");   //如果存在（不存在）就删除（添加）名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法...=['#f00','#0f0','#00f'][i]}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面...可以有多个参数（合并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理转换后) 保存到到另一个新数组中，并返回生成的新数组。

    4.5K40

    JQuery最全常用方法指南

    在每个页面中可以 有很多个函数被加载执行，按照fn的顺序来执行。 bind(type, [data], fn) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。...（像click）绑定一个或多个事件处理器函数。...(fn); //为id为msg的元素单击事件添加函数 同样blur, focus, select, submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理...= ['#f00', '#0f0', '#00f'][i] }) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件： （1）hover(fn1, fn2)：一个模仿悬停事件...可以有多个参数（合并多项并返回） $.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。

    13.2K31

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

    1、jQuery鼠标事件之click与dbclick事件 click方法用于监听用户单击操作，dbclick方法用于监听用户双击操作，这两个方法用法及其类似，所以这只介绍click事件，只有单击释放后才生效...(eventObject)) click的参数是函数（回调函数），单击会执行函数里的操作，如果里面含有this，this指向触发事件元素的对象 方法三：$ele.click([eventData], handler...注：mousemove 强调鼠标指针移动；如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题 4、jQuery鼠标事件之mouseover与mouseout事件...可以自定义事件名 多个事件绑定同一个函数：$ele.on("mouseover mouseout", function(){}) //多个事件用空格隔开 多个事件绑定不同函数：$ele.on({...如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 就是说向上冒泡匹配到的元素，由该元素执行回调函数的范围 16、卸载事件off()方法 通过on()绑定的事件处理程序

    6.3K20

    jQuery中on()、bind()、live()、delegate()之间的区别

    jQuery的.on()、.bind()、.live()和.delegate()之间的区别并非总是那么明显的，然而，如果我们对所有的不同之处都有清晰的理解的话，那么这将会有助于我们编写出更加简洁的代码，...事件冒泡 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...; }); 因此一个单击操作会触发alert函数的执行。 ?...及其以上版本；jquery1.7版本出现之后用于替代bind()，live()绑定事件方式； event 必需项；添加到元素的一个或多个事件，例如 click,dblclick等； 单事件处理：例如...，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况； 大括号替代方式：绑定较为灵活，可以给事件单独绑定函数； data 可选；需要传递的参数； function 必需项；当绑定事件发生时，需要执行的函数

    1.8K30

    加点JavaScript魔法

    如果在元素集合上调用这个函数，jQuery方便地将事件附加到所有元素上。这两个参数是两个函数，分别在用户将鼠标指针移入和移出目标元素时调用对应的函数。...它需要两个参数，函数和毫秒单位的时间。 setTimeout()的效果是函数在给定的延迟后被调用。所以我添加了一个函数（现在是空的），将在悬停事件的一秒钟后被调用。...所以我的鼠标移出事件处理程序检查是否有一个活动的timer对象，如果有，就取消它 07 Ajax 请求 Ajax请求不是一个新话题了，因为我已经在第十四章中已介绍过这个主题，来作为实时语言翻译功能。...最后，我将Ajax回调函数的data参数作为content参数的值。 popover()调用创建了一个弹窗组件，该组件也具有一个名为popover()的方法来显示弹窗。...现在剩下的就是完善鼠标移出事件处理程序上的删除弹出窗口逻辑。 如果用户将鼠标移出目标元素，该处理程序已经具有中止弹出操作的逻辑。

    5.7K10

    jQuery事件机制

    jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。...jQuery事件发展历程(了解) 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐) 简单事件注册 click(handler) //单击事件...//第一个参数：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法...，支持动态绑定 $(selector).on( "click",'span', function() {}); on注册事件的语法： // 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(

    2.2K10

    JQuery第三节

    jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。...：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法 }); 缺点：不支持动态事件绑定 delegate...注册委托事件 // 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click"...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,...作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数 // 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function

    1.1K30

    Web前端知识(四)

    4.1.1.3.jQuery特点 1.轻量级 2.强大的选择器 3.出色的Dom封装 4.可靠的事件处理 5.浏览器兼容性强 6.链式操作方式 7.隐式迭代 4.1.2.jQuery代码风格 l在jQuery...程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“”来起 始的。...鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 4.1.6. jQuery操作CSS l通过jQuery可以很方便的来操作...而 jQuery 为了解决这个问题提供了 .fadeTo()方法 注意:淡入、淡出效果和显示、隐藏效果一样,具有相同的参数。...4.2.0.1.事件介绍 鼠标单击事件 click 鼠标进入事件 mouseover 鼠标离开事件 mouseout 鼠标移动事件 mousemove 浏览器窗口滚动事件 $(window).scroll

    8.4K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券