jquery事件

最新推荐文章于 2024-03-20 08:53:45 发布
最新推荐文章于 2024-03-20 08:53:45 发布
阅读量109 收藏
点赞数
分类专栏： js jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/no_name_sky/article/details/118460069
版权
js 同时被 2 个专栏收录
9 篇文章 0 订阅
订阅专栏
jquery
6 篇文章 0 订阅
订阅专栏

事件流

事件流描述的是从页面中接收事件的顺序。

DOM事件流

  1. 事件捕捉阶段
  2. 处于目标阶段
  3. 事件冒泡阶段

事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一致传播到事件的实际目标，就是id为btn的a标签。接着所在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收， 然后逐级向上传播到较为不具体的节点（document）。

在jquery中是没有捕获阶段的，在实际项目中用不到捕获阶段。

事件冒泡的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        .father{
            width:300px;
            height:300px;
            background-color:red;
        }
    </style>
</head>
<body>
<div class="father">

    <button>按钮</button>
</div>
<script>
    $(function(){
        // 按钮绑定事件，在所有的事件回调函数中，都会有默认的事件对象event
        $('button').click(function(event){
            console.log(event);
            alert($(this).text());

            // 阻止事件冒泡,事件就不会王父亲上传播了
            event.stopPropagation();
        })

        // 给父亲盒子绑定事件
        $('.father').click(function(){
            alert('父亲被点击了');
            
            // 既阻止了默认事件，又阻止了冒泡
            return false;
        })

        /*没有阻止事件冒泡，当点击button按钮的时候，button事件触发，父盒子的事件也触发。这就是事件冒泡，点击button的事件，冒泡到.father，其事件也被执行。*/

    });
</script>
</body>
</html>

事件对象

默认参数event的一些属性解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<button>按钮</button>
<input type="text" name="user">
<p class="content"></p>
<script>
    $(function(){
        //$('input').click(function(e){
        //
        //})
        // jquery中没有监听输入框输入内容的方法
        // 使用原生js的 oninput事件
        $('input').get(0).oninput = function(e){
            console.log(e.target.value);
            $('.content').text(e.target.value);
        }

        $('button').click(function(e){
            // currentTarget 当前事件的目标对象
            //console.log(e.currentTarget);
            // 事件的触发对象 返回js对象
            console.log(e.target);

            // 在用事件的时候 95%都需要阻止冒泡
            //e.stopPropagation();

            console.log(e.target.innerText);
            console.log($(e.target).text());

            // 判断 e.currentTarget e.target this之间的关系
            console.log(e.target === this);
            console.log(e.currentTarget === this);
        })
        $('body').click(function(e){
            //console.log(e.currentTarget);
            console.log(e.target);
            console.log(e.target === this);
            console.log(e.currentTarget === this);
        })
        $('html').click(function(e){
            //console.log(e.currentTarget);
            console.log(e.target);
            console.log(e.target === this);
            console.log(e.currentTarget === this);
        })
    })
</script>
</body>
</html>

效果：
在这里插入图片描述

点双击点击事件

click()绑定单击事件，dblclick()绑定双击事件，会有单双击点击事件冲突，即双击的时候单击事件也会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<button>按钮</button>
<script>
    $(function(){
        // 遇到的问题是，在双击时，调用了两次单击。
        // 两次单击中间的时间差是300ms，如果小于300ms表示双击。
        $('button').click(function(e){
            console.log('点击了');
        })
        $('button').dblclick(function(e){
            console.log('双击击了');
        })
    })
</script>
</body>
</html>

效果
在这里插入图片描述
解决双击冲突

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<button>按钮</button>
<script>
    $(function(){

        // 解决单双及冲突问题
        var timer;
        $('button').click(function(e){
            // 如果是双击事件，要阻止两次单击事件的调用
            clearTimeout(timer);  // 取消第一次延迟未执行的定时器
            timer = setTimeout(function(){
                console.log('点击了');
            }, 300);

        })
        $('button').dblclick(function(e){
            clearTimeout(timer);  // 取消的是第二次延迟为执行的定时器
            console.log('双击击了');
        })
        // 双击的时候，给单击设置定时器让其然后执行，在双击的事件驱动中将timer清除，点击事件就不会调用了。
    })
</script>
</body>
</html>

效果：
在这里插入图片描述

鼠标移入移出事件

mouseover, mouseout鼠标指针穿过/离开被选元素或者当前元素的子元素会触发事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        .father{
            width:200px;
            height:200px;
            background-color:red;
        }
        .child{
            width:50px;
            height:50px;
            background-color:green;
        }
    </style>
</head>
<body>

<div class="father">
    <div class="child"></div>
</div>
<script>
    $(function(){
    	// 鼠标穿过被选元素和被选元素的子元素，会触发此事件
        $('.father').mouseover(function(e){
            console.log('移入');
        })
        $('.father').mouseout(function(e){
            console.log('移出');
        })
    })
</script>
</body>
</html>

在这里插入图片描述
mouseenter, mouseleave鼠标只穿过被选元素会触发事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        .father{
            width:200px;
            height:200px;
            background-color:red;
        }
        .child{
            width:50px;
            height:50px;
            background-color:green;
        }
    </style>
</head>
<body>

<div class="father">
    <div class="child"></div>
</div>
<script>
    $(function(){
        $('.father').mouseenter(function(e){
            console.log('移入');
        })
        $('.father').mouseleave(function(e){
            console.log('移出');
        })
    })
</script>
</body>
</html>

在这里插入图片描述
jquery的合成事件，合成了mouseenter mouseleave

$('.shortCart').hover(function(){进入事件mouseenter},function(){出去事件mouseleave});

表单事件

1. change() 表单元素发生改变时触发事件，此事件仅限于 input textarea select 元素。
2. select() 文本元素发生改变时触发事件，此事件仅限于input type值为text和textarea的元素
3. submit() 表单元素有默认的submit事件，但是可以调用jQuery的submit通过event.preventDefault来阻止默认事件，动态发送数据。

select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" name="user">
<script>
    $(function(){
        //文本选中的时候会调用
        $('input[type="text"]').select(function(){
            console.log("内容选中了");
        })
    })
</script>
</body>
</html>

效果
在这里插入图片描述
submit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<form action="//www.baidu.com/s">
    <input type="text" name="wd">
    <input type="submit" value="搜索">
</form>
<script>
    $(function(){
        $('form').submit(function(e){
            // 阻止form的submit默认事件
            e.preventDefault();
            console.log('被提交了');
        })
    })
</script>
</body>
</html>

在这里插入图片描述

鼠标聚焦失焦事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" name="user">
<script>
    $(function(){
        // 页面一刷新的时候就获取焦点
        $('input[type="text"]').focus();

        setTimeout(function(){
            // 两秒钟后失去焦点
            $('input[type="text"]').blur();
        }, 2000);

        // 获取焦点的时候绑定事件
        $('input[type="text"]').focus(function(){
            console.log('获取焦点');
        });

        $('input[type="text"]').blur(function(){
            console.log('失去焦点');
        });
    })
</script>
</body>
</html>

键盘按键事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<input type="text" name="user">
<script>
    $(function(){
        $('input[type="text"]').keyup(function(){
            console.log('键盘弹起');
        });

        $('input[type="text"]').keydown(function(){
            console.log('键盘按下');
        });
    })
</script>
</body>
</html>

事件委托

事件委托就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来完成这个事件。
原理：利用冒泡原理，把事件加到父级上，触发执行效果。
作用：

  1. 性能要好
  2. 针对新创建的元素，可以直接拥有事件

使用场景：

  1. 为DOM中很多元素绑定同一事件
  2. 为DOM中不存在的元素绑定事件

没有事件委托的场景，新添加的li标签无事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<button>添加</button>
<script>
    $(function(){
        // 未来动态的往ul中追加了li标签，就没有事件了，需重新添加事件
        $('ul>li').click(function(){
            alert($(this).text());
        })

        $('button').click(function(){
            $('ul').append('<li>3</li>');
        })
    })
</script>
</body>
</html>

增加事件委托：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<button>添加</button>
<script>
    $(function(){
        // 事件委托 on(事件类型,选择器,事件绑定)
        $('ul').on('click', 'li', function(e){
            alert($(this).text());
        })

        $('button').click(function(){
            $('ul').append('<li>3</li>');
        })
    })
</script>
</body>
</html>

效果：
在这里插入图片描述

no_name_sky
关注
专栏目录
jQuery事件监听
moduzhang的博客
09-26 1万+
monitorEvents() 浏览器事件监听 控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签中输入： monitorEvents($0) 现在，将鼠标悬停在该元素上时，关注或单击它， 将显示触发事件的名称及其数据。 要停止获取该数据，只需在控制台中写入下行： unmonitorEvents($0) monitorEvents() Documentat...
jQuery事件机制
流楚丶格念的博客
12-19 4236
文章目录jQuery事件机制jQuery事件发展历程(了解)on注册事件(重点)on事件注册的两种方式事件的执行顺序事件解绑off方式（推荐）触发事件jQuery事件对象案例：钢琴版导航（加强）（还不会，得回头看） jQuery事件机制 JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。 jQuery事件发展历程(了解) 简单事件绑定>>bind
jQuery事件
weixin_64037609的博客
09-20 1288
jQuery事件
jQuery 事件
weixin_50643611的博客
03-20 1149
jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。
jquery事件委托
m0_54829066的博客
01-07 1929
jQuery 事件委托就是将事件监听器绑定到包含这些元素的父元素上，而不是将事件绑定到每个元素上。这样做的好处是，如果有新的子元素加入到父元素中，它们也能够触发绑定在父元素上的事件。这样，无论何时有新的按钮加入到文档中，它们都能够触发绑定在 body 元素上的点击事件。
jQuery 事件冒泡
柯晓楠
11-28 3056
jQuery 事件冒泡解释 官方解释： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 草根解释： 当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在
jQuery事件处理
shao_xuan_的博客
12-18 1940
jQuery事件处理前言事件绑定Query事件处理函数的好处反绑定事件事件触发器trigger触发事件triggerHandler触发事件快捷事件 Event Helpershover：模仿鼠标悬停jQuery中事件对象JQuery中事件对象操作 前言 jQuery在JavaScript基本的事件处理机制的基础上，对其进行了增强和扩展。jQuery不但提供了十分优雅的事件处理语法，而且也对事件处理机制本身作了很大的增强。 如在页面加载事件中，JavaScript使用window.onload()方法，它在页
jQuery事件冒泡
li840793179的博客
03-09 2403
开始前，我就想问几个问题。 什么是事件冒泡 如何阻止事件冒泡 先看代码图、设置两个盒子，用一个盒子包着另一个盒子，外边的盒子我给它红色、里边的盒子我给它蓝色，用jQuery赋予两个盒子点击事件 当你点击外边的盒子时，提示框会弹出“fanther”如下图 当你点击里边的盒子时。提示框会依次弹出“son”和“fanther”。 如果子元素和父元素同时注册了点击事件或其他事件，在子元素响应事件的时候父元素也会跟着响应事件，这就是事件的冒泡，事件冒泡就是事...
jQuery事件对象
原地起飞
12-14 1314
一、jQuery 事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。 语法： 演示代码 ： <body> <div></div> <script> $(function() { $(document).on("click", function() { consol...
JQUERY事件绑定
bootstrapsayno的博客
08-23 1199
jquery中的事件使用
jQuery学习5 jQuery事件模型
12-10
jQuery事件模型是JavaScript库jQuery中的核心功能之一，它简化了事件处理程序的创建和管理，使得跨浏览器的事件处理变得更加简单。以下是对jQuery事件模型的详细说明： 1. **统一事件处理程序方法**：jQuery提供了...
理解jquery事件冒泡
01-19
一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡...
jQuery事件对象的属性和方法详解
12-11
jQuery事件对象的属性和方法，供大家参考，具体内容如下 事件对象的属于与方法有很多，但是我们经常用的只有那么几个，这里我主要说下作用与区别 event.type：获取事件的类型 触发元素的事件类型 $("a").click...
jQuery事件处理的特征(事件命名机制)
10-21
jQuery事件处理具有几个核心特征，尤其值得深入了解的是其事件命名机制和处理方式。 首先，我们来谈谈事件命名机制。在jQuery中，事件名称遵循特定的命名规则，通常与原生JavaScript事件类似，但也有自己的特色。...
用于项目样式reset的资源
11-03
用于项目样式reset的资源
pytz-2016.10.tar.bz2
最新发布
11-03
pytz库的主要功能 时区转换：pytz库允许用户将时间从一个时区转换到另一个时区，这对于处理跨国业务或需要处理多地时间的数据分析尤为重要。 历史时区数据支持：pytz库不仅提供了当前的时区数据，还包含了历史上不同时期的时区信息，这使得它在处理历史数据时具有无与伦比的优势。 夏令时处理：pytz库能够自动处理夏令时的变化，当获取某个时区的时间时，它会自动考虑是否处于夏令时期间。 与datetime模块集成：pytz库可以与Python标准库中的datetime模块一起使用，以确保在涉及不同时区的场景中时间的准确性。
VB程序实例-判断键盘按下的键值.zip
11-03
VB程序实例-判断键盘按下的键值.zip
VB程序实例-控制其他程序成为自己的子窗体.zip
11-03
VB程序实例-控制其他程序成为自己的子窗体.zip
理解jQuery事件绑定机制
"这篇文章主要探讨了jQuery事件绑定的原理，通过实例展示了如何使用jQuery的data方法为DOM元素附加数据，并揭示了事件绑定后在元素上存储的事件列表和处理函数。" jQuery是一个广泛使用的JavaScript库，它极大地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值