【jquery】事件处理之on

最新推荐文章于 2023-04-09 20:52:13 发布
最新推荐文章于 2023-04-09 20:52:13 发布
阅读量160 收藏
点赞数
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanqianjia/article/details/110678183
版权

1.1-on可以绑定1个或者多个事件处理程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            // $("div").click(function() {
            //     $(this).css("background", "purple");
            // });
            // $("div").mouseenter(function() {
            //     $(this).css("background", "skyblue");
            // });

            // 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
             $("div").on({
                 mouseenter: function() {
                     $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                 },
                 mouseleave: function() {
                     $(this).css("background", "blue");
                }
             });
          
            });

    </script>
</body>

</html>

1.2-on将两个相同的事件处理程序放在一起执行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function() {  
           $("div").on({
                 mouseenter: function() {
                     $(this).css("background", "skyblue");
                },
             
                 mouseleave: function() {
                     $(this).css("background", "blue");
                }
             });
         //以上代码等同于 
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
        });
       

    </script>
</body>

</html>

2-on可以实现事件委托（委派）

事件委派：把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父亲

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>

    <script>
        $(function() {
           
            // (2) on可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
        })
    </script>
</body>

</html>

3-on可以给未来动态创建的元素绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
    <script src="js/jquery.min.js"></script>
</head>

<body>

    <ol>

    </ol>
    <script>
        $(function() {
            // (3) on可以给未来动态创建的元素绑定事件
            // $("ol li").click(function() {
            //     alert(11);
            // })
            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);
        })
    </script>
</body>

</html>
Ti小芬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 处理页面的事件详解
10-24
在本文中，我们将深入探讨 jQuery 如何处理页面上的事件，包括事件绑定、事件解绑、事件冒泡和事件代理。 1. **事件绑定：**jQuery 提供了 `bind()` 方法来绑定事件监听器。在示例代码中，`$("img")` 选择器用于...
JQuery的ON()方法支持的所有事件罗列
10-24
在jQuery库中，`on()`方法是一个非常重要的事件处理函数，它允许我们绑定一个或多个事件处理器到指定的元素上。这个方法自jQuery 1.7版本引入，目的是替代之前的`bind()`, `live()`, `delegate()`等事件处理方法，以...
多个class类相同的元素的点击事件（使用动态加载的）
weixin_44352179的博客
04-16 2788
注意如果类标签是动态加载的，这里则不能用 onclick方法进行绑定，如： //动态添加div标签类 for (var i = 0; i < clini_symlist.length; i++) { $(".father").append('<div class="sym_item">'+i+'</div>' } 使用onclick是不能实现的，点击进不去...
jQuery 事件处理 on()
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
09-08 703
说到jQuery的事件处理，不得不提jQuery中一个全能事件方法$(select).on() 。在给元素添加事件中，貌似它无所不能。用过jQuery的你肯定用过该方法。 一说到事件，经常听人说，事件绑定，事件监听和事件委派。那么这三者的区别是什么呢？事件委派在本文章不做讲述，因为应用场景我还没有遇到过，下面用代码来讲解一下事件绑定和事件监听的区别 <!-- html --> ...
jQuery事件处理 on() 绑定事件
vue_ajks的博客
08-12 1336
jQuery事件处理 on() 绑定事件
jQuery事件处理
shao_xuan_的博客
12-18 1778
jQuery事件处理前言事件绑定Query事件处理函数的好处反绑定事件事件触发器trigger触发事件triggerHandler触发事件快捷事件 Event Helpershover：模仿鼠标悬停jQuery中事件对象JQuery中事件对象操作 前言 jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法，而且也对事件处理机制本身作了很大的增强。 如在页面加载事件中，JavaScript使用window.onload()方法，它在页
jQuery事件处理概述
橘猫吃不胖的博客
01-09 1033
jQuery事件1 概述2 页面载入完毕响应事件2.1 window.onload2.2 $(document).ready()事件3 绑定与反绑定事件监听器3.1 概述3.2 绑定事件3.3 jQuery事件处理函数的好处3.4 反绑定事件3.5 一次性的事件绑定4 事件触发器4.1 trigger触发事件4.2 triggerHandler触发事件4.3 Event Helpers快捷事件5 事件的交互处理5.1 hover：模仿鼠标悬停6 事件对象6.1 使用jQuery事件对象6.2 Javascr
JQuery中的on事件
DavidZhao的博客
01-31 2010
on(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数。   on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.o...
jquery中on事件
weixin_46002223的博客
08-23 1319
jquery中on事件 多个事件处理 语法 element.on(events,[selector],fn) 1、events：一个或多个用空格分隔的事件类型，如“click”或“keydown”。 2、selector：元素的子元素选择器 3、fn：回调函数 绑定在元素身上的侦听函数 第二种方法 把原来给子元素身上的事件绑定在父元素身 ul父元素 li子元素 触发的对象是ul里面的小li，绑定事件是给ul绑定的 $("ul").on("click","li",function(){ alert(
jQuery事件处理： on() 绑定事件
qq_51387458的博客
04-09 2453
jQuery事件处理： on() 绑定事件
[JQuery]：jQuery处理事件的on()和off()详细用法
我只是个程序员。
10-03 3066
jQuery的on() 和 off() 方法使用详解
jquery on事件
zengyonglan的博客
09-22 483
jquery on实现绑定多个事件 概述： 在选择元素上绑定一个或多个事件的事件处理函数。on( events, [selector], [data], fn)on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .l
jQuery事件绑定on()与弹窗实现代码
10-22
`on()`方法是jQuery事件绑定的主要方式，尤其在处理动态生成元素的事件绑定时显得尤为重要。本文将深入探讨jQuery的`on()`方法以及如何利用它来实现弹窗的交互效果。 首先，`on()`方法是用来替代早期的`bind()`, `...
Jquery基础之事件操作详解
10-22
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了许多DOM操作和事件处理。本文将深入讲解jQuery中的事件操作，帮助你更好地理解和应用这些基础知识。 首先，我们来看一下DOM加载事件。在JavaScript中，...
详解jQuery事件
10-20
首先，jQuery 使用 `.on()` 方法来绑定事件处理程序。例如，在给定的HTML结构中，我们有一个`<button>`元素，要监听其点击事件，可以使用以下代码： ```javascript $('#example').on('click', function(e) { alert...
ChatGPT原理1-3
06-20
ChatGPT原理1-3
aiohttp-3.4.0b2.tar.gz
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
小程序版通过CNN训练识别印刷体数字和字母-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
AI+智慧校园建设方案PPT(100页).pptx
06-20
智慧校园大数据信息化AIOT平台建设整体解决方案是一个综合性的校园智能化升级计划，旨在通过应用物联网、大数据、人工智能等高新技术，打造一个安全、便捷、绿色的校园环境。该方案遵循国家教育信息化2.0规划和相关标准，强调技术在教育领域的深度应用。 方案的核心内容包括全场景的智能互联、物信融合、AI赋能创新应用，以及校园营运指挥中心的建设。它涵盖了智慧管理、智慧服务、智慧教学等多个方面，通过SAAS、PAAS、DAAS、IAAS等多层次的系统架构，实现从数据存储、管理到智能分析和应用的全面覆盖。 智慧应用聚焦于校园特色场景，如教室、宿舍、图书馆和食堂，通过AI视频智能分析技术，提供便捷服务。方案还包括智能安防、智慧消防、能耗监管等，以实现校园的智能化管理。例如，人脸门禁系统提供无感通行，提高安全性和便捷性；车辆管理系统通过轨迹分析和布控，优化交通秩序。 此外，方案还强调了智能照明、智能水控和电控等节能环保措施，以及通过智能语音分析和录播方案提升教学质量。智慧宿舍通过人脸宿管和智能节电，提高宿舍管理效率。整体上，该方案通过技术集成和创新，推动校园向智能化、信息化转型，为师生创造更安全、便捷、环保的学习和生活环境。
jQuery事件处理机制
05-24
jQuery提供了一些方法来绑定事件处理程序，例如`on()`、`click()`、`keydown()`等等。 当事件被触发时，jQuery会将事件对象作为第一个参数传递给事件处理程序。事件对象包含有关事件的信息，例如事件类型、目标元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值