jQuery的事件绑定

最新推荐文章于 2023-12-08 11:05:38 发布
最新推荐文章于 2023-12-08 11:05:38 发布
阅读量336 收藏
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46287150/article/details/121706084
版权
本文详细介绍了jQuery中on(), one(), 和 hover() 方法的使用，包括基础绑定、事件委托、批量绑定以及hover事件的用法。同时涵盖了click, mouseover等常用事件函数。
摘要由CSDN通过智能技术生成

jQuery绑定事件

  • on()
  • one()
  • hover()
  • 事件常用函数

1.on()

1-1基础绑定
语法：元素集合.on( ‘事件类型’ , 事件处理函数)

  <style>
    div{
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    p{
      width: 300px;
      height: 300px;
      background-color:slateblue;
    }
  </style>
</head>
<body>
  <div>我是div标签
    <p>我是div内的p标签</p>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    $('div').on('click',function(){console.log('点击')})
  </script>
</body>

在这里插入图片描述
1-2事件委托
语法：元素集合.on(‘事件类型’ , 选择器 , 事件处理函数)
ps：把 p 元素的事件委托给了 div 元素来绑定，此时只有点击 p 标签才会触发

    $('div').on('click','p',function(){console.log('点击')})

1-3批量绑定
语法：元素集合.on( { 事件类型1：处理函数, 事件类型2：处理函数} )
ps：不能进行事件委托

$('div').on({
      click:function(){console.log('点击事件')},
      mouseover:function(){console.log('鼠标移入')},
      mouseout:function(){console.log('鼠标移出')}
    })

2.one()

共同点：和on()方法绑定的方式是一样的
不同点：one()方法绑定的事件只能执行一次

这里我就不做演示

3.hover()

语法：元素集合.hover( 移入时触发的函数，移出时触发的函数)
当只传递一个参数时会在移入移出时都触发

    $('div').hover(
      //移入
      function(){console.log('函数1')},
      //移出
      function(){console.log('函数2')}
    )

在这里插入图片描述

4.常用事件函数

  • click()
  • mouseover()
  • mouseout()
  • change()
  • …
    $('div').click(function(){console.log('点击')})

在这里插入图片描述
以上就是jQuery对事件的常用绑定方法

皮蛋solo粥！
关注
专栏目录
jquery绑定事件、动画、表单
m0_61902288的博客
08-13 424
jquery绑定事件、动画、表单：第一种：bind绑定事件bind(事件类型，事件处理函数)用法：$("div").bind(“click",function(){})})})第二种：on：一次绑定多个事件,on注册事件语法:第一个参数events：绑定事件的名称可以是由空格分隔的多个事件〔标准事件或者自定义事件)第二个参数selector：执行事件的后代元素(可选）如集没有后代元素。那么事件将有白己执行。第三个参数data：传递给处理函数的数据。事件触发的时候通过event.data来使用（不常使用）..
jquery 获取绑定事件
weixin_33753845的博客
03-22 138
在1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样：1 $.data(domObj,'events');//或者$('selector').data('events')而从1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫'_data'的函数功能上了，即，1.8.0及以后的版本你可以这么用：1 $._data(domObj,'events');//注意，这里...
JQuery获取 绑定过的事件函数
MZ_的博客
02-05 2894
1、在1.8.0版本之前，若要获取某个DOM绑定的事件函数可以这样写： $.data(domObj,'events');//或者$('selector').data('events') 2、1.8.0版本后，是这么写的： $._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。 3、兼容使用1.8.0...
JQuery事件绑定函数one:绑定的事件处理函数只会被执行一次
热门推荐
aty
01-27 1万+
JQuery绑定事件处理函数，有两种方式(方式1和方式2)是最常用的，方式3使用的较少。 方式1： $("#button").click(function(){ }); 这种方式很简单，也是平时编码最常用的做法。HTML中原始的事件，如onclick、onmouseover、onkeypress等，JQuery对名称进行了简单的封装，如onclick与JQuery的click对应，on
jQuery实现获取绑定自定义事件元素的方法
11-24
本文实例讲述了jQuery实现获取绑定自定义事件元素的方法。分享给大家供大家参考，具体如下： (function ($) { // 自定义itemtab事件 $.fn.bind = function(types, data, fn) { // 重载jQuery.fn.bind方法，用来截获绑定自定义事件的元素 if(typeof types == 'string' && 'itemtab' == types) { var itemTouchStart = -1; // touchstart位置 var itemTouchMove = -1; // touchend位置，值为-1时表示未
jQuery事件绑定和委托实例
11-30
jQuery事件绑定和委托是JavaScript库jQuery中用于处理用户交互的核心机制。它们允许开发者响应用户的动作，如点击、鼠标悬浮、键盘输入等。本文将详细解释这些概念，并通过实例展示其用法。 1. `on()` 方法 `on()` ...
jQuery事件绑定方法学习总结(推荐)
10-21
首先，`bind()`是jQuery早期版本中用于绑定事件处理函数的方法。在上面的例子中，它被用来在按钮元素上绑定点击事件。例如： ```javascript $("#btn").bind("click", function() { $("div").append("这是一个新的p...
深入理解jQuery事件绑定
10-22
在深入理解jQuery事件绑定的文章中，作者向读者介绍了如何使用jQuery的不同方法来绑定事件，并对它们的适用情况和差异进行了阐述。以下是从文章内容中提取的知识点： 1. jQuery的事件绑定方法主要包括bind()、live...
jQuery事件绑定用法详解
10-21
jQuery提供了多种方法来绑定事件，包括但不限于： - `bind()` - `live()` - `delegate()` - `on()` 在早期版本的jQuery中，`bind()`是最常用的事件绑定方法，但后来随着jQuery的发展，出现了一些更强大的方法，如`...
jQuery中的事件绑定方法
weixin_45104211的博客
11-10 294
一、总结 绑定事件： 1、bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下： 一、type表示事件类型，多个事件类型使用空格分隔； 二、data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）； 三、fn表示绑定的函数； 2、unbin...
JQuery 绑定只执行一次事件
coding
12-12 5558
$(document).ready(function() {             $("#btn").one("click", function() {                 alert("我只执行一次哦");             });         });
jquery一次性事件的绑定
boss_way的博客
11-07 3145
1.1． 一次性事件 one()为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。 One绑定的函数只能执行一次。 $(“#btn”).one(click,function(){ Alert(“hello word”); });
Jquery中on绑定事件 点击一次 执行多次 的解决办法
weixin_30530523的博客
05-31 370
举个例子，在同一个页面有下拉选择框 <select class="mySelect"> <option value="user">按用户分析</option> <option value="dept">按单位分析</option> ...
事件只绑定一次的实现
weixin_34291004的博客
12-13 127
const one = (element, events, handler) => { let executed = false; let eventsArray = []; if (/array/i.test(Object.prototype.toString.call(events))) { ...
jquery绑定事件失效的情况
cppsoldier2006的博客
11-20 319
现在的web项目，不使用jquery的恐怕极少。但是在使用jquery时，也会发现一些异常的情况。 一般我们如下绑定点击等事件： [code="java"] 01.mp3 02.mp3 $(function(){ $(".music").find("li").on('click',function(){ $("...
[问题记录]--jquery中click事件的累加绑定，点击一次，执行多次
最新发布
weixin_56374326的博客
12-08 1025
在页面中为一个元素绑定事件，事件执行后页面未刷新且元素还在，然后再次点击，元素又被绑定个点击事件，这样第二次点击就会执行两次。，为元素绑定一个一次性的事件处理函数，这个事件处理函数只会被执行一次。出现问题，第一次编辑后点击确定正常修改，再次修改第一个内容，发现第二个也会变。
jQuery事件处理之事件绑定方式详解，以及与事件页面处理函数的联合应用
weixin_42965737的博客
09-13 161
当触发某种操作时就会激活某个函数，在jquery中有相当简便的方式完成事件的绑定。相比于原生的js对象要灵活简单的多。下面详细介绍一下两种事件绑定的方式： 方式1 $obj.bind('事件名称',function(){ //事件处理函数 }) 方式2 $obj.事件名称(function(){ //事件处理 }) 注意： 事件名称省略on前缀 例如：onblur、onclic...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值