1. jQuery 事件注册
语法：element.事件（function() {} ）；
如：$('div').click ( function() { 事件处理程序 }）
单个事件注册，一次只能给一个元素注册一个类型的事件，但是有时需要给同个元素注册多个事件，这时就要写重复写，如下代码：
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { width: 100px; height: 100px; background-color: purple; } </style> <body> <!-- HTML结构 --> <div></div> <!-- js 代码 --> <script> // （1）点击事件 $('div').click(function() { $(this).css('backgroundColor', 'pink'); }); // (2) 鼠标移入事件 $('div').mouseenter(function() { $(this).css('backgroundColor', 'skyblue'); }); </script> </body>给div绑定两个事件，需要注册两个事件，代码略显冗余。
2. jQuery 事件处理
2.1 事件处理 on() 绑定事件
on() 方法可以给元素绑定一个或多个事件的事件处理函数。
语法：element.on( events, [ selector ], fn)
① events：表示一个或多个用空格分隔的事件类型，如“click”’或“mouseenter”。
② selector：表示元素的子元素选择器，用于事件委托。
③ fn：回调函数，即绑定在元素身上的侦听函数。
2.2 on() 方法是三大优势
（1）优势1
on() 方法可以绑定多个事件，多个处理事件程序。
<!-- HTML结构 --> <div></div> <!-- js 代码 --> <script> // （1） 绑定3个事件：点击事件+鼠标移入和移出事件 $('div').on({ click: function() { $(this).css('backgroundColor', 'skyblue'); }, mouseenter: function() { $(this).css('backgroundColor', 'pink'); }, mouseleave: function() { $(this).css('backgroundColor', 'blue'); } }); // （2）如果事件程序相同，还可以这样写，注意事件之间使用空格分隔，类似前面学习的hover() $('div').on("mouseover mouseout", function() { $(this).toggleClass('current') }) </script>注意：
① on() 方法绑定多个事件时，使用对象存储各个事件即事件处理程序；
② 如果事件程序相同，可以简写。
（2）优势2
可以进行事件委派操作，即把原来加在子元素身上的事件绑定在父元素身上，把事件委派给父元素
<body> <!-- HTML结构 --> <ul> <li>今天我真高兴</li> <li>今天我真高兴</li> <li>今天我真高兴</li> <li>今天我真高兴</li> <li>今天我真高兴</li> </ul> <!-- js 代码 --> <script> // 需求：点击每个li，该li 的字体颜色变红 // 使用on()方法，进行事件委派，将事件注册到ul身上，但是触发的对象是li $('ul').on('click', 'li', function() { $(this).css('color', 'red') }); </script> </body>
（3）优势3
on() 方法可以给动态生成的元素绑定事件，但是click()等事件方法不可以。
<body> <!-- HTML结构 --> <ol></ol> <!-- js 代码 --> <script> // 需求：给动态生成的li 绑定点击事件 // （1）把点击事件click()放在动态生成元素的前面是无效的 // $('li').click(function() { // alert(1) // }); // （2）使用on()方法就算放在动态生成元素的前面，也一样可以触发 $('ol').on('click', 'li', function() { alert(11) }); // 创建元素 let li = $('<li>我是后来创建的</li>'); // 添加元素 $('ol').prepend(li); </script> </body>分析：之所以使用on()方法可以为动态生成的元素绑定事件，是因为它利用的是事件委派，真正绑定事件的是它的父元素，而它只是触发对象。
2.3 案例：仿微博留言发布
需求：在文本框内书写内容，点击发布，最新发布的内容显示在文本框下面，并且每条内容自带一个删除链接，点击该链接可以删除本条内容。
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> * { margin: 0; padding: 0; } .container { width: 500px; padding: 20px 10px 20px 20px; margin: 100px auto; border: 1px solid #ccc; } textarea { width: 380px; height: 200px; resize: none; outline: none; } ul { margin: 15px 50px 0 70px; } ul li { display: none; line-height: 30px; list-style: none; font-size: 14px; border-bottom: 1px dashed #ccc; } ul li a { float: right; text-decoration: none; } </style> <body> <!-- HTML结构 --> <div class="container"> <div class="send"> <span>微博发布</span> <textarea id="text"></textarea> <button id="sendBtn">发布</button> </div> <ul></ul> </div> <!-- js 代码 --> <script> $(function() { // (1) 点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中 $('#sendBtn').on('click', function() { // 获取文本框中的值 let value = $("#text").val(); // 非空验证 if (value.trim().length === 0) { return alert('请输入内容'); }; // 创建元素li let li = $('<li></li>'); // 给元素li赋值 li.html(value + '<a href="javascript:;">删除</a>'); // 添加元素 $('ul').prepend(li); // 让li慢慢滑动出来 li.slideDown(); // 清空文本框内容 $("#text").val(''); }); // (2) 点击删除按钮，可以删除当前的留言li // 删除按钮是动态创建的，所以使用on()方法绑定事件 $('ul').on('click', 'a', function() { // slideUp()是将元素上拉隐藏，并未真的删除，所以利用它的回调函数参数进行真正的删除 $(this).parent().slideUp(function() { $(this).remove(); }) }); }) </script> </body>
2.4 事件处理 off() 解绑事件
off() 方法可以移除事件处理程序（即解绑事件）。
语法：
① $('div').off() // 解绑div元素所有的事件处理程序
② $('div').off('click') // 解绑div元素上面的点击事件
③ $('ul').off('click' , 'li' ) // 解绑ul元素的事件委托
2.5 代码体验
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <body> <!-- HTML结构 --> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子</li> <li>我们都是好孩子</li> </ul> <p>我是个啥</p> <!-- js 代码 --> <script> $(function() { // 绑定事件 $("div").on({ click: function() { console.log("我点击了"); }, mouseover: function() { console.log("我经过了"); } }); $("ul").on("click", "li", function() { alert(111); }); // 1. 事件解绑 off 无参全部解绑，有参就是解绑参数对应的事件 // $("div").off(); // 全部解绑 $("div").off("click"); // 解除点击事件 // 解绑事件委托 $("ul").off("click", "li"); // $("ul").off(); // 2. one() 但是它只能触发事件一次 $("p").one("click", function() { alert(222); }) }) </script> </body>注意：如果某个事件从头到尾只需要执行一次，那么没必要注册事件然后又解绑事件，可以直接使用one() 方法，该方法绑定的事件只能触发一次。
2.6 自动触发事件 trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击。
语法：
① element.事件(); // 如：element.click()
② element.trigger('事件类型'); // 如：element.trigger('click')
③ element.triggerHandler('事件类型') // 如： element.triggerHandler('click')
2.7 代码体验
<!-- 引入 jQuery 文件 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- css样式 --> <style> div { width: 200px; height: 200px; background-color: pink; } </style> <body> <!-- HTML结构 --> <div></div> <input type="text" name="" id=""> <!-- js 代码 --> <script> $(function() { // （1）给div绑定事件 $("div").on("click", function() { alert(111); }); // （2）自动触发事件的三种方法 // 1. 元素.事件() // $("div").click(); // 2. 元素.trigger("事件") // $("div").trigger("click"); // 3. 元素.triggerHandler("事件") 不会触发元素的默认行为 $("div").triggerHandler("click"); $("input").on("focus", function() { $(this).val("你好吗？") }); // $("input").triggerHandler("focus"); // 不会有鼠标光标闪动 // $("input").trigger("focus"); // 会有鼠标光标闪动(触发默认行为) $("input").focus(); // 会有鼠标光标闪动(触发默认行为) }) </script> </body>注意：第二种方法：元素.trigger("事件") 和 第三种方法：元素.triggerHandler("事件") 的区别在于是否会触发元素的默认行为，第二种会触发，而第三种不会触发，同时第一种：元素.事件() 也会触发默认行为。
3. jQuery 事件对象
只要事件被触发，就会有事件对象的产生。
jQuery事件对象中的相关内容和原生js中的事件对象类似，比如也有阻止默认行为：e.preventDefault()、阻止冒泡：e.stopPropagation() 等。所以在此不再赘述，有需要的可以查看我的这篇文章DOM--事件操作_JJ_Smilewang的博客-CSDN博客_dom事件操作
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
