JQuery事件操作

已于 2023-01-03 19:56:29 修改
阅读量884 收藏
点赞数
分类专栏： JavaScript JQuery 文章标签： jquery javascript 前端
于 2022-12-31 10:28:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52851967/article/details/128502948
版权

1、jQuery 事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

  • 优点: 操作简单，且不用担心事件覆盖等问题。

  • 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。

语法：

element.事件(function(){})

$(“div”).click(function(){ 事件处理程序 })

其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

2、jQuery 事件处理

因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下：

  • on(): 用于事件绑定，目前最好用的事件绑定方法

  • off(): 事件解绑

  • trigger() / triggerHandler(): 事件触发

2.1、事件处理 on() 绑定事件

        因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

语法：on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

element.on(events,[selector],fn)
  • events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
  • selector: 元素的子元素选择器 。
  • fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

$(“div”).on({
    mouseover: function(){},
    mouseout: function(){},
    click: function(){}
});

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
    $(this).toggleClass(“current”);
});

on() 方法优势2：

        可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click', 'li', function() {
    alert('hello world!');
});

        在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

        动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

$(“div").on("click",”p”, function(){
    alert("俺可以给动态生成的元素绑定事件")
});
$("div").append($("<p>我是动态创建的p</p>"));
<!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="jquery.min.js"></script>
</head>

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

    </ol>
    <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");
            //     }
            // });
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // (2) on可以实现事件委托（委派）
            // $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
            // (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>

2.2、案例：发布微博案例

  • 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
  • 点击的删除按钮，可以删除当前的微博留言。
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        
        ul {
            list-style: none
        }
        
        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }
        
        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }
        
        ul {
            width: 450px;
            padding-left: 80px;
        }
        
        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        
        input {
            float: right;
        }
        
        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
            $(".btn").on("click", function() {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");
            })

            // 2.点击的删除按钮，可以删除当前的微博留言li
            // $("ul a").click(function() {  // 此时的click不能给动态创建的a添加事件
            //     alert(11);
            // })
            // on可以给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            })

        })
    </script>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

</html>

2.3、事件处理 off() 解绑事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
$("ul").off("click", "li"); // 解绑事件委托

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

<!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;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on({
                click: function() {
                    console.log("我点击了");
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $("ul").on("click", "li", function() {
                alert(11);
            });
            // 1. 事件解绑 off 
            // $("div").off();  // 这个是解除了div身上的所有事件
            $("div").off("click"); // 这个是解除了div身上的点击事件
            $("ul").off("click", "li");
            // 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })
        })
    </script>
</head>

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

</html>

2.4、自动触发事件 trigger()

        有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click() // 第一种简写形式

element.trigger("type") // 第二种自动触发模式


$("p").on("click", function () {
    alert("hi~");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击

        有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.triggerHandler(type) // 第三种自动触发模式

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

<!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;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $("div").on("click", function() {
                alert(11);
            });

            // 自动触发事件
            // 1. 元素.事件()
            // $("div").click();会触发元素的默认行为
            // 2. 元素.trigger("事件")
            // $("div").trigger("click");会触发元素的默认行为
            $("input").trigger("focus");
            // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
            $("div").triggerHandler("click");
            $("input").on("focus", function() {
                $(this).val("你好吗");
            });
            // $("input").triggerHandler("focus");

        });
    </script>
</head>

<body>
    <div></div>
    <input type="text">
</body>

</html>

3、jQuery 事件对象

        jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event) {})

阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()

<!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;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");

            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</head>

<body>
    <div></div>
</body>

</html>

4、jQuery 拷贝对象

如果想要把某个对象拷贝（合并） 给另外一个对象使用，此时可以使用 $.extend() 方法

$.extend([deep], target, object1, [objectN])
  • deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
  • target: 要拷贝的目标对象
  • object1:待拷贝到第一个对象的对象。
  • objectN:待拷贝到第N个对象的对象。
  • 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
  • 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。
<!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>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // var targetObj = {};
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj);
            // var targetObj = {
            //     id: 0
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            // // $.extend(target, obj);
            // $.extend(targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
            // targetObj.msg.age = 20;
            // console.log(targetObj);
            // console.log(obj);
            // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
            $.extend(true, targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
            targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}
            console.log(obj);




        })
    </script>
</head>

<body>

</body>

</html>

5、jQuery 多库共存

        实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

jQuery 解决方案：

  • 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
  • jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();
<!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>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>
</head>

<body>
    <div></div>
    <span></span>
</body>

</html>

6、jQuery 插件

        jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入

jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

悠然予夏
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery事件之表单事件
leejj_520的博客
04-10 916
1. jQuery表单事件之blur与focus事件 在之前我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件。 它们之间的本质区别：是否支持冒泡处理 举个简单的例子   其中input元素可以触发focus()事件 div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了foc
jQuery input监听数据输入触发事件（文本框内容改变即时触发事件）
weixin_46990454的博客
12-28 2917
$("input").bind("input propertychange", function(){ console.log("test"); });
jq——监听input组件type=“radio“单选框的change事件——基础积累
最新发布
yehaocheng520的博客
02-01 5364
jq——监听input组件type="radio"单选框的change事件——基础积累
如何通过JQuery动态触发oninput事件
逛窑子的李靖的博客
12-08 7861
如何通过JQuery动态触发`oninput`事件
详解Jquery的事件操作和文档操作
10-20
本篇文章主要对Jquery的事件操作和文档操作进行实例的分享，具有很好的参考价值，需要的朋友一起来看下吧
jQuery操作事件完整实例分析
10-15
总结起来，jQuery提供了`.bind()`、`.unbind()`、`.one()`以及`.ready()`等方法，方便我们进行事件操作。理解并熟练运用这些方法，能够帮助开发者编写出更加高效、可维护的JavaScript代码，提升用户体验。通过实例...
jQuery级联操作绑定事件实例
10-25
主要介绍了jQuery级联操作绑定事件,非常具有实用价值,需要的朋友可以参考下
Jquery基础之事件操作详解
12-01
事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等，较传Javascript 相比JQuery增加并扩展了基本的事件处理机制，极大的增强了事件...
jQuery事件操作
YOU__FEI的博客
10-05 1383
什么是jQuery?jQuery，顾名思义，也就是JavaScript 和查询（Query），它就是辅助JavaScript 开发的 js 类库。jQuery 核心思想！！！它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。jQuery 流行程度jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用。jQuery的好处！！！jQuery 是免费、开源的。
详解jquery类库中的计算机事件方法
m0_52014200的博客
05-14 163
【详解Jquery类库中mouseover()、mouseout()、mousedown()、mouseup()、focus()、blur()、focus()、 keyup()、keydown()、keypress()、mouseenter()、mouseleave()函数方法的区别 】 作者：本人 一、mouseover()方法和mouseout()方法。 顾名思义，按字面意思来理解，这两种方法分别就是啥？分别就是两个不同的鼠标事件方法。前者定义了当用户鼠标移动到某个DOM对象上会发生什么，后者定义了当用
Jq input请求优化 input事件值变化
cjy12138的博客
11-23 1617
Jq的input监听事件很频繁，但是大多数情况在输入中文时我们只要按下空格之后的中文，而并不需要在输入中文过程中产生的拼音字母，这时就需要做一些校验了。事件监听的回调中event变量里面其实什么都有，因此根据这个变量的值做了以下校验，实际生产中需要的校验： // 校验输入是否需要发请求 function validateInput(event) { var currentInput = ...
jquery监听input值改变事件
热门推荐
joefany的博客
06-28 4万+
$(“#itemcode”).bind(“input propertychange”, function() {});注意：该事件是在值变化时触发事件，而另一个事件change，则是在失去焦点时触发时间
jQuery 监听修改文本框事件
LinDom
08-11 1万+
在开发中，有时我们需要对 input 的 value 值变化作实时响应。比如文本输入框的实时字数统计功能，要求文本框内容改变时就要触发相关的统计行为。不管这个内容是键盘输入的，还是鼠标粘贴进来的。 1，实现原理 要实现内容实时监听响应，我们需要用到两个监听事件：oninput 事件和 propertychange 事件 （1）oninput 这个是标准浏览器的事件，一般浏览器都支持。当
JQ——input处理
kinding的博客
06-25 388
$('#input').on('keypress',function(ev){ if(ev.keyCode==13){ //search }})
jQuery实现input内的内容修改事件
cat_pp的博客
11-15 7942
今天实现了在表格中实现单元格数据可维护，我使用的是select下拉框和input输入框，select下拉框的实例地址： http://blog.csdn.net/cat_pp/article/details/53169956下面是我用input文本输入框实现的一个实例： 1、HTML页面部分：<td id="changeData"><input id="data" name="${o.id }"
jquery 内容改变时触发事件
Mevin的专栏
12-07 2万+
$("#textboxID").bind("input propertychange", function() { alert($(this).val()); });
jQuery事件操作详解：从绑定到触发
本资源详细介绍了Web前端开发中Jquery的事件操作，...总结来说，这个资源深入探讨了Jquery中的事件处理机制，从基础的事件绑定到高级的事件触发和解绑，对于学习和提升Web前端开发中的Jquery事件操作技能非常有帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠然予夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值